TabLayout与ViewPager

      啥也别说先看效果图,因为我不会弄动态图，其实这个界面是可以滑动的，也可以点下方的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