Android学习笔记十八之TabLayout标签布局

Android学习笔记十八之TabLayout标签布局

　　AbsoluteLayout绝对布局，在API13中被废弃了，采用FrameLayout, RelativeLayout or a custom layout 替代，所以就不在介绍AbsoluteLayout绝对布局，我们介绍一个Google推出的新的布局——TabLayout标签布局。

　　TabLayout标签布局是Google 2015年IO大会推出的Android Support Design库中的一个控件，继承于HorizontalScrollView，实现的效果跟ViewPage和ViewpageIndicator实现的效果差不多。不过这个是官方推出的，更加符合Google的MD设计理念。对于Tablayout，Google官方是这样解析的：

You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed.If you’re using a ViewPager together with this layout, you can call setupWithViewPager(ViewPager) to link the two together. This layout will be automatically populated from the PagerAdapter’s page titles.

简单翻译就是：

为选项卡的状态改变设置一个setOnTablSelectedListener(OnTabSelectedListener) ，如果在布局中使用ViewPager，你可以使用setupWithViewPager(ViewPager)来给PagerAdapter设置page title和关联viewpager和TabLayout.

TabLayout的属性：

• android.support.design:tabBackground属性：设置标签的背景
• android.support.design:tabContentStart属性：从标签应位于的起始边缘的Y轴上的位置。
• android.support.design:tabGravity属性：对齐，对应java方法是：setTabGravity(int)，其中center对应是1，fill对应是0；
• android.support.design:tabIndicatorColor属性：设置当前选定的标签的指示器的颜色。对应java方法是setSelectedTabIndicatorColor(int)；
• android.support.design:tabIndicatorHeight属性：设置当前被选中标签的高度，对应java方法是：setSelectedTabIndicatorHeight(int)；
• android.support.design:tabMaxWidth属性：tab的最大宽度
• android.support.design:tabMinWidth属性：tab的最小宽度
• android.support.design:tabMode属性：布局中的标签的行为模式，有两个值，fixed、scrollable。对应java方法是:setTabMode(int),有两个值： MODE_FIXED，同时固定选项卡显示所有选项卡,最好使用内容受益于快速标签之间的枢纽和MODE_SCROLLABLE，常用于viewpager。
• android.support.design:tabPadding属性：底部边距
• android.support.design:tabPaddingEnd属性:右边边距
• android.support.design:tabPaddingStart属性：左边距
• android.support.design:tabPaddingTop属性：顶部边距
• android.support.design:tabSelectedTextColor属性：选中标签的颜色
• android.support.design:tabTextAppearance属性：引用TextAppearance风格适用于标签
• android.support.design:tabTextColor属性：文本颜色，对应java方法：setTabTextColors(int,int)

使用TabLayout实现一个简单例子：

需要在AS中添加：

compile 'com.android.support:design:24.0.0'

布局文件代码：

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tb_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabIndicatorColor="#3A5FCD"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="#3A5FCD"
    app:tabTextColor="#FF000000" />

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

</LinearLayout>

Activity代码：

private TabLayout tb_layout;
private ViewPager viewPager;
private SimplePageAdapter simplePageAdapter;
private String[] titles;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tablayout);
    titles = getResources().getStringArray(R.array.tab_title);
    simplePageAdapter = new SimplePageAdapter(getSupportFragmentManager(), titles);
    tb_layout = (TabLayout) findViewById(R.id.tb_layout);
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(simplePageAdapter);
    tb_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
    tb_layout.setupWithViewPager(viewPager);
    tb_layout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

适配器代码：

package com.example.hello_layout.adapter;

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

import com.example.hello_layout.fragment.TabPageFragment;

/**
 * Created by Devin on 2016/7/4.
 */
public class SimplePageAdapter extends FragmentPagerAdapter {
private String[] names;

public SimplePageAdapter(FragmentManager fm, String[] names) {
    super(fm);
    this.names = names;
}

@Override
public Fragment getItem(int position) {
    return TabPageFragment.getInstance(position);
}

@Override
public int getCount() {
    return names.length;
}

@Override
public CharSequence getPageTitle(int position) {
    return names[position];
}
}

fragment代码：

package com.example.hello_layout.fragment;

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 android.widget.TextView;

import com.example.hello_layout.R;

/**
 * Created by Devin on 2016/7/4.
 */
public class TabPageFragment extends Fragment {
private int page;
public static final String PAGE_POSITION = "page_position";
private String[] names;
private TextView tv_fragment;


public static TabPageFragment getInstance(int position) {
    TabPageFragment tabPageFragment = new TabPageFragment();
    Bundle bundle = new Bundle();
    bundle.putInt(PAGE_POSITION, position);
    tabPageFragment.setArguments(bundle);
    return tabPageFragment;
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_tab, container, false);
    tv_fragment = (TextView) view.findViewById(R.id.tv_fragment);
    tv_fragment.setText(names[page]);
    return view;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    page = this.getArguments().getInt(PAGE_POSITION);
    names = getResources().getStringArray(R.array.tab_title);
    System.out.println(page);
}
}

其中，setOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)已经被废弃掉了，改用addOnTabSelectedListener(OnTabSelectedListener) and removeOnTabSelectedListener(OnTabSelectedListener).替代。setTabsFromPagerAdapter(PagerAdapter adapter)也被废弃掉了，改用setupWithViewPager(ViewPager)代替。

实现效果：

这样就可以实现一个比较简单的效果，其它样式可以自己设，比如可以设置图片和自定义view等。TabLayout就简单介绍到这里。照例附上TabLayout的国内镜像API