安卓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的效果图：