Android tablayout 每个tab宽度自适应 安卓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这个库怎么办？

第三：以上没有没有问题的话，那么我们可以开始动手了，本次我们要实现的是通过三个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控件的使用，今天讲解到这里，感谢大家，有什么问题，随时欢迎讨论！