BottomNavigation的实现
今年早些时候，Google在安卓自家的看图应用「照片」中加入了底部导航条，这在当时引起不小的震动(learn more)；底部导航(BottomNavigation)也就是国内很多应用比如微信，包括iOS中广泛采用的那种那种底部tab。大家都说Google是两面派，因为Google从前一直说底部tab不好，不符合material design，那时候大家都在跟Google一样执迷于左侧的抽屉Navigation Drawer，Google这一举动简直是打了自己的脸。真有意思啊。。
后来Bottom Navigation被写进文档了，渐渐地没人争了，大家也发现底栏确实挺好用的，毕竟抽屉还需要拉开才能用，底栏只要点一下就直接跳转了(虽然多了个大下巴)。越来越多的应用去掉抽屉，采用底栏了。国内比较Material的应用，比如知乎，酷安网这种一直是紧随Material步伐的，先后都去掉了抽屉，采用了底栏，当时知乎安卓客户端刚改版时也被一群安卓粉/谷歌粉狂喷「叛徒」，因为他们觉得这跟iOS一样low，还是忘记不了KitKat经典的抽屉。场面非常有趣。
其实当时我就懂得，不是说采用了NavigationDrawer就是Material Design，不是说采用了BottomNavigation就是投奔iOS的叛徒，滥用Drawer/Card/Fab的应用数不胜数，设计的本质是要为用户服务,不要为了Material而Material，不要觉得用了xx控件就符合安卓规范了。Bilibili也是风格比较Material的应用，它们就一直保留着NavigationDrawer，因为他们的应用确实很适合Drawer。
说了这么多废话，赶紧写点有用的。印尼钱包里面要用到这个，所以又想起来，十月初我按照谷歌的规范写了一个BottomNavigation，名字叫SimpleBottomNavigation，是这样子的：
点击的时候会有放大，原始的尺寸，放大的尺寸，padding，ripple效果等等都是按照文档中来的。内部实现的话我当时想法比较简单粗暴：在布局文件中一口气定义了5个底栏的tab,下面是其中一个：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/imageView1"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@android:drawable/ic_menu_camera" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1"
android:textSize="12sp" />
</LinearLayout>
但我默认只让前两个显示，后三个的visibility都是gone，所以我只支持2~5个tab（考虑到5个已经比较拥挤了），如果传了2个以上，再控制他们的visibility为visible。每个tab的layout_gravity都是1，这样就保证了无论设置几个tab，他们都能均分底栏的宽度。
在代码中，用了这样的方法：
switch (size) {
case 2:
mTextView1.setText(tabTxtArray.get(0));
mTextView2.setText(tabTxtArray.get(1));
mImageView1.setImageResource(tabDrawableArray.get(0));
mImageView2.setImageResource(tabDrawableArray.get(1));
mTab1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnTabSelectedListener.onTabSelected(0);
// public void setPadding(int left, int top, int right, int bottom) {
mTab1.setPadding(dp12, dp6, dp12, dp10);
mTextView1.setTextSize(14);
mTab2.setPadding(dp12, dp8, dp12, dp10);
mTextView2.setTextSize(12);
}
});
mTab2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnTabSelectedListener.onTabSelected(1);
mTab2.setPadding(dp12, dp6, dp12, dp10);
mTextView2.setTextSize(14);
mTab1.setPadding(dp12, dp8, dp12, dp10);
mTextView1.setTextSize(12);
}
});
break;
我根据传进来的ArrayList的size来switch，然后控制每一个tab的点击事件，因为涉及到要控制图标和文字的大小，我想了一个办法，每点一个tab，就用viewhodler的setPadding方法，把这个tab的文字和图片放大，同时其他tab的文字和图片都缩小。我总觉的这个方法有点蠢。因为后面我写了大量重复代码，比如：
mTab5.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnTabSelectedListener.onTabSelected(4);
mTab1.setPadding(dp12, dp8, dp12, dp10);
mTextView1.setTextSize(12);
mTab2.setPadding(dp12, dp8, dp12, dp10);
mTextView2.setTextSize(12);
mTab3.setPadding(dp12, dp8, dp12, dp10);
mTextView3.setTextSize(12);
mTab4.setPadding(dp12, dp8, dp12, dp10);
mTextView4.setTextSize(12);
mTab5.setPadding(dp12, dp6, dp12, dp10);
mTextView5.setTextSize(14);
}
});
break;
同举说他看到这个人的代码比较简洁：MainNavigateTabBar，
我阅读了一下，发现它的布局非常简单，只包含了一个"cell"，一个图标和一个文字。怎么根据fragment的个数来显示呢？使用了ViewGroup的addView方法：
addView(view, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, 1.0F));
当然，他采用的是LinearLayout，所以它的LayoutParams是按照这样构造参数设置的：
public LayoutParams(int width, int height, float weight) {
super(width, height);
this.weight = weight;
}
嗯。我也可以这样改进。至于点击放大缩小的效果，也可以通过一定的手段来减少胶水代码，比如设置一个list，把没点击到的所有text和image统一setPadding。
另，今天是我妈妈生日。还有黄珊生日。。生日快乐。
-DEC 26
