TabLayout

一.TabLayout介绍

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

TabLayout可以做我们经常见到的那些头部的，导航栏，点击导航栏的每一项可以切换不同的视图

2.TabLayout的使用

我们通过Fragment+ViewPager+TabLayout使其进行联动

TabLayout 是属于 com.android.support:design 包的控件，所以需要依赖该包

implementation 'com.android.support:design:28.0.0'

在添加完依赖之后就可以在布局中直接引用了

<?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=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tbl"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:tabSelectedTextColor="@color/colorAccent">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10">

    </android.support.v4.view.ViewPager>
</LinearLayout>

Activity中的代码

public class MainActivity extends AppCompatActivity {
    private TabLayout tbl;
    private ViewPager vp;
    private List<Fragment> fragments = new ArrayList<>();
    private List<String> titles = new ArrayList<>();
    private MyAdapter myAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDatas();
        initViews();
    }

    private void initDatas() {
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        fragments.add(new ThreeFragment());

        titles.add("标题1");
        titles.add("标题2");
        titles.add("标题3");
    }

    private void initViews() {

        tbl = (TabLayout) findViewById(R.id.tbl);
        vp = (ViewPager) findViewById(R.id.vp);
        myAdapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);

        vp.setAdapter(myAdapter);

        tbl.setupWithViewPager(vp);//绑定


    }
}

在这里 需要将TabLayout与ViewPager相联结调用TabLayout的setupWithViewPager方法，参数为一个ViewPager

ViewPager需要一个适配器

public class MyAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    private List<String> titles;

    public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

放置了三个普通的Fragment作展示
这里只展示其中一个

public class OneFragment extends Fragment {


    public OneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.OneFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment1" />

</FrameLayout>

最后进行效果展示

要开心加油