安卓TabLayout的使用

安卓TabLayout的使用

我们在进行安卓开发时，常常会使用到ViewPager,为了展示更美观的效果，我们经常会选择第三方的诸如TabPageIndicator等配合ViewPager使用。但是TabPageIndicator已经很老了，越来越难以满足现在的诸多需求。庆幸的是谷歌公司在2015年的I/O大会上发布了Design support library库的TabLayout，可以用来代替TabPageIndicator，并且可兼容2.1以上版本的安卓系统。
下面就用一个小例子来介绍一下TabLayout的简单使用。老规矩，先来看一下丑丑的效果图：

要使用这个TabLayout，首先是在build.gradle文件的dependencies中加入compile 'com.android.support:design:25.3.1'这一行。（PS：冒号后面的25.3.1可根据自己的实际情况修改，不是固定的）

其次是创建一个DetailInfoFragment用来展示具体每一页的信息，代码如下：

package com.example.fjj.testapplication;

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
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    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;
    }

}

对应的布局文件fragment_detail_info的代码如下：

<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.fjj.testapplication.DetailInfoFragment">

    <!-- TODO: Update blank fragment layout -->

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

        />

</FrameLayout>

以上则完成了具体每一个page需要展示的信息。
然后设置viewpager的适配器DetailPageAdapter，代码如下：

package com.example.fjj.testapplication;

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

/**
 * Created by fjj on 2017/6/16.
 */

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

最后创建DetailActivity，代码如下：

package com.example.fjj.testapplication;

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

public class DetailActivity 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_detail);
        mTabLayout= (TabLayout) findViewById(R.id.sliding_tabs);
        mViewPager= (ViewPager) findViewById(R.id.viewpager);

        fm = getSupportFragmentManager();

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

        mTabLayout.setupWithViewPager(mViewPager);

    }

}

对应的布局文件activity_detail的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:clipToPadding="true"
    android:orientation="vertical"
    tools:context="com.example.fjj.testapplication.DetailActivity">

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

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

</LinearLayout>

以上简单几步就完成了一个丑丑的viewpager，是不是很激动↖(^ω^)↗。为了简单起见，笔者对页面标题数据的处理直接用了给定的“页面一”和“内容一”之类的。实际开发中的数据种类千差万别，需要自己去处理。但是万变不离其宗，再复杂的东西也是可以简化的。
下面上一个笔者在实际开发中用到TabLayout的效果图：