Android开发使用TabLayout+ViewPager+Fragment实现导航栏滑动切换不同内容

• 我对这三个组件的理解我对这三个组件的理解
  最终要实现的效果是可以通过屏幕的左右滑动，切换导航栏，同时也能点击导航栏切换不同的页面。截图：
  

我的理解：Tablayout组件就是顶部导航栏的部分，ViewPager是页面中除了导航栏以外的部分，即展示内容的部分，而Fragment(碎片)就是来处理这部分数据填充的工具，换言之就是用fragment来设置每个标签下显示的内容是什么。

• 实现过程
• 看一下文件目录吧：主要包含的文件就是三个java类和两个.xml文件
  1.添加依赖库
  因为要使用这个TabLayout，需要在build.gradle文件的dependencies中加入compile 'com.android.support:design:27.1.1’这一行。这个版本号根据你的版本号来定，也可以在build.gradle文件中看到你的sdk版本号，比如我的就是：
  
  2.创建main_activity.xml文件
  这个文件中主要就是包含两个组件：viewPager和Tablayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.example.lenovo.learningandroid.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent" />

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

</LinearLayout>

3.创建fragment_detail_info.xml
这个布局文件用于显示除了导航栏以外下面的内容，这里只写了一个Textview，可以根据需要来增加组件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lenovo.learningandroid.DetailInfoFragment">

    <TextView
        android:id="@+id/detail_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="18dp"
        android:textStyle="bold"/>

</FrameLayout>

4.创建DetailInfoFragment.java
该类继承自Fragment类，需要重写一些方法。

package com.example.lenovo.learningandroid;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class DetailInfoFragment extends Fragment {
    // TODO: Rename parameter arguments, choose names that match
    private static final String ARG_PARAM = "param";

    // TODO: Rename and change types of parameters

    private int mParam;//用来表示当前需要展示的是哪一页
    private TextView detail_text;//展示的具体内容，这里为了简单只用一个TextView意思一下

    public DetailInfoFragment() {
        // Required empty public constructor
    }
    // TODO: Rename and change types and number of parameters
    public static DetailInfoFragment newInstance(int param) {
        DetailInfoFragment fragment = new DetailInfoFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_PARAM, param);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam = getArguments().getInt(ARG_PARAM);
        }

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view=inflater.inflate(R.layout.fragment_detail_info, container, false);
        detail_text= (TextView) view.findViewById(R.id.detail_info);


        //根据mParam来判断当前展示的是哪一页，根据页数的不同展示不同的信息
        switch (mParam){
            case 0:
                detail_text.setText("内容1");
                break;
            case 1:
                detail_text.setText("内容2");
                break;
            case 2:
                detail_text.setText("内容3");
                break;
            case 3:
                detail_text.setText("内容4");
                break;
            default:break;

        }

        return view;
    }

}

5.创建DetailPageAdapter.java
该类继承自FragmentPagerAdapter

package com.example.lenovo.learningandroid;

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

/**
 * Created by WangHongbo on 2018/10/14.
 */

public class DetailPageAdapter extends FragmentPagerAdapter {

    private static int PAGE_COUNT;//表示要展示的页面数量
    private Context mContext;

    public DetailPageAdapter(Context context, FragmentManager fm) {
        super(fm);
        this.mContext = context;
        PAGE_COUNT=4;

    }

    @Override
    public Fragment getItem(int position) {
        return DetailInfoFragment.newInstance(position);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {//设置标题
        switch (position) {
            case 0:
                return "页面一";
            case 1:
                return "页面二";
            case 2:
                return "页面三";
            case 3:
                return "页面四";
            default:break;

        }
        return null;
    }
}

6.创建MainActivity.java
在这里要用适配器将数据和视图绑定在一起

package com.example.lenovo.learningandroid;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private android.support.v4.app.FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);

        fm = getSupportFragmentManager();

//        为viewpager设置适配器
        mViewPager.setAdapter(new DetailPageAdapter(MainActivity.this, fm));

        mTabLayout.setupWithViewPager(mViewPager);
    }
}

最后运行的结果是：