1.TabLayout基本介紹
TabLayout是安卓6.0推出的币狠，可以替代 ViewPagerIndicator 的一個(gè)控件徐鹤，存放在 design 包下丈屹，繼承自 HorizontalScrollView 藕漱。使用的時(shí)候需要先導(dǎo)入 android.support.design.widget 包锅劝。
2. TabLaout的使用介紹
(1). 單獨(dú)使用TabLayout
使用TabLayout的時(shí)候，需要給它添加 Tab , 添加 Tab 的方式有兩種晨横，一種是在代碼中通過(guò) tablayout.new Tab( ) 動(dòng)態(tài)添加洋腮，一種是在xml中通過(guò) TabItem 添加箫柳。具體如下：
1）代碼中動(dòng)態(tài)添加Tab
activity_tablayout_test.xml 布局文件：
<?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">
<!--單獨(dú)使用方式1 只在xml中聲明手形，從代碼中添加tab-->
<android.support.design.widget.TabLayout
android:id="@+id/tableLayout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout>
</LinearLayout>
TabLayoutTestActivity.java 具體使用：
/**
* Created by CnPeng on 2016/12/7.
* <p>
* tablayout的使用示例
*/
public class TabLayoutTestActivity extends AppCompatActivity {
@Override
protected void onCreate(
@Nullable
Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout_test);
initView1();
}
/**
* 代碼中添加TabItem 并實(shí)現(xiàn)監(jiān)聽(tīng)
*/
private void initView1() {
TabLayout tablayout = (TabLayout) findViewById(R.id.tableLayout_1);
for (int i = 0; i < 6; i++) {
// 創(chuàng)建Tab的同時(shí)設(shè)置tab描述文字以及tab的tag，并添加到tablayout中 . Tab只能用在代碼中悯恍，不能用在xml
tablayout.addTab(tablayout.newTab().setText("代碼中定義的" + i + "號(hào)標(biāo)簽").setTag(i));
}
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// tab.setIcon(R.drawable.ic_launcher);
switch (tab.getTag().toString()) { //根據(jù)標(biāo)簽做不同的處理
case "1":
Toast.makeText(TabLayoutTestActivity.this, "1號(hào)被選中了库糠，可以用 fragmentA 替換該頁(yè)面下半部分", Toast
.LENGTH_SHORT).show();
break;
case "2":
Toast.makeText(TabLayoutTestActivity.this, "2號(hào)被選中了，可以用 fragmentB 替換該頁(yè)面下半部分", Toast
.LENGTH_SHORT).show();
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// tab.setIcon(null); //取消Icon時(shí)使用null
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// tab.setIcon(R.drawable.ic_launcher);
}
});
}
}
2）布局文件中添加Tab
xml布局文件
<?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">
<!--單獨(dú)使用放肆2 在xml中聲明并添加tab
xml中創(chuàng)建TabItem的時(shí)候只有三個(gè)屬性：layout icon text
-->
<android.support.design.widget.TabLayout
android:id="@+id/tableLayout_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp20"
app:tabMode="scrollable">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml中定義 0號(hào)標(biāo)簽"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml中定義 1號(hào)標(biāo)簽"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml中定義 2號(hào)標(biāo)簽"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml中定義 3號(hào)標(biāo)簽"/>
</android.support.design.widget.TabLayout>
</LinearLayout>
代碼中使用：
/**
* Created by CnPeng on 2016/12/7.
* <p>
* tablayout的使用示例
*/
public class TabLayoutTestActivity extends AppCompatActivity {
@Override
protected void onCreate(
@Nullable
Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout_test);
initView2();
}
/**
* xml文件中添加TabItem ,并實(shí)現(xiàn)監(jiān)聽(tīng)
*/
private void initView2() {
TabLayout tablayout2 = (TabLayout) findViewById(R.id.tableLayout_2);
tablayout2.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override //被選中
public void onTabSelected(TabLayout.Tab tab) {
//這里拿到的tab 其實(shí)就是代碼中的tabitem涮毫，但tabitem不能設(shè)置tag,所以瞬欧，還是從代碼中添加tab比較實(shí)用
switch (tab.getPosition()) {
case 0:
Toast.makeText(TabLayoutTestActivity.this, "xml中定義的0號(hào)被點(diǎn)擊了", Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(TabLayoutTestActivity.this, "xml中定義的1號(hào)被點(diǎn)擊了", Toast.LENGTH_SHORT).show();
break;
}
}
@Override //未被選中
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override //重新被選中
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
總結(jié)：
A:
在xml布局文件中添加Tab時(shí)，只能使用 TabItem , 而且TabItem只有三個(gè)屬性罢防， layout 艘虎， text , icon ; 而 Tab 則只是用在java代碼中，但 Tab 的屬性值和方法更加豐富咒吐，所以野建，實(shí)際使用的時(shí)候属划，推薦使用Tab 在代碼中動(dòng)態(tài)添加
B:
在 TabLayout節(jié)點(diǎn)中，定義了app:tabMode="scrollable" 候生，這個(gè) tabMode 表示tab的排列方式同眯，有兩個(gè)取值：
- scrollable表示tab過(guò)多超出屏幕寬度時(shí)，一直橫著往外排列唯鸭，然后滾動(dòng)可以查看须蜗；
- fixed表示TabLayout的最大寬度滿屏，各Tab寬度均分目溉。當(dāng) tab 過(guò)多超出屏幕寬度時(shí)明肮，會(huì)擠吧一下 ;
- 如果不設(shè)置，默認(rèn)fixed缭付。
具體下過(guò)參考下圖：
TabMode 的兩種取值模式的效果差異
