TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator.
使用非常方便,Android Studio只需要在gradle中引入即可使用 .

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

TabLayout即可以单独使用,也可以配合ViewPager来使用.

先来看看单独使用的Demo,实现如下图的效果:

代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.Toast;

/**
 * Created by mChenys on 2016/5/28.
 */
public class TabLayoutOnlyActivity extends AppCompatActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  //创建TabLayout
  TabLayout tabLayout = new TabLayout(this);
  tabLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 60));
  //tab可滚动
  tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
  //tab居中显示
  tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
  //tab的字体选择器,默认黑色,选择时红色
  tabLayout.setTabTextColors(Color.BLACK, Color.RED);
  //tab的下划线颜色,默认是粉红色
  tabLayout.setSelectedTabIndicatorColor(Color.BLUE);
  for (int i = 0; i < 20; i++) {
   //添加tab
   tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
  }
  final Toast toast = Toast.makeText(this, "", Toast.LENGTH_SHORT);
  toast.setGravity(Gravity.CENTER, 0, 0);
  //设置tab的点击监听器
  tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    toast.setText(tab.getPosition() + ":" + tab.getText());
    toast.show();
   }

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

   }

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

   }
  });
  setContentView(tabLayout);
 }
}

下面再来看看配合ViewPager的使用方式,实现如下效果图:

布局文件如下:

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

 <!--
 app:tabGravity="center" 对齐方式，可选fill和center
 app:tabIndicatorColor="@color/colorAccent" 设置tab下划线的颜色
 app:tabMode="scrollable" scrollable是可以横行滚动,fixed是指固定个数
 app:tabSelectedTextColor="@color/colorPrimaryDark" 选择tab的文本颜色
 app:tabTextColor="@color/colorPrimary" 普通tab字体颜色
 -->
 <android.support.design.widget.TabLayout
  android:id="@+id/tl_tab"
  android:layout_width="match_parent"
  android:layout_height="55dp"
  app:tabGravity="center"
  app:tabIndicatorColor="@color/colorAccent"
  app:tabMode="scrollable"
  app:tabSelectedTextColor="@color/colorPrimaryDark"
  app:tabTextColor="@color/colorPrimary" />

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

代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by mChenys on 2016/5/28.
 */
public class TabLayoutWithViewPagerActivity extends AppCompatActivity {

 String[] mTitle = new String[20];
 String[] mData = new String[20];
 TabLayout mTabLayout;
 ViewPager mViewPager;

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

 private void initData() {
  for (int i = 0; i < 20; i++) {
   mTitle[i] = "TAB" + (i + 1);
   mData[i] = "当前选中的是第" + (i + 1) + "Fragment";
  }
 }

 private void initView() {
  mTabLayout = (TabLayout) findViewById(R.id.tl_tab);
  mViewPager = (ViewPager) findViewById(R.id.vp_pager);
  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
   //此方法用来显示tab上的名字
   @Override
   public CharSequence getPageTitle(int position) {
    return mTitle[position % mTitle.length];
   }

   @Override
   public Fragment getItem(int position) {
    //创建Fragment并返回
    TabFragment fragment = new TabFragment();
    fragment.setTitle(mData[position % mTitle.length]);
    return fragment;
   }

   @Override
   public int getCount() {
    return mTitle.length;
   }
  });
  //将ViewPager关联到TabLayout上
  mTabLayout.setupWithViewPager(mViewPager);

//  设置监听,注意:如果设置了setOnTabSelectedListener,则setupWithViewPager不会生效
//  因为setupWithViewPager内部也是通过设置该监听来触发ViewPager的切换的.
//  mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//   @Override
//   public void onTabSelected(TabLayout.Tab tab) {
//   }
//
//   @Override
//   public void onTabUnselected(TabLayout.Tab tab) {
//
//   }
//
//   @Override
//   public void onTabReselected(TabLayout.Tab tab) {
//
//   }
//  });
//  那我们如果真的需要监听tab的点击或者ViewPager的切换,则需要手动配置ViewPager的切换,例如:
  mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    //切换ViewPager
    mViewPager.setCurrentItem(tab.getPosition());
   }

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

   }

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

   }
  });
 }
}

TabFragment 代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by mChenys on 2016/5/28.
 */
public class TabFragment extends Fragment {
 private String mTitle;

 public void setTitle(String title) {
  this.mTitle = title;
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  TextView textView = new TextView(getContext());
  textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,30);
  textView.setGravity(Gravity.CENTER);
  textView.setText(mTitle);
  return textView;
 }
}

扩展

1.TabLayout除了上面效果图展示的文本以外,从源码中发现它还可以支持Drawable,以及自定义View

public static final class Tab {

  /**
   * An invalid position for a tab.
   *
   * @see #getPosition()
   */
  public static final int INVALID_POSITION = -1;

  private Object mTag;
  private Drawable mIcon;
  private CharSequence mText;
  private CharSequence mContentDesc;
  private int mPosition = INVALID_POSITION;
  private View mCustomView;

  private TabLayout mParent;
  private TabView mView;

