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属性，为什么要定义它，待会你就明白原因了。

运行效果：

四、完成点击切换frgment、滑动viewPage改变Tab，完成项目

天太晚了，明天继续更新完成剩下的功能~

亲爱的朋友可以提前关注我博客，喜欢我就留下脚印，共同交流进步。