TabLayout学习笔记（简介及进阶）

最新推荐文章于 2025-04-17 09:12:09 发布

2501_90433175

最新推荐文章于 2025-04-17 09:12:09 发布

阅读量1.1k

点赞数 7

文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/2501_90433175/article/details/145430025

版权

android.support.design:tabMinWidth — 设置tab选项卡的最小宽度。

android.support.design:tabMode — 设置布局中tab选项卡的行为模式，两个常量MODE_FIXED （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。

android.support.design:tabPadding — 设置tab的内边距（上下左右）。

android.support.design:tabPaddingBottom — 设置tab的底部内边距。

android.support.design:tabPaddingEnd — 设置tab的右侧内边距。

android.support.design:tabPaddingStart — 设置tab的左侧内边距。

android.support.design:tabPaddingTop — 设置tab的上方内边距。

android.support.design:tabSelectedTextColor — 设置tab被选中时的文本颜色。

android.support.design:tabTextColor — 设置tab默认的文本颜色。

android.support.design:tabTextAppearance — 设置tab的TextAppearance样式的引用，可以引用另一个资

常用属性：

app:tabIndicatorColor ：指示线的颜色

app:tabIndicatorHeight ：指示线的高度

app:tabSelectedTextColor ： tab选中时的字体颜色

app:tabMode=“scrollable” ：默认是fixed，固定的；scrollable：可滚动的

添加依赖：

这是Android Design 包下的类, 该包是Android5.0 引入的UI包

compile ‘com.android.support:design:25.2.0’

布局

<android.support.design.widget.TabLayout

android:id=“@+id/tab_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”>

</android.support.design.widget.TabLayout>

代码：

public classMainActivityextendsAppCompatActivity{

@BindView(R.id.tab_layout)

TabLayout mTabLayout;

@Override

protectedvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ButterKnife.bind(this);

mTabLayout.addTab(mTabLayout.newTab().setText(“首页”));

mTabLayout.addTab(mTabLayout.newTab().setText(“分类”));

mTabLayout.addTab(mTabLayout.newTab().setText(“设置”));

}

效果图：

使用滚动的标签指示器和滑动的内容页面，是手机应用经常出现的一种设计风格，常见的比较出名的应用有：微信（首页）、网易新闻、今日头条和知乎等。Google在Support Design包中发布了一些列新的控件，其中就包括TabLayout。配合着ViewPager和Fragment的使用，TabLayout可以帮助开发者们分分钟打造一个滑动标签页，非常方便。本文将介绍TabLayout的两种常见使用场景：顶部标签页（如知乎），底部菜单栏（如微信）。先看一下最终能够实现的效果：

顶部标签页：

TabLayout的使用需要借助Android Design包，所以我们需要在 build.gradle中引入design包

compile ‘com.android.support:design:23.3.0’

在布局文件 activity_tab_layout.xml 中加入TabLayout和ViewPager控件：

<?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”

android:orientation=“vertical”>

<include

layout=“@layout/include_toolbar”/>

<android.support.design.widget.TabLayout

android:id=“@+id/tl_tab”

android:layout_width=“match_parent”

android:layout_height=“@dimen/dp_48”

android:background=“@color/blue”>

</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager

android:id=“@+id/vp_content”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

</android.support.v4.view.ViewPager>

然后我们看一下 TabLayoutActivity 中的代码：

package com.yifeng.mdstudysamples;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.content.ContextCompat;

import android.support.v4.view.ViewCompat;

import android.support.v4.view.ViewPager;

import android.view.Menu;

import android.view.MenuItem;

import java.util.ArrayList;

import java.util.List;

public class TabLayoutActivity extends BaseActivity {

private TabLayout mTabTl;

private ViewPager mContentVp;

private List tabIndicators;

private List tabFragments;

private ContentPagerAdapter contentAdapter;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tab_layout);

mTabTl = (TabLayout) findViewById(R.id.tl_tab);

mContentVp = (ViewPager) findViewById(R.id.vp_content);

initContent();

initTab();

}

private void initTab(){

mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);

mTabTl.setTabTextColors(ContextCompat.getColor(this, R.color.gray), ContextCompat.getColor(this, R.color.white));

