Tablayout+Viewpager的使用

      我们通常会使用Tablayout+Viewpager来实现非常华丽的效果，既可以滑动也可以点击进行不同的界面跳转，下面是效果图：

  

代码实现：这里我使用的是Android studio开发

一、使用tablayout必须要导库:

1、选中项目右键-----opModuleXXX

2、会弹出下面框按步骤操作

3、导入com.android.support:design

好了，到这就导库完成下面看实现代码：

二、tablayout+Viewpager的实现：

1、activity_main.xml布局：

<?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">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#000">        <android.support.design.widget.TabLayout            android:id="@+id/tab"            app:tabSelectedTextColor="#00ff00"            app:tabTextColor="@android:color/holo_red_dark"            android:layout_width="match_parent"            android:layout_height="wrap_content"            />    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0px"        android:layout_weight="1"        android:background="@android:color/white" /></LinearLayout>

在android.support.design.widget.TabLayout中有2个属性其中

app:tabSelectedTextColor="#00ff00"代表的意识是选中标题的文本颜色
app:tabTextColor="@android:color/holo_red_dark"代表是文本颜色（也就是没有选中的文本颜色，这里我设置的红色）
设置上面2个属性的效果如图（下面下滑线颜色会在代码中设置）：
2、分别创建Fragment1，Fragment2，Fragment3、咳咳这里我就使用小学生文化123来分别
Fragment1.java：
public class Fragment1 extends Fragment {@Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.activity_frament1,null);        return view;    }}
没有过多的操作，这里就是找到了Fragment1的布局，Fragment2和Fragment3同样也是.
Fragment2.java：
public class Fragment2 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.activity_frament2,null);        return view;    }}
Fragment3.java：
    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.activity_frament3,null);        return view;    }}


上面3个Fragment分别对应了3个布局activity_fragment1，activity_fragment2，activity_fragment3，这里也是123来分别
activity_fragment1.xml布局：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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=".Fragment1">    <TextView xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="电影"        android:gravity="center" /></RelativeLayout>
activity_fragment2.xml布局：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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.wdl.tablayout.tablayoutfragment.MainActivity">    <TextView xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="电视剧"        android:gravity="center" /></RelativeLayout>



activity_fragment3.xml布局：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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=".Fragment1">    <TextView xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="好莱坞"        android:gravity="center" /></RelativeLayout>
上面的Fragment都已经编写好下面进行MainActivity
3、编写MainActivity.java:
public class MainActivity extends FragmentActivity {    private TabLayout tabLayout;    private ViewPager viewPager;    private ArrayList<Fragment> fragmentsList = new ArrayList<>();    //添加tablayout的内容    private ArrayList<String> title = new ArrayList<>();    private Fragment1 fragment1;    private Fragment2 fragment2;    private Fragment3 fragment3;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        date();    }    private void date() {        //为tablayout添加内容        title.add("影视");        title.add("电视剧");        title.add("好莱坞");        tabLayout = (TabLayout) findViewById(R.id.tab);        viewPager = (ViewPager) findViewById(R.id.viewpager);        //tablayout中的标题下划线的颜色        tabLayout.setSelectedTabIndicatorColor((Color.parseColor("#71CDF5")));        fragment1 = new Fragment1();        fragment2 = new Fragment2();        fragment3 =new Fragment3();        fragmentsList.add(fragment1);        fragmentsList.add(fragment2);        fragmentsList.add(fragment3);        FragmentAdapter myPagerAdapter = new FragmentAdapter(getSupportFragmentManager(), fragmentsList, title);        tabLayout.setTabsFromPagerAdapter(myPagerAdapter);        viewPager.setAdapter(myPagerAdapter);        tabLayout.setupWithViewPager(viewPager);    }}
4、创建适配器FragmentAdapter：
public class FragmentAdapter extends FragmentPagerAdapter {    ArrayList<Fragment> list;    List<String> title;    public FragmentAdapter(FragmentManager fm,ArrayList<Fragment> fragmentsList,ArrayList<String> titles) {        super(fm);        this.list = fragmentsList;        this.title = titles;    }    @Override    public Fragment getItem(int position) {        return list.get(position);    }    @Override    public int getCount() {        return list.size();    }    //tablayout的title标题内容设置    @Override    public CharSequence getPageTitle(int position)    {        return title.get(position);    }    @Override    public int getItemPosition(Object object) {        return super.getItemPosition(object);    }}