Skip to content

Commit 910e2ce

Browse files
chaychanchaychan
committed
完善BottomBarLayout的演示，更新README
1 parent 2fa5379 commit 910e2ce

9 files changed

Lines changed: 285 additions & 14 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
# PowerfulViewLibrary
22

3-
###PowerfulEditText介绍
3+
###PowerfulEditText(功能强大的EditText)介绍
44

55
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md)
66

7-
###NumberRunningTextView介绍
7+
###NumberRunningTextView(仿支付宝数字滚动的TextView)介绍
88

99
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/NumRunningTextView.md)
1010

11-
###ExpandableLinearLayout介绍
11+
###ExpandableLinearLayout(可展开收起的LinearLayout)介绍
1212

1313
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/ExpandableLinearLayout.md)
1414

15+
###BottomBarLayout(轻量级底部导航栏)介绍
16+
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/BottomBarLayout.md)
17+
1518
####**导入方式**####
1619
在项目根目录下的build.gradle中的allprojects{}中，添加jitpack仓库地址，如下：
1720

@@ -25,6 +28,5 @@
2528
打开app的module中的build.gradle，在dependencies{}中，添加依赖，如下：
2629

2730
dependencies {
28-
......
29-
compile 'com.github.chaychan:PowerfulViewLibrary:1.1.7'
31+
compile 'com.github.chaychan:PowerfulViewLibrary:1.2.1'
3032
}

‎app/src/main/java/com/chaychan/powerfulviewlibrary/activity/BottomBarLayoutDemoActivity.java‎

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
package com.chaychan.powerfulviewlibrary.activity;
22

33
import android.os.Bundle;
4+
import android.os.Handler;
45
import android.support.v4.app.Fragment;
56
import android.support.v4.app.FragmentActivity;
67
import android.support.v4.app.FragmentManager;
78
import android.support.v4.app.FragmentStatePagerAdapter;
89
import android.support.v4.view.ViewPager;
10+
import android.view.animation.Animation;
11+
import android.view.animation.RotateAnimation;
12+
import android.widget.ImageView;
913

1014
import com.chaychan.powerfulviewlibrary.R;
1115
import com.chaychan.powerfulviewlibrary.fragment.TabFragment;
16+
import com.chaychan.viewlib.bottombarlayout.BottomBarItem;
1217
import com.chaychan.viewlib.bottombarlayout.BottomBarLayout;
1318

