Android tablayout + viewpager +Fragment实现 选项卡功能

Android tablayout + viewpager +Fragment实现 选项卡功能

选项卡实现的方法有很多，我们这里选用 tablayout+viewpager+fragment的方法

思路

1、首先我们需要一个展示界面(activity/fragment)
2、我们需要我们的重头戏tablayout、viewpager 来设置我们的布局
3、设置数据
4、将tablayout 和viewpager关联

具体代码实现

1、我们创建一个activity 名为 PeopleOfficeActivity
2、在 PeopleOfficeActivity的布局文件activity_people_office.xml中布局
具体代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:ignore="MissingConstraints"
    tools:context=".ui.peopleOffice.PeopleOfficeActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagers"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tab_layout"/>

    <android.support.design.widget.TabLayout

        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:tabTextColor="@color/black"
        app:tabSelectedTextColor="@color/blue"
        app:layout_constraintBottom_toBottomOf="parent"
        >
    </android.support.design.widget.TabLayout>

</android.support.constraint.ConstraintLayout>

3、设置数据

private List<Fragment> fragments = new ArrayList<>();
    private List<String> tabName = new ArrayList<>(Arrays.asList("首页","我的"));

     PeopleOfficeFragmentHome peopleOfficeFragmentHome = new PeopleOfficeFragmentHome();
        PeopleOfficeFragmentMy peopleOfficeFragmentMy = new PeopleOfficeFragmentMy();
        fragments.add(peopleOfficeFragmentHome);
        fragments.add(peopleOfficeFragmentMy);

4、将tablayout和viewpager 关联

  tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPagers));
        viewPagers.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                Log.e("onPageSelected: ",i+"");
                tabLayout.getTabAt(i).select();

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

PeopleOfficeActivity 的完整代码

public class PeopleOfficeActivity extends AppCompatActivity {
    private ViewPager viewPagers;
    private TabLayout tabLayout;
    private List<Fragment> fragments = new ArrayList<>();
    private List<String> tabName = new ArrayList<>(Arrays.asList("首页","我的"));
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_people_office);
        initView();
        initData();
    }

    private void initData() {
        //设置数据
        for (String s : tabName) {
            tabLayout.addTab(tabLayout.newTab().setText(s));
        }
        PeopleOfficeFragmentHome peopleOfficeFragmentHome = new PeopleOfficeFragmentHome();
        PeopleOfficeFragmentMy peopleOfficeFragmentMy = new PeopleOfficeFragmentMy();
        fragments.add(peopleOfficeFragmentHome);
        fragments.add(peopleOfficeFragmentMy);
        ViewPageAdata viewPageAdata = new ViewPageAdata(getSupportFragmentManager());
        viewPageAdata.setmFragments(fragments);
        viewPagers.setAdapter(viewPageAdata);
//        tabLayout.setupWithViewPager(viewPagers);
        //关联tablayout 和viewpager
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPagers));
        viewPagers.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                Log.e("onPageSelected: ",i+"");
                tabLayout.getTabAt(i).select();

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });


    }

    private void initView() {
        viewPagers = (ViewPager) findViewById(R.id.viewPagers);
        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    }
    class ViewPageAdata extends FragmentPagerAdapter{


        List<Fragment> mFragments;


        public ViewPageAdata(FragmentManager fm) {
            super(fm);
        }
        public void setmFragments(List<Fragment> mFragments) {
            this.mFragments = mFragments;
        }

        @Override
        public Fragment getItem(int i) {
            return mFragments.get(i);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }
    }
}

备注

涉及到的两个fragment ：PeopleOfficeFragmentHome和
PeopleOfficeFragmentMy 为最简单的fragment 在这里就不贴代码了。