Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

转载本专栏文章，请注明出处，尊重原创 。文章博客地址：道龙的博客

现在很多的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文章。

微信公众号图片：