Fragment+Viewpager+Tablayout组合实现底部标签栏

最新推荐文章于 2024-07-26 21:24:56 发布

一个还没工作的研究僧

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量231

点赞数

文章标签： android tablayout

本文链接：https://blog.csdn.net/qq_35644307/article/details/83818841

版权

话不多说，先上图

前两篇文章都提到了fragment和viewpager，那我就简要地介绍下Tablayout吧

Tablayout

继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。

实现步骤

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Main2Activity">
    <FrameLayout
        android:id="@+id/home_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        
    </FrameLayout>
    
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout3"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@android:color/holo_blue_dark"
        app:tabTextColor="@android:color/darker_gray"
        >
    </android.support.design.widget.TabLayout>
</LinearLayout>

2.Main2Activity.java

public class Main2Activity extends AppCompatActivity implements BlankFragment.selectListener {
    private static final String TAG = "Main2Activity";
    private TabLayout mTabLayoutm;
    private List<Fragment> mListm = new ArrayList<>();
    //mTempFragment是用来记录当前fragment
    private Fragment mTempFragment;
    //image 和 image2是选择与未选中的图片集合
    private int[] image = {R.drawable.home,R.drawable.zhibo_select,R.drawable.me};
    private int[] image2 = {R.drawable.home_unselect,R.drawable.zhibo_unselect,R.drawable.me_unselect};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        mTabLayoutm = findViewById(R.id.tablayout3);

        Fragment fragment1 = new BlankFragment();
        Fragment fragment2 = new BlankFragment1();
        Fragment fragment3 = new BlankFragment2();
        mListm.add(fragment1);
        mListm.add(fragment2);
        mListm.add(fragment3);
        mTempFragment = mListm.get(0);

        //replace方式载入fragment
        getSupportFragmentManager().beginTransaction().replace(R.id.home_container,mListm.get(0))
                 .setCustomAnimations(
                R.anim.slide_right_in,
                R.anim.slide_left_out).commit();

        //设置监听事件
        mTabLayoutm.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //根据标签栏替换fragment
                switchFragment(mListm.get(tab.getPosition()));
                //设置标签栏的选中与未选中
                for(int i=0;i<mTabLayoutm.getTabCount();i++){
                    if(i==tab.getPosition()){
                        mTabLayoutm.getTabAt(i).setIcon(image[i]);
                    }else{
                        mTabLayoutm.getTabAt(i).setIcon(image2[i]);
                    }
                }
            }

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

            }

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

            }
        });
        
        //设置每个标签的文字和图标
        mTabLayoutm.setTabMode(TabLayout.MODE_FIXED);
        mTabLayoutm.addTab(mTabLayoutm.newTab().setText("首页").setIcon(image2[0]));
        mTabLayoutm.addTab(mTabLayoutm.newTab().setText("直播").setIcon(image2[1]));
        mTabLayoutm.addTab(mTabLayoutm.newTab().setText("我的").setIcon(image2[2]));
    }

    private void switchFragment(Fragment fragment) {
        if(fragment != mTempFragment){
            //当每个fragment对象都创建了，切换时就不会产生新的对象
            if(fragment.isAdded()){
                getSupportFragmentManager().beginTransaction().setCustomAnimations(
                        R.anim.slide_right_in,
                        R.anim.slide_left_out).hide(mTempFragment).
                        show(fragment).addToBackStack(null).commit();
            }else{
                getSupportFragmentManager().beginTransaction().setCustomAnimations(
                        R.anim.slide_right_in,
                        R.anim.slide_left_out).hide(mTempFragment).
                        add(R.id.home_container,fragment).commit();
            }
            mTempFragment = fragment;
        }
    }

}

这里有个小坑：

addTab必须在setOnTabSelectedListener之后调用，否则setOnTabSelectedListener不会回调，这样会造成初始化时，图标没有默认选中。