mTabTl.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.white));

ViewCompat.setElevation(mTabTl, 10);

mTabTl.setupWithViewPager(mContentVp);

}

private void initContent(){

tabIndicators = new ArrayList<>();

for (int i = 0; i < 3; i++) {

tabIndicators.add("Tab " + i);

}

tabFragments = new ArrayList<>();

for (String s : tabIndicators) {

tabFragments.add(TabContentFragment.newInstance(s));

}

contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());

mContentVp.setAdapter(contentAdapter);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_tab_layout, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.tab_add:

tabIndicators.add("Tab " + tabIndicators.size());

tabFragments.add(TabContentFragment.newInstance(tabIndicators.get(tabIndicators.size()-1)));

contentAdapter.notifyDataSetChanged();

return true;

case R.id.tab_mode_fixed:

mTabTl.setTabMode(TabLayout.MODE_FIXED);

return true;

case R.id.tab_mode_scrollable:

mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);

break;

}

return super.onOptionsItemSelected(item);

}

class ContentPagerAdapter extends FragmentPagerAdapter{

public ContentPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabFragments.get(position);

}

@Override

public int getCount() {

return tabIndicators.size();

}

@Override

public CharSequence getPageTitle(int position) {

return tabIndicators.get(position);

}

核心代码有两个地方，第一个是 setupWithViewPager 方法将TabLayout和ViewPager绑定在一起，使双方各自的改变都能直接影响另一方，解放了开发人员对双方变动事件的监听；第二个是在ViewPager的Adapter适配器中重写 getPageTitle 方法，在这个方法中设置标签指示器的标题。

底部菜单栏

上面我们使用了系统定义好的View做了一个纯文字加下划线组合的标签指示器。其实，我们也能自定义一个布局，然后赋值给TabLayout的Tab视图，比如做一个微信首页界面。

相比顶部标签指示器，底部菜单栏只是将TabLayout布局在了下面：

<?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”

android:orientation=“vertical”>

<include

layout=“@layout/include_toolbar”/>

<android.support.v4.view.ViewPager

android:id=“@+id/vp_content”

android:layout_width=“match_parent”

android:layout_height=“0dp”

android:layout_weight=“1”>

</android.support.v4.view.ViewPager>

<android.support.design.widget.TabLayout

android:id=“@+id/tl_tab”

android:layout_width=“match_parent”

android:layout_height=“@dimen/dp_56”

android:background=“@color/white”>

</android.support.design.widget.TabLayout>

在Activity代码中，设置TabLayout的指示器高度为0，即达到了隐藏Indicator的目的，然后通过getTabAt（position）的方法获取TabLayout的每一个Tab，并赋值为自定义布局视图，代码也很简单：

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewCompat;

import android.support.v4.view.ViewPager;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

