现如今,很多app中都有如下图所示的底部导航栏。千篇一律,重复的代码索然无味。这次,我们一起打造一个通用的底部导航。
需求:完成一个通用底部导航的处理
不管首页底下有几个导航模块,都能简单快速实现的替换,点击事件不需要再findViewById。
思路:
1.底部导航外层使用LinearLayout,作为一个底部导航的最外层container。设置id。
2.每个导航按钮用一个Framelayout作为container。
3.我们可以通过最外层container拿到导航按钮的个数,遍历导航按钮,设置点击事件,在点击事件中,改变该Framelayout的enable属性及其所有孩子的状态变化,同时改变其它Framelayout及其孩子的状态,完成统一管理。
代码:
MainActivity布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//项目中切换Fragment,用FrameLayout占位
<FrameLayout
android:id="@+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
//底部导航
<LinearLayout
android:id="@+id/main_bottom_switcher_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
//每个导航按钮用一个FrameLayout占位
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:src="@drawable/home" />
<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:gravity="center"
android:text="首页"
android:textColor="@color/main_bottom_tv_color" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:src="@drawable/order" />
<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:gravity="center"
android:text="订单"
android:textColor="@color/main_bottom_tv_color" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:src="@drawable/me" />
<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:gravity="center"
android:text="个人"
android:textColor="@color/main_bottom_tv_color" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:src="@drawable/more" />
<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:gravity="center"
android:text="更多"
android:textColor="@color/main_bottom_tv_color" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
布局效果如上图所示:用到五个选择器,分别是四个导航按钮切换不同状态图片的,和一个公用的切换文字颜色的
home.xml:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home_normal" android:state_enabled="true"/>
<item android:drawable="@drawable/home_disabled" android:state_enabled="false"/>
</selector>
home_search_text_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#F0F0F0" />
<!-- 矩形的圆角半径 -->
<corners android:radius="10dp" />
</shape>
另外几个就不写出来了。跟home.xml如出一辙。
关于选择器,相信大家都写烦了。这里说一个插件,很多人用该都用过:SelectorChapek for Android
操作很简单,只需要把文件后缀按照它的规范写就行。
MainActivity的代码:
public class MainActivity extends AppCompatActivity {
//底部导航最外层container
@InjectView(R.id.main_bottom_switcher_container)
LinearLayout mainBottomSwitcherContainer;
//底部导航container中孩子的个数
private int childCount;
private List<Fragment> fragments=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
initFragment();
initMainBottomSwitcher();//初始化底部导航
}
private void initFragment() {
fragments.add(new HomeFragment());
fragments.add(new OrderFragment());
fragments.add(new MeFragment());
fragments.add(new MoreFragment());
onClickListener.onClick(mainBottomSwitcherContainer.getChildAt(0));//默认在首页
}
/**
* 初始化底部导航
*/
private void initMainBottomSwitcher() {
//获取底部container中孩子个数
childCount = mainBottomSwitcherContainer.getChildCount();
for (int i = 0; i < childCount; i++) {//给每个孩子设置点击事件
FrameLayout childAt = (FrameLayout) mainBottomSwitcherContainer.getChildAt(i);
childAt.setOnClickListener(onClickListener);
}
}
private View.OnClickListener onClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
int indexOfChild = mainBottomSwitcherContainer.indexOfChild(view);
changeUi(indexOfChild); //改变底部导航状态
changeFragment(indexOfChild);//切换Fragment
}
};
/**
* 改变点击的index对应控件和它所有孩子的状态 enable=false
* 改变其他控件和它们所有孩子的状态 enable=true
* @param index
*/
private void changeUi(int index) {
for (int i = 0; i < childCount; i++) {
if (index == i) {
setEnable(mainBottomSwitcherContainer.getChildAt(i), false);
} else {
setEnable(mainBottomSwitcherContainer.getChildAt(i), true);
}
}
}
private void changeFragment(int index) {
Fragment fragment = fragments.get(index);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.main_fragment_container,fragment)
.commit();
// .addToBackStack(fragment.getClass().getSimpleName())
}
/**
* 将每个导航按钮中的所有控件状态改变
* 由于我们处理一个通用的代码,那么导航按钮可能会有很多层控件,所以我们需要使用递归
* @param item
* @param b
*/
private void setEnable(View item, boolean b) {
item.setEnabled(b);//解决的是:点击的导航按钮(我们用的是FrameLayout)是否还能点击
if (item instanceof ViewGroup) {
int childCount = ((ViewGroup) item).getChildCount();
for (int i = 0; i < childCount; i++) {
setEnable(((ViewGroup) item).getChildAt(i), b);//解决的是:每个导航按钮的孩子的状态的改变,如图片文字根据enable切换
}
}
}
}
这里面,切换Fragment无关紧要,随便写几个测试即可。
可以看到,我们除了找到最外层的LinearLayout:
//底部导航最外层container
@InjectView(R.id.main_bottom_switcher_container)
LinearLayout mainBottomSwitcherContainer;
其它的控件,连id都没有指定。我们只需要拿到最外层的LinearLayout。并通过getChildCount()拿到导航按钮的个数即可。设置点击事件,在点击事件中,对整个底部导航所有控件(包含其所有孩子)的状态进行统一管理。怎么样,现在你不需要再去通过findViewById去找到导航按钮中的任何控件了。
如果你想在底部导航中加一个功能,只需要复制一个底部导航按钮的布局,改一下它的文字和图片即可。然后为它添加一个Fragment,注意,初始化Fragment的顺序跟布局中的顺序一致即可。
这样,一个通用的底部导航就处理好了,非常简单也很实用。