手把手教你TabLayout、ViewPager、Fragment实现顶部导航

第一步：编写主布局文件

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.androidtalent.MainActivity">


    <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@color/colorPrimaryDark"
            app:tabMode="fixed"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

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

</LinearLayout>

注意要把垂直设置好，因为是linearLayout布局，漏掉了就不能滑动了

Fragment的布局文件，3个一样的：layout1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    <TextView
            android:text="this is tab1111"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</LinearLayout>

3个Fragment的文件，3个也是几乎一样的：
注意，这里要导入的是import android.support.v4.app.Fragment;的fragment，而不是android.app.Fragment.

因为ViewPager是import android.support.v4.app.Fragment

package com.androidtalent.viewpagedemotwo;


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;

/**
 * Created by androidtalent on 2016/8/10.
 */
public class Tab1 extends Fragment {

      @Nullable
      @Override
      public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

            View view = inflater.inflate(R.layout.layout1, null);

            return view;
      }
}

MainActivity.java

package com.androidtalent.viewpagedemotwo;


import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

      private TabLayout tabs;
      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
            tabs.setupWithViewPager(viewPager);
            //使用ViewPager的适配器
            tabs.setTabsFromPagerAdapter(adapter);
      }
      
      
      //初始化V
      private void initView() {

            tabs = (TabLayout) findViewById(R.id.tabs);
            viewPager = (ViewPager) findViewById(R.id.viewPager);
            mTitle.add("tab1");
            mTitle.add("tab2");
            mTitle.add("tab3");

            mFragment.add(new Tab1());
            mFragment.add(new Tab2());
            mFragment.add(new Tab3());

      }
}

MyAdapter.java
要写上最后一个方法，为tagLayout配置上标题的

package com.androidtalent.viewpagedemotwo;

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

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