Android开发（1）：使用TabLayout+Fragment实现底部栏切换功能

Github地址：美食分享平台，欢迎star和fork

思路

首先要先知道Fragment的基本使用方法，这里可以参考郭霖的《Android第一行代码》第二版的第四章。如果要实现的是四栏（首页、商城、消息、我），那么需要文件如下

• 4个碎片xml文件+主xml文件+Tab自制xml文件，共6个xml文件
• 4个Fragment文件
• 1个主Activity文件和一个工具类DataGenerator文件。
• 8张小图标，用于tab上。点击前和点击后各4张，也可只有4上，修改文件DataGenerator中的drawble名。

最终效果如下:

第一步：整体页面xml

首先要理解Fragment是要插入xml中的FrameLayout的，因此可以新建一个button_tab.xml，并将这个设置为启动xml（在下文的BottomTab文件中设置）。
button_tab.xml如下：

第二步：碎片，除底部栏外上面的主页

其中4个Fragment文件继承自Fragment，然后分别inflate上面的4个xml文件，形式如下：
（将fragment_home_page替换成对应的xml文件名即可）
fragment_home_page.xml:

HomePageFragment:

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_home_page, container, false);
        return view;
    }
}

这样子就生成了四个xml文件和四个Fragment文件了。

自制的底部栏Tab

因为TabLayout自带的tab栏很小，放图片和文字都不太好看，适配也很难做，就可以自己实现一个Tab栏目：

开始编写主Activity:ButtomTab

在开始之前，先实现DataGrenerate工具类，来帮助ButtomTab更好的实现。
这个工具类就是先将碎片和碎片中的元素先准备好（其中getTabView函数是用来自定义Tab的）

public class DataGenerator {

    public static final int []mTabRes = new int[]{R.drawable.outline_fastfood_black_18,R.drawable.outline_shopping_cart_black_18,R.drawable.outline_textsms_black_18,R.drawable.outline_person_black_18};
    public static final int []mTabResPressed = new int[]{R.drawable.baseline_fastfood_black_18,R.drawable.baseline_shopping_cart_black_18,R.drawable.baseline_textsms_black_18,R.drawable.baseline_person_black_18};
    public static final String []mTabTitle = new String[]{"首页","商城","消息","我"};

    public static Fragment[] getFragments(){
        Fragment fragments[] = new Fragment[4];
        fragments[0] = new HomePageFragment();
        fragments[1] = new ShopPageFragment();
        fragments[2] = new MessagePageFragment();
        fragments[3] = new PersonPageFragment();
        return fragments;
    }

// 获取了position的视图view，并初始化里面的元素，用于init
    public static View getTabView(Context context, int position){
        View view = LayoutInflater.from(context).inflate(R.layout.fragment_tab,null);
        ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
        tabIcon.setImageResource(DataGenerator.mTabRes[position]);
        TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
        tabText.setText(mTabTitle[position]);
        return view;
    }
}

接着就是ButtomTab文件了：

public class ButtomTab extends AppCompatActivity {
    private TabLayout tab_layout;
    private Fragment[] framensts;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.buttom_tab);

        framensts = DataGenerator.getFragments();
        initView();
    }

    private void initView() {
        tab_layout = (TabLayout) findViewById(R.id.bottom_tab_layout);


        //设置监听器
        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                onTabItemSelected(tab.getPosition());

                // Tab 选中之后，改变各个Tab的状态
                for (int i = 0; i < tab_layout.getTabCount(); i++) {
                    View view = tab_layout.getTabAt(i).getCustomView();
                    ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
                    TextView text = (TextView) view.findViewById(R.id.tab_content_text);

                    if (i == tab.getPosition()) { // 选中状态，修改字体颜色和图片，背景未实现
//                        view.setBackgroundColor(Color.parseColor("#a9a9a9"));
                        icon.setImageResource(DataGenerator.mTabResPressed[i]);
                        text.setTextColor(getResources().getColor(android.R.color.black));
                    } else {// 未选中状态
//                        view.setBackgroundColor(Color.parseColor("#FFFFFF"));
                        icon.setImageResource(DataGenerator.mTabRes[i]);
                        text.setTextColor(getResources().getColor(android.R.color.darker_gray));
                    }
                }
            }


            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        // 提供自定义的布局添加Tab，注意此处的加载页面需要在设置Listener之后，不然会导致第一次点击事件失效
        for(int i=0;i<4;i++){
            tab_layout.addTab(tab_layout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
        }

        //默认进入首页（需放在加载页面之后）
        tab_layout.getTabAt(0).select();
    }

    private void onTabItemSelected(int position){
        Fragment frag = null;
        switch (position){
            case 0:
                frag = framensts[0];
                break;
            case 1:
                frag = framensts[1];
                break;

            case 2:
                frag = framensts[2];
                break;
            case 3:
                frag = framensts[3];
                break;
        }
        //替换fragment
        if(frag!=null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.home_container,frag).commit();
        }
    }
}

本文的主体代码和架构来源于Android 底部导航栏 (底部 Tab) 最佳实践｜掘金技术征文，特此感谢。