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名。

最终效果如下:
Android开发(1):使用TabLayout+Fragment实现底部栏切换功能_第1张图片

第一步:整体页面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) 最佳实践|掘金技术征文,特此感谢。

你可能感兴趣的:(Android)