TabLayout加ViewPager的简单使用

一.TabLayout的基本使用

首先在XML代码中添加ViewPager和TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="com.swpuiot.secondarytradingplatformv20.TabLayoutActivity"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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


</LinearLayout>

然后在Activity中绑定ViewPager和TabLayout

public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private SimpleFragmentPagerAdapter pagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.vp_show2);
        viewPager.setAdapter(pagerAdapter);

        tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.setupWithViewPager(viewPager);
        //用这个方法绑定ViewPager和TabLayout
         for (int i = 0; i < tabLayout.getTabCount(); i++) {
        //为TabLayout的每个Tab都添加自定义View
                  tabLayout.getTabAt(i).setCustomView(pagerAdapter.getTabView(i));
        }

    }
}

创建ViewPager包含的fragment

public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static PageFragment newInstance(int page) {

        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment#"+mPage);
        return view;
    }
}

然后编写PagerAdapter

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    final int PAGE_COUNT = 3;
    private int[] imageResId = {
            R.drawable.ic_action_name,
            R.drawable.menu_clock,
            R.drawable.ic_action_name
    };

    private String tabTitles[] = new String []{"tab1","tab2","tab3"};
    private Context mcontext;
    public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
        super(fm);
        mcontext = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }
    //这个方法是用来返回Tab的名字的，如果要自定义Tab的View，就让它返回null就可以了
    public View getTabView(int position){
        View view = LayoutInflater.from(mcontext).inflate(R.layout.tab_item, null);
        TextView tv= (TextView) view.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) view.findViewById(R.id.imageView);
        img.setImageResource(imageResId[position]);
        return view;
    }
    //这个方法是自己写的，用来加载TabView的视图

}

二.总结

TabLayout可能会出现问题，如果你的TabLayout的根布局是RelativeLayout就会导致TabLayout无法点击，更换成LinearLayout就可以点击了。