1419
import java.util.ArrayList;
@@ -20,11 +25,13 @@
2025
public class BottomBarLayoutDemoActivity extends FragmentActivity {
2126

2227
@Bind(R.id.vp_content)
23-
ViewPager vpContent;
28+
ViewPager mVpContent;
2429
@Bind(R.id.bbl)
25-
BottomBarLayout bbl;
30+
BottomBarLayout mBottomBarLayout;
2631

2732
private List<TabFragment> mFragmentList = new ArrayList<>();
33+
private RotateAnimation mRotateAnimation;
34+
private Handler mHandler = new Handler();
2835

2936
@Override
3037
protected void onCreate(Bundle savedInstanceState) {
@@ -64,8 +71,58 @@ private void initData() {
6471
}
6572

6673
private void initListener() {
67-
vpContent.setAdapter(new MyAdapter(getSupportFragmentManager()));
68-
bbl.setViewPager(vpContent);
74+
mVpContent.setAdapter(new MyAdapter(getSupportFragmentManager()));
75+
mBottomBarLayout.setViewPager(mVpContent);
76+
mBottomBarLayout.setOnItemSelectedListener(new BottomBarLayout.OnItemSelectedListener() {
77+
@Override
78+
public void onItemSelected(final BottomBarItem bottomBarItem, int position) {
79+
if (position == 0){
80+
//如果是第一个，即首页
81+
if (mBottomBarLayout.getCurrentItem() == position){
82+
//如果是在原来位置上点击,更换首页图标并播放旋转动画
83+
bottomBarItem.setIconSelectedResourceId(R.mipmap.tab_loading);//更换成加载图标
84+
bottomBarItem.setStatus(true);
85+
86+
//播放旋转动画
87+
if (mRotateAnimation == null) {
88+
mRotateAnimation = new RotateAnimation(0, 360,
89+
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
90+
0.5f);
91+
mRotateAnimation.setDuration(800);
92+
mRotateAnimation.setRepeatCount(-1);
93+
}
94+
ImageView bottomImageView = bottomBarItem.getImageView();
95+
bottomImageView.setAnimation(mRotateAnimation);
96+
bottomImageView.startAnimation(mRotateAnimation);//播放旋转动画
97+
98+
//模拟数据刷新完毕
99+
mHandler.postDelayed(new Runnable() {
100+
@Override
101+
public void run() {
102+
bottomBarItem.setIconSelectedResourceId(R.mipmap.tab_home_selected);//更换成首页原来图标
103+
bottomBarItem.setStatus(true);//刷新图标
104+
cancelTabLoading(bottomBarItem);
105+
}
106+
},3000);
107+
return;
108+
}
109+
}
110+
111+
//如果点击了其他条目
112+
BottomBarItem bottomItem = mBottomBarLayout.getBottomItem(0);
113+
bottomItem.setIconSelectedResourceId(R.mipmap.tab_home_selected);//更换为原来的图标
114+
115+
cancelTabLoading(bottomItem);//停止旋转动画
116+
}
117+
});
118+
}
119+
120+
/**停止首页页签的旋转动画*/
121+
private void cancelTabLoading(BottomBarItem bottomItem) {
122+
Animation animation = bottomItem.getImageView().getAnimation();
123+
if (animation != null){
124+
animation.cancel();
125+
}
69126
}
70127

71128
class MyAdapter extends FragmentStatePagerAdapter{

‎app/src/main/res/mipmap-xxhdpi/tab_loading.png‎

646 Bytes
Loading

‎readmes/BottomBarLayout.md‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
###轻量级的底部导航栏
2+
&emsp;&emsp;目前市场上的App，几乎都有底部页签导航栏，所以我们在开发的时候经常需要用到这个，虽然github上有不少已经封装好的底部导航栏的工具，例如bottombar,alphaIndicator(仿微信滑动渐变底部控件)等，但是这些控件由于功能太多，而且也没有给予详细的介绍文档，所以用起来不是特别容易，有时候我们仅仅只是想要一个简简单单的底部导航，但是又不想去自己在布局中搞一个个LinearLayout或者RadioGroup，然后切换页签的时候更换图标，让ViewPager跳转到对应的页面等一系列繁琐的操作，这时候，你可以使用BottomBarLayout，简简单单就可以实现以下效果：
3+
4+
![](./introduce_img/bbl/display1.gif)
5+
6+
7+
###BottomBarLayout的使用
8+
9+
####布局文件中配置
10+
11+
在xml文件中，配置BottomBarLayout，包裹子条目BottomBarItem
12+
13+
<?xml version="1.0" encoding="utf-8"?>
14+
<LinearLayout
15+
xmlns:android="http://schemas.android.com/apk/res/android"
16+
xmlns:app="http://schemas.android.com/apk/res-auto"
17+
android:layout_width="match_parent"
18+
android:layout_height="match_parent"
19+
android:orientation="vertical"
20+
>
21+
22+
<android.support.v4.view.ViewPager
23+
android:id="@+id/vp_content"
24+
android:layout_width="match_parent"
25+
android:layout_height="0dp"
26+
android:layout_weight="1"
27+
></android.support.v4.view.ViewPager>
28+
29+
<com.chaychan.library.BottomBarLayout
30+
android:id="@+id/bbl"
31+
android:layout_width="match_parent"
32+
android:layout_height="45dp"
33+
android:orientation="horizontal"
34+
android:gravity="center"
35+
android:layout_gravity="center"
36+
android:background="@color/tab_gb"
37+
>
38+
39+
<com.chaychan.library.BottomBarItem
40+
android:layout_width="0dp"
41+
android:layout_weight="1"
42+
android:layout_height="match_parent"
43+
app:iconNormal="@mipmap/tab_home_normal"
44+
app:iconSelected="@mipmap/tab_home_selected"
45+
app:itemText="首页"
46+
app:textColorNormal="@color/tab_normal_color"
47+
app:textColorSelected="@color/tab_selected_color"
48+
app:itemTextSize="8sp"
49+
app:itemMarginTop="-5dp"
50+
/>
51+
52+
<com.chaychan.library.BottomBarItem
53+
android:layout_width="0dp"
54+
android:layout_weight="1"
55+
android:layout_height="match_parent"
56+
app:iconNormal="@mipmap/tab_video_normal"
57+
app:iconSelected="@mipmap/tab_video_selected"
58+
app:itemText="视频"
59+
app:textColorNormal="@color/tab_normal_color"
60+
app:textColorSelected="@color/tab_selected_color"
61+
app:itemTextSize="8sp"
62+
app:itemMarginTop="-5dp"
63+
/>
64+
65+
66+
<com.chaychan.library.BottomBarItem
67+
android:layout_width="0dp"
68+
android:layout_weight="1"
69+
android:layout_height="match_parent"
70+
app:iconNormal="@mipmap/tab_micro_normal"
71+
app:iconSelected="@mipmap/tab_micro_selected"
72+
app:itemText="微头条"
73+
app:textColorNormal="@color/tab_normal_color"
74+
app:textColorSelected="@color/tab_selected_color"
75+
app:itemTextSize="8sp"
76+
app:itemMarginTop="-5dp"
77+
/>
78+
79+
<com.chaychan.library.BottomBarItem
80+
android:layout_width="0dp"
81+
android:layout_weight="1"
82+
android:layout_height="match_parent"
83+
app:iconNormal="@mipmap/tab_me_normal"
84+
app:iconSelected="@mipmap/tab_me_selected"
85+
app:itemText="我的"
86+
app:textColorNormal="@color/tab_normal_color"
87+
app:textColorSelected="@color/tab_selected_color"
88+
app:itemTextSize="8sp"
89+
app:itemMarginTop="-5dp"
90+
/>
91+
92+
</com.chaychan.library.BottomBarLayout>
93+
94+
</LinearLayout>
95+
96+
97+
####BottomBarItem属性介绍
98+
99+
<!--默认状态下的图标-->
100+
<attr name="iconNormal" format="reference"/>
101+
<!--选中状态下的图标-->
102+
<attr name="iconSelected" format="reference"/>
103+
<!--底部文字-->
104+
<attr name="itemText" format="string"/>
105+
<!--文字大小-->
106+
<attr name="itemTextSize" format="dimension"/>
107+
<!--默认状态下的文字颜色-->
108+
<attr name="textColorNormal" format="color"/>
109+
<!--选中状态下的文字颜色-->
110+
<attr name="textColorSelected" format="color"/>
111+
<!--文字和图标的顶部距离-->
112+
<attr name="itemMarginTop" format="dimension"/>
113+
114+
####java文件中设置
115+
116+
找过对应的ViewPager和BottomBarLayout,为ViewPager设置Adapter，然后为BottomBarLayout设置ViewPager
117+
118+
mVpContent.setAdapter(new MyAdapter(getSupportFragmentManager()));
119+
mBottomBarLayout.setViewPager(mVpContent);
120+
121+
这样就实现底部导航栏功能了
122+
123+
####开启滑动效果
124+
125+
页签之间的切换默认关闭了滑动效果，如果需要开启可以通过调用BottomBarLayout的setSmoothScroll()方法:
126+
127+
mBottomBarLayout.setSmoothScroll(true);
128+
129+
开启后效果如下:
130+
131+
![](./introduce_img/bbl/display2.gif)
132+
133+
####设置条目选中的监听
134+
135+
mBottomBarLayout.setOnItemSelectedListener(new BottomBarLayout.OnItemSelectedListener() {
136+
@Override
137+
public void onItemSelected(final BottomBarItem bottomBarItem, int position) {
138+
//do something
139+
}
140+
});
141+
142+
####BottomBarItem的介绍
143+
&emsp;&emsp;BottomBarItem继承于LinearLayout，其子View有显示图标的ImageView和展示文字的TextView,分别可以通过getImageView()和getTextView()方法获取到对应的子控件。github上不少底部导航栏的控件都没能获取到对应的子控件，所以在需要对子控件进行操作的时候极不方便，有一些的思路并不是用ImageView和TextView，而是用绘制的，所以也不能获取到对应的显示图标的控件或展示文字的控件，造成无法获取到该控件，无法进行一些业务上的操作，比如类似今日头条的底部的首页，点击首页的页签，会更换成加载中的图标，执行旋转动画，BottomBarLayout可以轻松地做到这个需求。
144+
145+
演示效果如下：
146+
147+
![](./introduce_img/bbl/display3.gif)
148+
149+
150+
只需为BottomBarLayout设置页签选中的监听，在回调中进行以下处理：
151+
152+
mBottomBarLayout.setOnItemSelectedListener(new BottomBarLayout.OnItemSelectedListener() {
153+
@Override
154+
public void onItemSelected(final BottomBarItem bottomBarItem, int position) {
155+
if (position == 0){
156+
//如果是第一个，即首页
157+
if (mBottomBarLayout.getCurrentItem() == position){
158+
//如果是在原来位置上点击,更换首页图标并播放旋转动画
159+
bottomBarItem.setIconSelectedResourceId(R.mipmap.tab_loading);//更换成加载图标
160+
bottomBarItem.setStatus(true);
161+
162+
//播放旋转动画
163+
if (mRotateAnimation == null) {
164+
mRotateAnimation = new RotateAnimation(0, 360,
165+
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
166+
0.5f);
167+
mRotateAnimation.setDuration(800);
168+
mRotateAnimation.setRepeatCount(-1);
169+
}
170+
ImageView bottomImageView = bottomBarItem.getImageView();
171+
bottomImageView.setAnimation(mRotateAnimation);
172+
bottomImageView.startAnimation(mRotateAnimation);//播放旋转动画
173+
174+
//模拟数据刷新完毕
175+
mHandler.postDelayed(new Runnable() {
176+
@Override
177+
public void run() {
178+
bottomBarItem.setIconSelectedResourceId(R.mipmap.tab_home_selected);//更换成首页原来图标
179+
bottomBarItem.setStatus(true);//刷新图标
180+
cancelTabLoading(bottomBarItem);
181+
}
182+
},3000);
183+
return;
184+
}
185+
}
186+
187+
//如果点击了其他条目
188+
BottomBarItem bottomItem = mBottomBarLayout.getBottomItem(0);
189+
bottomItem.setIconSelectedResourceId(R.mipmap.tab_home_selected);//更换为原来的图标
190+
191+
cancelTabLoading(bottomItem);//停止旋转动画
192+
}
193+
});
194+
195+
196+
/**停止首页页签的旋转动画*/
197+
private void cancelTabLoading(BottomBarItem bottomItem) {
198+
Animation animation = bottomItem.getImageView().getAnimation();
199+
if (animation != null){
200+
animation.cancel();
201+
}
202+
}
203+
204+
####实现思路：
205+
206+
1.当点击页签加载的时候，BottomBarItem通过调用setIconSelectedResourceId()设置成选中状态下的图标资源id为加载中图标的资源id,完成图标的更换操作;
207+
208+
2.通过BottomBarItem获取到对应页签的ImageView，对其设置旋转动画，执行旋转动画，当点击其他页签或者数据加载完成后，更换回原来的选中图标，停止旋转动画。
209+
210+
211+
好了，到这里BottomBarLayout的介绍就到此为止了，之所以封装这个控件主要是为了方便开发，希望可以帮助到更多人，如果大家有什么想法或者意见不妨向我提出，我会不断完善BottomBarLayout的。
212+

‎readmes/introduce_img/bbl/display1.gif‎

114 KB
Loading

‎readmes/introduce_img/bbl/display2.gif‎

81.8 KB
Loading

‎readmes/introduce_img/bbl/display3.gif‎

178 KB
Loading

‎viewlib/src/main/java/com/chaychan/viewlib/bottombarlayout/BottomBarItem.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ private void init() {
9090
mTextView.setText(mText);
9191
mTextView.setTextColor(mTextColorNormal);
9292

93-
LinearLayout.LayoutParams layoutParams = (LayoutParams) mTextView.getLayoutParams();
93+
LayoutParams layoutParams = (LayoutParams) mTextView.getLayoutParams();
9494
layoutParams.topMargin = mMarginTop;
9595
mTextView.setLayoutParams(layoutParams);
9696

‎viewlib/src/main/java/com/chaychan/viewlib/bottombarlayout/BottomBarLayout.java‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ public void onClick(View v) {
116116
resetState();
117117
mItemViews.get(currentIndex).setStatus(true);//设置为选中状态
118118
//不能使用平滑滚动，否者颜色改变会乱
119-
mViewPager.setCurrentItem(currentIndex, false);
119+
mViewPager.setCurrentItem(currentIndex, mSmoothScroll);
120120
//点击是保存当前按钮索引
121121
mCurrentItem = currentIndex;
122122
}
@@ -131,8 +131,8 @@ private void resetState() {
131131
}
132132
}
133133

134-
public void setCurrentItem(int mCurrentItem) {
135-
this.mCurrentItem = mCurrentItem;
134+
public void setCurrentItem(int currentItem) {
135+
mCurrentItem = currentItem;
136136
mViewPager.setCurrentItem(mCurrentItem,mSmoothScroll);
137137
}
138138

@@ -180,7 +180,7 @@ protected void onRestoreInstanceState(Parcelable state) {
180180
private OnItemSelectedListener onItemSelectedListener;
181181

182182
public interface OnItemSelectedListener {
183-
void onItemSelected(BottomBarItem bottomBarItem,int position);
183+
void onItemSelected(BottomBarItem bottomBarItem, int position);
184184
}
185185

186186
public void setOnItemSelectedListener(OnItemSelectedListener onItemSelectedListener) {

0 commit comments

Comments
 (0)