啥也別說先看效果圖,因為我不會弄動態圖，其實這個界面是可以滑動的，也可以點下方的Tab進行切換

因為TabLayout和ViewPager分別屬于design包和support包，所以我們得在build.gradle里添加：
compile 'com.android.support:support-v4:24.1.1'compile 'com.android.support:design:24.1.1'
如果出現this support library should not use a different version than the compileSdkVersion的問題，
是因為添加的包的版本得和compileSdkVersion版本一致，手動改一下就好了
 
首先在activity_main.xml上
<?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"    這里必須設置為垂直，否則ViewPager不能滑動
    tools:context="com.example.administrator.tab_viewpager.MainActivity">    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:scrollbars="none"        android:id="@+id/viewPager">    </android.support.v4.view.ViewPager>    <android.support.design.widget.TabLayout        android:layout_width="match_parent"        android:layout_height="50dp"        app:tabGravity="fill"        android:id="@+id/tabLayout"
	app:tabIndicatorHeight="0dp"    是為了不顯示Tab底部的橫線
        app:tabMode="fixed"      是為了讓Tab底部不可滑動
        app:tabSelectedTextColor="#ff4081"     設置選中后的字體顏色
        app:tabTextColor="#000">      設置字體顏色
    </android.support.design.widget.TabLayout></LinearLayout>
 
接著創建3個fragment1.xml,fragment2.xml，fragment3.xml，除了字3個xml是一樣的，這里只展示其中一個
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:gravity="center"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#f0f0ff">    <ImageView        android:src="@mipmap/ic_launcher"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/>    <TextView        android:text="這是話題"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></LinearLayout>
現在所有布局文件都準備好了
 
接著創建3個Fragment1,Fragment2,Fragment3 java文件，同樣這里只展示一個，名字上的差別自己改
import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Fragment1 extends Fragment {    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,                             @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment1, null);        return view;
	//@Nullable表示用來標注給定的參數或返回值可以為null（其實我也不懂，就這樣用吧）
    }}
 
接著創建MyAdapter java文件
import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentManager;import java.util.List;
 
public class MyAdapter extends FragmentPagerAdapter {    PRivate List<String> title;    private List<Fragment> views;    public MyAdapter(FragmentManager fm, List<String> title, List<Fragment> views) {        super(fm);        this.title = title;        this.views = views;    }    @Override    public Fragment getItem(int position) {        return views.get(position);    }    @Override    public int getCount() {        return views.size();    }    //配置標題的方法    @Override    public CharSequence getPageTitle(int position) {        return title.get(position);    }}
最后MainActivity
import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private TabLayout tabLayout;    private ViewPager viewPager;    private List<String> mTitle = new ArrayList<String>();    private List<Fragment> mFragment = new ArrayList<Fragment>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
 
        //初始化        initView();        MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), mTitle, mFragment);        viewPager.setAdapter(adapter);        //為TabLayout設置ViewPager        tabLayout.setupWithViewPager(viewPager);    }    //初始化界面下面的3個Tab
    private void initView() {        tabLayout = (TabLayout) findViewById(R.id.tabLayout);        viewPager = (ViewPager) findViewById(R.id.viewPager);        mTitle.add("話題");        mTitle.add("主頁");        mTitle.add("個人");        mFragment.add(new Fragment1());        mFragment.add(new Fragment2());        mFragment.add(new Fragment3());    }}
全部完成啦！
 
PS:該文章只是本人自個寫寫供小白學習使用，源文章出處http://www.cnblogs.com/share2015/p/5271622.html
有任何關于本文章的疑問可以發QQ郵箱和我學習探討lijiahongssg@qq.com