Android--TabLayout控件的使用

在Android5.0之后，谷歌推出了design新控件，其中，有一个新控件叫做TabLayout，什么是TabLayout呢？下面将会有讲解。有关于TabLayout，他可以完成如下图的功能....在日常开发中，我们大家都知道Android主要用TabLayout来实现首页的Tab切换，然而展示不同页面，除此之外，以前我们还可以采用TabHost，自定义控件（第三方库），RadioGroup等等来实现这种效果，不过问题就是这些实现起来确实很麻烦的，还好谷歌在5.0之后推出了Design控件--TabLayout，该控件的推出，确实方便了不少，下面，我们就一起来学习Design库中TabLayout控件的使用。

首先：先看看TabLayout效果图



这里我采用了静态的jpg图片，由于电脑没有安装录制软件，后续有的话再进行更新....

一、什么是TabLayout?

在Andorid源码给出了TabLayout的定义：

TabLayout provides a horizontal layout to display tabs.

很明显的是，在这里的意思是：TabLayout提供了一个显示选项卡的水平布局,现在越来越多手机采用这个控件了，目前有腾讯新闻、知乎、简书App等等....

二、TabLayout的基本使用方式

在编写MainActivity.Java之前，我们还要做几个准备工作，是什么呢？

第一： 在TabLayout控件使用之前，我们必须用到Design这个库，在Android Studio中，我们可以直接在build.gradle中添加依赖库文件。例如：compile'com.android.support:design:25.3.1' 由于我这里sdk版本是25，大家如果发现添加依赖文件编译后出现错误的话怎么办？把design后面对应的版本号改为你当前sdk版本号即可。

第二：如果是eclipse用户的话，没有design这个库怎么办？在这里我提供了一个下载通道，不过的是需要1个积分才能进行下载。

http://download.csdn.net/download/android_yh/9525604



第三：以上没有没有问题的话，那么我们可以开始动手了，本次我们要实现的是通过三个fragement页面来实现添加在TabLayout标签上面的，所以在这里，我们新建立几个fragment用来显示页面，然后建立一个Adatper用来加载。OK，下面我们首先建立三个fragment，因为我这里将实现三个页面。

NewsFragment

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;

import com.soft0754.tabyout.R;

/**
* Created by Administrator on 2017/8/26.
*/

public class NewsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_news,container,false);
return super.onCreateView(inflater, container, savedInstanceState);
}
}

NewsFragment写完了，还有一个对应的布局，fragement_news

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

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="我是新闻fragment"
android:textSize="20dp"
android:gravity="center"/>

</LinearLayout>

在这个布局当中没什么的，就是放了一个TextView进行显示而已。不然页面为空，大家什么都看不到效果。

除此之外，另外还有两个Fragement页面，分别是Funfragment和SportsFragment，由于时间关系，我就不粘贴出来的，大家依葫芦画瓢按照上面这个一样进行添加就可以了...

现在三个Fragement页面也算写好了，我们再写一个viewAdapter，这个viewAdapter主要是为View显示服务的，所以我们起名为viewAdapter，代码如下：

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
* Created by Administrator on 2017/8/26.
*/

public class viewAdapter extends PagerAdapter{
public List<View> list_view;
public List<String> list_Title;
private int[] tabImg;
private Context context;

public  viewAdapter(Context context,List<View> list_view,List<String> list_Title,int[] tabImg){
this.context=context;
this.list_view=list_view;
this.list_Title=list_Title;
}
public int getCount() {
return list_view.size();
}

public boolean isViewFromObject(View view, Object object) {
return view==object;
}

//安装视图，强制转换ViewPager
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager)container).addView(list_view.get(position),0);
return list_view.get(position);
}

//销毁视图，强制转换ViewPager
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(list_view.get(position));
}

@Override
public CharSequence getPageTitle(int position) {
//这段被注的代码，是只显示文字，不显示图标
return  list_Title.get(position % list_Title.size());
}
}

现在我们Fragement分页写好了，viewPager适配器也写好了，剩下就是我们的MainActivity登场了，代码中注释已经给了，MainActivity.Java代码如下：

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 android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private TabLayout tab_title;
private ViewPager vp_pager;

private List<String> list_title;                                      //tab名称列表
private List<View> listViews;
private List<Fragment> list_fragment;

private View newsView;                                                //定义新闻页面
private View sportView;                                               //定义体育页面
private View funView;                                                 //定义娱乐页面

private viewAdapter vAdapter;                                         //定义以view为切换的adapter

private int[] tabImg;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
viewChanage();
}

private void initView() {
tab_title = (TabLayout) findViewById(R.id.tab_title);
vp_pager = (ViewPager)findViewById(R.id.vp_pager);
}

