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就可以点击了。