Android UI开发之TabLayou和ViewPager的使用

首先注意因为Tablayout是android.support.design.widget包下面的，所以需要添加依赖，不然会报错。

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

首先惯例，咱们看一下效果图：

主页代码：

public class MainActivity extends AppCompatActivity {
    private List<String> titles;
    private BaseAdapter adapter;
    private ArrayList<Object> pageList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        titles = Arrays.asList(new String[]{"商家商品", "商家信息", "评论"});
        pageList = new ArrayList<>();

        //传数据到第一个fragment
        Bundle bundle = new Bundle();
        bundle.putString("shopData", "我是一个好孩子");

        OneFragment OneFragment = new OneFragment();
        TwoFragment TwoFragment = new TwoFragment();
        ThreeFragment ThreeFragment = new ThreeFragment();

        OneFragment.setArguments(bundle);
        pageList.add(OneFragment);
        pageList.add(TwoFragment);
        pageList.add(ThreeFragment);
        BaseFmAdapter baseFmAdapter = new BaseFmAdapter(getSupportFragmentManager(),pageList,titles);
        viewPager.setAdapter(baseFmAdapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

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

            }

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

            }
        });
    }
}

布局文件如下：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        app:tabSelectedTextColor="#ff00ff"
        app:tabTextColor="#ff0000"
        android:background="#ffffff">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </android.support.v4.view.ViewPager>

</LinearLayout>

自己封装的BaseFmAdapter的代码如下：

package com.example.administrator.bottomdialogdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by wangsuli on 2017/12/12.
 */
public class BaseFmAdapter<T> extends FragmentPagerAdapter {
    public void setList(List<Fragment> list, List<T> titles) {
        this.list = list;
        this.titles = titles;
        notifyDataSetChanged();
    }

    private List<Fragment> list;

    public List<T> getTitles() {
        return titles;
    }

    public void setTitles(List<T> titles) {
        this.titles = titles;
        notifyDataSetChanged();
    }

    private List<T> titles;

    public BaseFmAdapter(FragmentManager fm, List<Fragment> list, List<T> titles) {
        super(fm);
        this.list = list;
        this.titles = titles;
    }


    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return (list == null) ? 0 : list.size();
    }

    //重写这个方法，将设置每个Tab的标题
    @Override
    public CharSequence getPageTitle(int position) {
        T title = titles.get(position);
        if (title instanceof String) {
            return (CharSequence) title;
        }
        return "";
    }
}