手把手教你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);
      }
}