浅谈TabLayout的使用

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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//创建TabLayoutTabLayout 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++) {//添加tabtabLayout.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() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {toast.setText(tab.getPosition() + ":" + tab.getText());toast.show();}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic 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和centerapp:tabIndicatorColor="@color/colorAccent" 设置tab下划线的颜色app:tabMode="scrollable" scrollable是可以横行滚动,fixed是指固定个数app:tabSelectedTextColor="@color/colorPrimaryDark" 选择tab的文本颜色app:tabTextColor="@color/colorPrimary" 普通tab字体颜色--><android.support.design.widget.TabLayoutandroid: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.ViewPagerandroid: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;@Overrideprotected 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上的名字@Overridepublic CharSequence getPageTitle(int position) {return mTitle[position % mTitle.length];}@Overridepublic Fragment getItem(int position) {//创建Fragment并返回TabFragment fragment = new TabFragment();fragment.setTitle(mData[position % mTitle.length]);return fragment;}@Overridepublic 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() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {//切换ViewPagermViewPager.setCurrentItem(tab.getPosition());}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic 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;}@Overridepublic 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.支持添加ViewView 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; //默认位置@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//创建TabLayoutfinal 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.支持添加ViewView 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() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {//将默认位置选中为falseisSelected(tabLayout.getTabAt(initPosition), false);//选中当前位置isSelected(tab, true);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {//tab未选中isSelected(tab, false);}@Overridepublic void onTabReselected(TabLayout.Tab tab) {//tab重新选中isSelected(tab,true);}});//进来默认选中位置第3个iteminitPosition = 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);}}
}

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

浅谈TabLayout的使用相关推荐

android悬浮按钮阴影,浅谈FloatingActionButton(悬浮按钮)
一.介绍这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...
TabLayout——浅谈
TabLayout--浅谈 TabLayout是Google新推出(其实好久了...)的一个组件,在android5.0的之后的应用中被广泛应用,最近做的一个项目当中也使用到,所以抽空花点时间,整理总 ...
浅谈MySQL存储引擎-InnoDBMyISAM
浅谈MySQL存储引擎-InnoDB&MyISAM 存储引擎在MySQL的逻辑架构中位于第三层,负责MySQL中的数据的存储和提取.MySQL存储引擎有很多,不同的存储引擎保存数据和索引的方式 ...
【大话设计模式】——浅谈设计模式基础
初学设计模式给我最大的感受是:人类真是伟大啊!单单是设计模式的基础课程就让我感受到了强烈的生活气息. 个人感觉<大话设计模式>这本书写的真好.让貌似非常晦涩难懂的设计模式变的生活化.趣味化 ...
学校计算机机房好处,浅谈学校计算机机房维护
浅谈学校计算机机房维护现在的学校机房都配置了数量较多的计算机,而且机房的使用非常频繁.对于怎样维护好计算机,特别是计算机软件系统,对广大计算机教师来说是一个很重要且非常现实的问题.下面就本人在 ...
java 中的单元测试_浅谈Java 中的单元测试
单元测试编写 Junit 单元测试框架对于Java语言而言,其单元测试框架,有Junit和TestNG这两种, 下面是一个典型的JUnit测试类的结构 package com.example.dem ...
mybatis与php,浅谈mybatis中的#和$的区别
浅谈mybatis中的#和$的区别发布于 2016-07-30 11:14:47 | 236 次阅读 | 评论: 0 | 来源: 网友投递 MyBatis 基于Java的持久层框架MyBatis 本 ...
浅谈GCC预编译头技术
浅谈GCC预编译头技术文/jorge --谨以此文,悼念我等待MinGW编译时逝去的那些时间. 其实刚开始编程的时候,我是丝毫不重视编译速度之类的问题的,原因很简单,因为那时我用BASICA.后来 ...
【笔记】震惊！世上最接地气的字符串浅谈(HASH+KMP)
震惊!世上最接地气的字符串浅谈(HASH+KMP) 笔者过于垃圾,肯定会有些错的地方,欢迎各位巨佬指正,感激不尽! 引用:LYD的蓝书,一本通,DFC的讲稿,网上各路巨佬 Luguo id: 章鱼那个 ...

浅谈TabLayout的使用

浅谈TabLayout的使用相关推荐

最新文章

热门文章