TabLayout使用方法詳解
更新時(shí)間：2017年08月04日 09:44:11 作者：mChenys
這篇文章主要為大家詳細(xì)介紹了Android中TabLayout的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
TabLayout是design庫提供的控件,可以方便的使用指示器,功能類似ViewPagerIndicator.
使用非常方便,Android Studio只需要在gradle中引入即可使用 .
compile 'com.android.support:design:23.3.0'
TabLayout即可以單獨(dú)使用,也可以配合ViewPager來使用.
先來看看單獨(dú)使用的Demo,實(shí)現(xiàn)如下圖的效果:
代碼如下:
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);
//創(chuàng)建TabLayout
TabLayout tabLayout = new TabLayout(this);
tabLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 60));
//tab可滾動(dòng)
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//tab居中顯示
tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
//tab的字體選擇器,默認(rèn)黑色,選擇時(shí)紅色
tabLayout.setTabTextColors(Color.BLACK, Color.RED);
//tab的下劃線顏色,默認(rèn)是粉紅色
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);
//設(shè)置tab的點(diǎn)擊監(jiān)聽器
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的使用方式,實(shí)現(xiàn)如下效果圖:
布局文件如下:
<?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" 對(duì)齊方式，可選fill和center app:tabIndicatorColor="@color/colorAccent" 設(shè)置tab下劃線的顏色 app:tabMode="scrollable" scrollable是可以橫行滾動(dòng),fixed是指固定個(gè)數(shù) 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] = "當(dāng)前選中的是第" + (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) {
//創(chuàng)建Fragment并返回
TabFragment fragment = new TabFragment();
fragment.setTitle(mData[position % mTitle.length]);
return fragment;
}
@Override
public int getCount() {
return mTitle.length;
}
});
//將ViewPager關(guān)聯(lián)到TabLayout上
mTabLayout.setupWithViewPager(mViewPager);
// 設(shè)置監(jiān)聽,注意:如果設(shè)置了setOnTabSelectedListener,則setupWithViewPager不會(huì)生效
// 因?yàn)閟etupWithViewPager內(nèi)部也是通過設(shè)置該監(jiān)聽來觸發(fā)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) {
//
// }
// });
// 那我們?nèi)绻娴男枰O(jiān)聽tab的點(diǎn)擊或者ViewPager的切換,則需要手動(dòng)配置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;
}
}
擴(kuò)展
1.TabLayout除了上面效果圖展示的文本以外,從源碼中發(fā)現(xiàn)它還可以支持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實(shí)現(xiàn)的.
代碼如下,只需要修改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.替換默認(rèn)的tab選擇效果
如果你即想使用TabLayout,又想不用它的選中效果,例如我們不想要tab下面的那條下劃線作為指示效果.我們應(yīng)該怎么處理呢?
要替換默認(rèn)的選中效果,只能通過添加自定義View作為tab了.這樣就可以很方便的處理View的選中和未選中狀態(tài)了.
同時(shí)我們還要隱藏默認(rèn)的下劃線,這個(gè)怎么處理呢,這里有個(gè)很好的建議.我們可以通過設(shè)置下滑線的顏色和tab的背景 顏色一致,這樣就看不出來了.
例如下面我們要實(shí)現(xiàn)選中tab的效果是將tab放大1.3倍,沒有選中則恢復(fù)原來比例.效果圖:
修改代碼如下:
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; //默認(rèn)位置
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//創(chuàng)建TabLayout
final TabLayout tabLayout = new TabLayout(this);
tabLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 100));
//tab可滾動(dòng)
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//tab居中顯示
tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
//tab的字體選擇器,默認(rèn)黑色,選擇時(shí)紅色
tabLayout.setTabTextColors(Color.BLACK, Color.RED);
//tab的下劃線顏色,默認(rèn)是粉紅色,如果要自定義選中效果,則可以將下劃線設(shè)置為和背景色一樣.
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));
}
//設(shè)置tab的點(diǎn)擊監(jiān)聽器
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//將默認(rèn)位置選中為false
isSelected(tabLayout.getTabAt(initPosition), false);
//選中當(dāng)前位置
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);
}
});
//進(jìn)來默認(rèn)選中位置第3個(gè)item
initPosition = 2;
isSelected(tabLayout.getTabAt(initPosition), true);
setContentView(tabLayout);
}
/**
* 設(shè)置選中的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);
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android 仿微信底部漸變Tab效果,需要的朋友可以參考下2017-12-12
Android實(shí)現(xiàn)動(dòng)態(tài)曲線繪制
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)動(dòng)態(tài)曲線繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
Android 實(shí)現(xiàn)會(huì)旋轉(zhuǎn)的餅狀統(tǒng)計(jì)圖實(shí)例代碼
這篇文章主要介紹了Android 實(shí)現(xiàn)會(huì)旋轉(zhuǎn)的餅狀統(tǒng)計(jì)圖實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
Android組合式自定義控件實(shí)現(xiàn)購物車加減商品操作
這篇文章主要介紹了Android組合式自定義控件實(shí)現(xiàn)購物車加減商品操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
Android 5.0中如何使用JobScheduler API，這篇文章主要介紹了Android5.0中JobScheduler的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本文介紹了Android Retrofit的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Android ViewDragHelper完全解析 自定義ViewGroup神器
這篇文章主要為大家詳細(xì)介紹了Android ViewDragHelper完全解析，自定義ViewGroup神器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
詳解用RxJava實(shí)現(xiàn)事件總線(Event Bus)
本篇文章主要介紹了用RxJava實(shí)現(xiàn)事件總線(Event Bus)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在Flutter應(yīng)用開發(fā)過程中，除了使用Flutter官方提供的路由外，還可以使用一些第三方路由框架來實(shí)現(xiàn)頁面管理和導(dǎo)航，F(xiàn)luro作為一款優(yōu)秀的Flutter企業(yè)級(jí)路由框架，F(xiàn)luro的使用比官方提供的路由框架要復(fù)雜一些，但是卻非常適合中大型項(xiàng)目2022-10-10
Android SDK Manager解決更新時(shí)的問題 ：Failed to fetch URL...
本文主要介紹解決安裝使用SDK Manager更新時(shí)的問題：Failed to fetch URL...,這里提供了詳細(xì)的資料及解決問題辦法，有需要的小伙伴可以參考下2016-09-09