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);
    }
}