转载本专栏文章，请注明出处，尊重原创 。文章博客地址：道龙的博客
现在很多的App要么顶部带有tab，要么就底部带有tab。用户通过点击tab从而切换不同的页面（大部分情况时去切换fragment）。本篇博客就通过简单的动态添加tab方式实现这个功能(当然最好的方式还是自定义控件来切换页面，就像微信那样)。
在开始之前，让我们对原型看看效果图：
因为最终效果是动态添加底部tab，我这里只是给出了两个tab去切换对应的fragment。如果想继续添加更多，直接在对应代码处添加即可。在写到对应代码的时候，我也会提到。
那么就开始这个Demo的开发吧~
一、ViewPage+Fragment先实现基本的切换功能
主活动布局代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.itydl.ydltabdemo.MainActivity"> <android.support.v4.view.ViewPager
android:id="@+id/viewpagge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
然后创建两个Fragment，只需要创建完毕即可，不需要给其设置华丽的布局。代码太简单了，读者朋友可下载最后的Demo查看。
主活动中的代码完成切换功能，简单的代码谢了出来：
public class MainActivity extends AppCompatActivity {
private ViewPager mMViewPager;
List<Fragment> mFragments = new ArrayList<Fragment>() ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragments.add(new OneFragment());
mFragments.add(new TwoFragment());
mMViewPager = (ViewPager) findViewById(R.id.viewpagge);
mMViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager()));
}
class MyFragmentAdapter extends FragmentPagerAdapter{
public MyFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
}
}
运行程序，发现完成了最基本的滑动切换Fragment的功能：
接下来，我们需要为之添加Tab了，添加Tab很简单，这里是教您怎么动态添加Tab。
二、给活动添加底部tab容器（我选择了LinearLayout，其他的父容器也可以的）。
主活动中的布局文件添加如下代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.itydl.ydltabdemo.MainActivity"> <TextView
android:id="@+id/tvtitle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#56cced"
android:gravity="center"
android:text="标题"
android:textColor="#fff"
android:textSize="22sp"/> <android.support.v4.view.ViewPager
android:id="@+id/viewpagge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/> <!--底部tab的容器--> <LinearLayout
android:id="@+id/llbootom_container"
android:background="#25cb91"
android:layout_width="match_parent"
android:layout_height="52dp"> </LinearLayout> </LinearLayout>
我们添加了标题栏，和底部容器。
三、创建ToolBar工具类，添加底部Tab，并实现均分
添加tab的话，这里又有许多手段来完成它。我觉得新建一个类，就像自定义控件类一样的去使用这个工具类来添加tab，用起来更方便，这里读者可参考自觉地可行的方案。
新建ToolBar，里面添加这样一个方法：
public class ToolBar {
public void addBottomTab(LinearLayout container){
View childView = View.inflate(container.getContext(), R.layout.bottom_tab_textview, null);
container.addView(childView);
}
}
代码也很简单，没必要赘述太多。打气筒填充的布局是一个TextView，看看代码：
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="@drawable/icon_meassage_normal"
android:textSize="18sp"
android:text="会话"
android:gravity="center"
android:padding="4dp"
android:layout_marginTop="4dp"
android:orientation="vertical"> </TextView>
这个时候再来运行Demo瞧瞧：
我们可以清晰地看到，添加了一个底部tab。说明通过这种手段是可行的。那么高歌猛进，继续添加底部Tab，真正的实现动态添加吧，我们本来目的就是要动态添加Tab的嘛：
ToolBar的方法修改为下面情况：
public void addBottomTab(LinearLayout container, String[] bottomTitleArr, int[] bottomPic){
for(int i = 0 ; i<bottomTitleArr.length;i++){
TextView childView = (TextView) View.inflate(container.getContext(), R.layout.bottom_tab_textview, null);
//给TextView添加文本
childView.setText(bottomTitleArr[i]);
//修改对应位置的图片.参数代表位于TextView的哪个方位。仅仅位于上方
childView.setCompoundDrawablesWithIntrinsicBounds(0, bottomPic[i], 0, 0);
//把两个底部tab平分秋色.使用paramas对象
int w = 0;
int h = LinearLayout.LayoutParams.WRAP_CONTENT;
//创建params对象，并绘制具体的控件的宽高
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(w,h);
//weight设置为1，才是真正的均分父容器宽度
params.weight = 1;
container.addView(childView,params);
}
}
显然，我们需要传入多少个tab名称，多少个对应的tab图标。
主活动自己定义一下显示的图片和文本就可以了，图片我自定义了选择器，注意选择器看一下代码：
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/icon_selfinfo_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/icon_selfinfo_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/icon_selfinfo_normal" />
</selector>
注意我定义了selected属性，为什么要定义它，待会你就明白原因了。
运行效果：
可参看图片，已经均分孩子控件。
四、滑动viewPage改变Tab图标颜色，改变页面标题
对于改变图标颜色，我们还需要在toolBar里面添加一个切换图标颜色的方法：
/**进入某项fragment，对之改变Tab图标的颜色.在ViewPage切换到一项fragment的时候调用*/
public void changeColor(int position){
//还原所有颜色
for(TextView textView : mTextViews){
//在这里就知道我为什么定义状态选择器的时候，使用selected属性了
textView.setSelected(false);
} //让当前fragment位置的tab改变颜色
mTextViews.get(position).setSelected(true);
}
颜色的改变，以及标题的设置只需要加入滑动监听事件即可。
@Override
public void onPageSelected(int position) {
//某项ViewPage选中的时候调用。在这里顺便改变底部Tab的颜色
mMToolBar.changeColor(position);
//同时修改对应fragment的标题
mMTextView.setText(bottomTitleArr[position]);
}
五、完成点击切换页面、完成项目
底部控件模块都在toolBar类里面维护的，因而点击事件只能在这里面设置。而如果我想在MainActivity里面控制按钮点击切换页面，我就需要知道tooBar里点击按钮的位置，同时点击立即知道这个位置。根据这个位置再去切换对应的页面就好了。不同模块之间的通信，又可以有多重手段来操作完成，我这里选择了监听回调。
/***使用接口传递控件点击的位置*/ //1、定义接口和接口回调的方法
public interface OnToolBarChangeListener{
void onToolBarChange(int position);
} //2、创建接口变量，作为接口对象
OnToolBarChangeListener mOnToolBarChangeListener;childView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//3、在需要通过接口回调传值的地方调用一次接口回调方法
mOnToolBarChangeListener.onToolBarChange(finalI);
}
});//4、暴露一个公共方法，或者构造方法。参数是接口变量（对象）public void setOnToolBarChangeListener(OnToolBarChangeListener onToolBarChangeListener) { mOnToolBarChangeListener = onToolBarChangeListener;}
活动中只需要设置该监听器，监听toobar里面的点击事件位置就好了。
mMToolBar.setOnToolBarChangeListener(new ToolBar.OnToolBarChangeListener() {
@Override
public void onToolBarChange(int position) {
//切换对应的fragment
mMViewPager.setCurrentItem(position);
}
});
运行最终的结果：
我们可以看到，效果图跟最初遇开发的效果功能一模一样了~到此这个demo也讲解完毕了。
那么说好的动态添加呢？怎么就两个Tab？？这个建议您下载demo试试，只需要修改两行代码，就是提供底部数据源的地方的两个字符串，添加对应的文字、图片（当然要额外创建多余的fragment）。就能实现多个Tab切换了，动态添加，也就解释清楚了~
附源码在文章最后，读者可自行下载。
喜欢我的朋友可以关注我，不定期更新类似的文章。一起交流讨论问题~
源码下载链接：源码下载
也可以打开微信搜索公众号 Android程序员开发指南 或者手机扫描下方二维码 在公众号阅读更多Android文章。
微信公众号图片：
