TabLayout+ViewPager实现滑动页面切换

哈哈哈，你好啊！话不多说开始干吧

在实现滑动页面之前我们必须要去github下载我们的TabLayout包

地址

compile 'com.android.support:design:24.2.0'

然后开始构思：

1.创建一个布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xiaohou.demo.MainActivity">
    <!--设置标题栏-->
    <include layout="@layout/item_title">

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

</LinearLayout>

2.找到相应控件

 viewPager = (ViewPager) findViewById(R.id.view_page);
 tabLayout = (TabLayout) findViewById(R.id.tablelayout);

3.开始我们的Fragem的创建先创建一个类继承Framgment

package com.xiaohou.fragment;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by rimi on 17/3/3.
 */

public class FragmentActvity extends Fragment {
    private final String srtTitle;
    private final String text;
    private TextView textView;
    private Context mcontext;
    public String getsrtTitle(){
        return srtTitle;
    }
    public String gettext(){
        return text;
    }
    //创建构造方法初始化数据
    public FragmentActvity(String srtTitle,String text){
        super();
        this.srtTitle = srtTitle;
        this.text = text;
    }
    //拿到布局
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mcontext = getActivity();
    }

    @Nullable
    //设置布局内容
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        textView = new TextView(mcontext);
        textView.setHintTextColor(Color.BLUE);
        textView.setGravity(Gravity.CENTER_HORIZONTAL);
        textView.setTextSize(20);
        return textView;
    }
    //绑定数据

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        textView.setText(text);
    }
}

4.来到MainAcivity创建一个list把我们刚刚创建的FragmentActivity放进去

List<FragmentActvity> list; list = new ArrayList<>();
        for (int i = 0;i<4;i++){
            list.add(new FragmentActvity("title"+i,"context"+i));
        }

5.创建ViewPage适配器先创建一个类继承FragmentPagerAdapter

package com.xiaohou.viewpage;

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

import com.xiaohou.fragment.FragmentActvity;

import java.util.List;

/**
 * Created by rimi on 17/3/3.
 */

public class ViewPageDemo extends FragmentPagerAdapter{

    private final List<FragmentActvity> list;

    public ViewPageDemo(FragmentManager fm, List<FragmentActvity> list) {
        super(fm);
        this.list = list;

    }


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

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position).getsrtTitle();
    }
}

//在mainactivity中创建framentViewPage
        pagerAdapter = new ViewPageDemo(getSupportFragmentManager(),list);//这里传入两个参数一个是管理器一个是刚刚我们加入list的viewpager

（一定要记住这里的管理器一定不要写错了）
        viewPager.setAdapter(pagerAdapter);

6.上面五步写完后最重要一不来了来到我们的activity_main.xml添加我们的TabLayout

<android.support.design.widget.TabLayout
        android:id="@+id/tablelayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorPrimaryDark"//设置背景
        app:tabIndicatorColor="@color/colorAccent"//设置下划线颜色（tab指示符颜色）
        app:tabSelectedTextColor="@color/colorAccent"//设置选中颜色
        app:tabTextColor="#FFFFFF"
        ></android.support.design.widget.TabLayout>

7.关联ViewPage

tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

下面是demo的所有class和xml（命名不是很准确就将就看哈嘛）

好了大功告成来预览下