private void viewChanage() {
//通过集合动态添加视图
listViews = new ArrayList<>();
LayoutInflater mInflater = getLayoutInflater();
newsView = mInflater.inflate(R.layout.fragment_news, null);
sportView = mInflater.inflate(R.layout.fragment_sports, null);
funView = mInflater.inflate(R.layout.fragment_fun, null);
listViews.add(newsView);
listViews.add(sportView);
listViews.add(funView);

//通过集合准备标题数据
list_title=new ArrayList<>();
list_title.add("新闻");
list_title.add("体育");
list_title.add("娱乐");

//通过TabLayout控件为tab添加标题名称
tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));
tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));
tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));

//添加适配器
vAdapter = new viewAdapter(this,listViews,list_title,tabImg);
vp_pager.setAdapter(vAdapter);

//将tabLayout与viewpager连起来
tab_title.setupWithViewPager(vp_pager);

}

activity_main.xml布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.soft0754.tabyout.MainActivity">

<android.support.design.widget.TabLayout
android:id="@+id/tab_title"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="@color/tabbg"
android:layout_width="match_parent"
android:layout_height="50dp">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>

这里没什么的，主要就是一个TabLayout选项卡标签控件，还有一个ViewPager滚动视图，细心的你，可能发现TabLayout控件当中加了不少属性，没错，确实如此，有关于TabLayout更多属性，我们下面会讲解。

Ok，下面我们终于写完了，接下来我们一起来运行MainActivity，运行后效果图如下：



大家有没有发现，这图片很熟悉，没错，就是文章开始介绍TabLayout效果时候的图片...

三、TabLayout常用属性

有时候拿到产品ui图时候，样式并不是我们想要的，那么这时候如果用到TabLayout的话，我们可以通过更多的属性从而改变我们自己想要的样式，那么下面，我们就一起来学习更多常用的属性，从而达到我们自己想要的样式...

1、改变TabLayout选中时候的字体颜色

app:tabSelectedTextColor="#ff7a61"

2、改变TabLayout未选中时候的颜色

app:tabTextColor="#CCCCCC"
3、改变TabLayout下标的颜色

app:tabIndicatorColor="#ff7a61"
4、改变整个TabLayout的背景颜色
app:tabBackground="@color/tabbg"
在这里改变TabLayout背景颜色需要注意的是，必须通过引入color方式添加颜色，因为在这里不支持通过16进制的颜色加入...

5、改变TabLayout下标的高度

app:tabIndicatorHeight="2dp"
6、改变TabLayout内部字体大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Small"
在这里需要注意的是，改变内部字体大小只能通过以上这种方式修改样式的大小，所以在这里我设置为打小号字体

7、改变TabLayout显示模式

app:tabMode="fixed"在这里需要注意的是，所谓的显示模式就是只有两种，一种是fixed，表示固定显示的，另外一种的滚动显示的，一般滚动显示是当我们TabLayout数据过多的时候，可以采用的，如果想设置为滚动模式，可以采用以下方式
app:tabMode="scrollable"

8、改变TabLayout子控件Padding大小

app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"

9、改变整个TabLayout控件Padding大小

app:paddingEnd="xxdp"
app:paddingStart="xxdp"

10、改变TabLayout显示模式

app:tabGravity="center"//居中，如果是fill，则是充满
综合以上在TabLayout控件加入几个属性样式之后，除了Padding之外，修改后TabLayout控件的布局的代码为：

<android.support.design.widget.TabLayout
android:id="@+id/tab_title"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="#ff7a61"
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="@color/tabbg"
app:tabTextColor="#CCCCCC"
app:tabMode="fixed"
android:layout_width="match_parent"
app:tabTextAppearance="@android:style/TextAppearance.Holo.Small"
android:layout_height="50dp">
</android.support.design.widget.TabLayout>

样式为：



四、TabLayout监听事件

代码已经做好注释，代码如下：

//TabLayout监听事件
tab_title.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中TabLayout逻辑,在这里通过tab参数获取下标进行判断
switch (tab.getPosition()){
case 0:
display("0");
break;
case 1:
display("1");
break;
case 2:
display("2");
break;
}
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
//未选中TabLayout逻辑
}

@Override
public void onTabReselected(TabLayout.Tab tab) {
//再次选中TabLayout逻辑
}
});

在这里，调用过setOnTabSelectedListener监听方法，从而通过tab.getposition判断点击了哪一个item元素，比如我点击了第一个item，将调用了display("0")；这个方法。

有关TabLayout控件的使用，今天讲解到这里，感谢大家，有什么问题，随时欢迎讨论！