  private Tab() {
   // Private constructor
  }

如下效果图,就是通过添加自定义View实现的.

代码如下,只需要修改TabLayout的addTab方法即可:

for (int i = 0; i < 20; i++) {
 //1.支持添加字符串文本tab 
 //tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));

 //2.支持添加图片tab 
 //tabLayout.addTab(tabLayout.newTab().setIcon(R.mipmap.ic_launcher));

 //3.支持添加View
 View tabView = View.inflate(TabLayoutOnlyActivity.this, R.layout.view_tab, null);
 ((TextView)tabView.findViewById(R.id.tv_title)).setText("TAB" + i);
 tabLayout.addTab(tabLayout.newTab().setCustomView(tabView));
}

2.替换默认的tab选择效果

如果你即想使用TabLayout,又想不用它的选中效果,例如我们不想要tab下面的那条下划线作为指示效果.我们应该怎么处理呢?

要替换默认的选中效果,只能通过添加自定义View作为tab了.这样就可以很方便的处理View的选中和未选中状态了.

同时我们还要隐藏默认的下划线,这个怎么处理呢,这里有个很好的建议.我们可以通过设置下滑线的颜色和tab的背景 颜色一致,这样就看不出来了.

例如下面我们要实现选中tab的效果是将tab放大1.3倍,没有选中则恢复原来比例.效果图:

修改代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by mChenys on 2016/5/28.
 */
public class TabLayoutOnlyActivity extends AppCompatActivity {
 int initPosition; //默认位置

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 //创建TabLayout
 final TabLayout tabLayout = new TabLayout(this);
 tabLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 100));
 //tab可滚动
 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
 //tab居中显示
 tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
 //tab的字体选择器,默认黑色,选择时红色
 tabLayout.setTabTextColors(Color.BLACK, Color.RED);
 //tab的下划线颜色,默认是粉红色,如果要自定义选中效果,则可以将下划线设置为和背景色一样.
 tabLayout.setSelectedTabIndicatorColor(Color.WHITE);
 for (int i = 0; i < 20; i++) {
  //1.支持添加字符串文本tab
  //tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));

  //2.支持添加图片tab
  //tabLayout.addTab(tabLayout.newTab().setIcon(R.mipmap.ic_launcher));

  //3.支持添加View
  View tabView = View.inflate(TabLayoutOnlyActivity.this, R.layout.view_tab, null);
  ((TextView) tabView.findViewById(R.id.tv_title)).setText("TAB" + i);
  tabLayout.addTab(tabLayout.newTab().setCustomView(tabView));
 }

 //设置tab的点击监听器
 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
  //将默认位置选中为false
  isSelected(tabLayout.getTabAt(initPosition), false);
  //选中当前位置
  isSelected(tab, true);

  }

  @Override
  public void onTabUnselected(TabLayout.Tab tab) {
  //tab未选中
  isSelected(tab, false);
  }

  @Override
  public void onTabReselected(TabLayout.Tab tab) {
  //tab重新选中
  isSelected(tab,true);
  }
 });
 //进来默认选中位置第3个item
 initPosition = 2;
 isSelected(tabLayout.getTabAt(initPosition), true);
 setContentView(tabLayout);
 }

 /**
 * 设置选中的tab是否带缩放效果
 * @param tab
 * @param isSelected
 */
 private void isSelected(TabLayout.Tab tab, boolean isSelected) {
 View view = tab.getCustomView();
 if (null != view) {
  view.setScaleX(isSelected ? 1.3f : 1.0f);
  view.setScaleY(isSelected ? 1.3f : 1.0f);
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# android  # TabLayout  # Android使用TabLayout+Fragment实现顶部选项卡  # Android MarginDesign控件TabLayout导航栏使用详解  # android TabLayout使用方法详解  # Tablayout简单使用方法总结  # 下划线  # 自定义  # 怎么处理  # 的是  # 如果你  # 来了  # 很好  # 选择器  # 有个  # 不出  # 是指  # 只需  # 要在  # 我们可以  # 再来  # 只需要  # 可选  # 就看  # 那条  # 则可 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 微信小程序 五星评分(包括半颗星评分)实例代码  ,网页ppt怎么弄成自己的ppt？  网站建设要注意的标准 促进网站用户好感度！  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  phpredis提高消息队列的实时性方法(推荐)  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  JavaScript如何实现类型判断_typeof和instanceof有什么区别  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  iOS正则表达式验证手机号、邮箱、身份证号等  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  黑客如何利用漏洞与弱口令入侵网站服务器？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  在线教育网站制作平台,山西立德教育官网？  Android GridView 滑动条设置一直显示状态(推荐)  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  网站优化排名时，需要考虑哪些问题呢？  微信推文制作网站有哪些,怎么做微信推文，急？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  C++时间戳转换成日期时间的步骤和示例代码  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  如何用VPS主机快速搭建个人网站？  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  原生JS获取元素集合的子元素宽度实例  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  Laravel如何使用Telescope进行调试？（安装和使用教程）  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  如何快速搭建高效服务器建站系统？  如何用腾讯建站主机快速创建免费网站？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  如何挑选最适合建站的高性能VPS主机？  移动端脚本框架Hammer.js  网站制作大概多少钱一个,做一个平台网站大概多少钱？  如何为不同团队 ID 动态生成多个非值班状态按钮  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】