/**

Created by yifeng on 16/8/3.

public class TabLayoutBottomActivity extends BaseActivity {

private TabLayout mTabTl;

private ViewPager mContentVp;

private List tabIndicators;

private List tabFragments;

private ContentPagerAdapter contentAdapter;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tab_layout_bottom);

mTabTl = (TabLayout) findViewById(R.id.tl_tab);

mContentVp = (ViewPager) findViewById(R.id.vp_content);

initContent();

initTab();

}

private void initTab(){

mTabTl.setTabMode(TabLayout.MODE_FIXED);

mTabTl.setSelectedTabIndicatorHeight(0);

ViewCompat.setElevation(mTabTl, 10);

mTabTl.setupWithViewPager(mContentVp);

for (int i = 0; i < tabIndicators.size(); i++) {

TabLayout.Tab itemTab = mTabTl.getTabAt(i);

if (itemTab!=null){

itemTab.setCustomView(R.layout.item_tab_layout_custom);

TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_menu_item);

itemTv.setText(tabIndicators.get(i));

}

mTabTl.getTabAt(0).getCustomView().setSelected(true);

}

private void initContent(){

tabIndicators = new ArrayList<>();

for (int i = 0; i < 4; i++) {

tabIndicators.add("Tab " + i);

}

tabFragments = new ArrayList<>();

for (String s : tabIndicators) {

tabFragments.add(TabContentFragment.newInstance(s));

}

contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());

mContentVp.setAdapter(contentAdapter);

}

class ContentPagerAdapter extends FragmentPagerAdapter{

public ContentPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return tabFragments.get(position);

}

@Override

public int getCount() {

return tabIndicators.size();

}

@Override

public CharSequence getPageTitle(int position) {

return tabIndicators.get(position);

}

小结：

从这两种使用场景可以看出，利用TabLayout做一个滑动标签页或者底部菜单栏，实现起来非常方便，代码量也不多，极大地减少了我们的开发量。但是，TabLayout也不是万能的，如果想做出更多地特效还是需要我们自己去开发

TabLayout进阶：

与ActionBar类似的是TabLayout添加Tab也很方便，只需要调用其addTab方法即可：

public class TabLayoutActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.ac_tab_layout);

TabLayout tabLayout = (TabLayout) findViewById(R.id.ac_tab_layout);

TabLayout.Tab tab1 = tabLayout.newTab().setText(“Tab1”);

tabLayout.addTab(tab1);

TabLayout.Tab tab2 = tabLayout.newTab().setText(“Tab2”);

tabLayout.addTab(tab2);

TabLayout.Tab tab3 = tabLayout.newTab().setText(“Tab3”);

tabLayout.addTab(tab3);

}

运行效果如下：

非常简单，不过需要注意的是，这里的Tab类是TabLayout的一个静态内部类，并且其构造方法是包内可访问的，也就是说你无法在外部构造其实例，只能通过TabLayout的newTab方法：

public class TabLayout extends HorizontalScrollView {

// …省去很多代码…

public static final class Tab {

// …省去很多代码…

Tab(TabLayout parent) {

mPosition = -1;

mParent = parent;

}

public Tab newTab() {

return new Tab(this);

}

// …省去很多代码…

}

addTab方法有四个不同的实现，拿参数最多的addTab(Tab tab, int position, boolean setSelected)方法来说，第一个参数tab就不说了，第二个参数position表示当前Tab需要插入的位置，其值必须小于当前TabLayout所拥有的Tab总数减一，如果大于则会报出数组下标溢出异常，这点很好理解，最后的boolean参数setSelected与其名意义一样，表示当前添加的Tab是否为选中状态，拿上面代码中的第三个tab3来说，我们修改其代码如下：

TabLayout.Tab tab3 = tabLayout.newTab().setText(“Tab3”);

tabLayout.addTab(tab3, 2, true);

运行后tab3默认就会是被选中状态：

TabLayout中的公共方法不算多，大多都很好理解，不过有一个方法爱哥表示对其极度不爽，setScrollPosition从名字上来看它是用来设置滚动位置的，大家注意我们的TabLayout中被选中的Tab下方不是有根线么，我们可以通过这个方法来设置它的位置。首先我们在布局中添加一个按钮：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<android.support.design.widget.TabLayout

android:id=“@+id/ac_tab_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content” />

<Button

android:id=“@+id/ac_tab_btn”

android:layout_width=“wrap_content”

android:layout_centerInParent=“true”

android:layout_height=“wrap_content”

android:text=“Move” />

然后呢为这个按钮绑定一个点击事件监听并在其中调用setScrollPosition方法：

Button btnAdd = (Button) findViewById(R.id.ac_tab_btn);

btnAdd.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

tabLayout.setScrollPosition(0, 0.5F, false);

}

});

第一个参数表示当前Tab的位置，第二个参数是偏移值，从文档中看到该值的取值范围是0到1的一个半开区间，最后一个参数很好理解表示是否置移动后位置所对应的Tab为选中状态，打个比方，如果我从0移动到1的位置，如果updateSelectedText为true，那么1这个位置上的文本就会是一个选中状态。上面的代码中我们只是简单地让下方的横条从0的Tab位置移动到一个0.5F的位置，效果如下：

调用了updateIndicatorPosition来做具体的位置更新操作：

private void updateIndicatorPosition() {

View selectedTitle = getChildAt(mSelectedPosition);

int left;

int right;

if (selectedTitle != null && selectedTitle.getWidth() > 0) {

left = selectedTitle.getLeft();