一晃又一年
效果图
TabLayout详解
什么是TabLayout
TabLayout provides a horizontal layout to display tabs.[google] TabLayout是一个用于放置水平Tab的布局
你可以设置文字，icon，甚至是自定义的View
TabLayout的继承关系
TabLayout可配置属性
属性名解释
tabContentStart开始位置的偏移量tabBackground设置Tab的背景色tabGravity分为fill,center,Tab的对齐方式tabIndicatorColor导航条的颜色tabIndicatorHeight导航条的高度tabMaxWidthTab的最大宽度tabMinWidthTab的最小宽度tabMode分为scrollable,fixed,Tab的模式(设置为scrollable代表tab足够多的时候可以水平滚动，而设置为fixed则表示所有tab默认在一页显示，不能滚动)tabPaddingTab的内边距tabPaddingBottomTab的内底边距tabPaddingEndTab的右内边距tabPaddingStartTab的左内边距tabPaddingTopTab的上内边距tabSelectedTextColorTab文字选中颜色tabTextColorTab文字颜色（未选中）tabTextAppearanceTab文字样式
TabGravity跟tabMode有着紧密的联系，具体区别如图所示：
1，TabGravity:fill & tabMode:fixed
tab较少时
tab较多时
2，TabGravity:center & tabMode:fixed
tab较少时
tab较多时
3，TabGravity:fill & tabMode:scrollable
tab较少时
tab较多时
4，TabGravity:center & tabMode:scrollable tab较少时
tab较多时
TabGravity属性只有在TabMode为fixed情况下才有用
XML配置Tab
效果图：
自定义属性跟布局代码：
首先是我们的自定义属性:
<style
name=
"AppTabLayout" parent=
"Widget.Design.TabLayout">
<
item name=
"android:background">@color/colorPrimary</
item>
<
item name=
"tabIndicatorColor">@color/tabTextSelected</
item>
<
item name=
"tabTextColor">@color/tabText</
item>
<
item name=
"tabSelectedTextColor">@color/tabTextSelected</
item>
<
item name=
"tabGravity">fill</
item>
<
item name=
"tabMode">scrollable</
item><!
<
item name=
"tabIndicatorHeight">
2dp</
item>
<
item name=
"tabPaddingStart">
8dp</
item>
<
item name=
"tabPaddingEnd">
8dp</
item>
<
item name=
"tabTextAppearance">@style/TextAppearance</
item>
</style>
<style
name=
"TextAppearance" parent=
"TextAppearance.Design.Tab">
<
item name=
"android:textSize">
16sp</
item>
<
item name=
"textAllCaps">
true</
item>
</style>
接下来是布局代码：
<android
.support.design.widget.TabLayout
android:id=
"@+id/tabLayout"
android:layout_width=
"match_parent"
android:layout_height=
"?attr/actionBarSize"
style=
"@style/AppTabLayout"
>
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:text=
"热点" />
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:icon=
"@mipmap/ic_launcher"/>
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:text=
"全球" />
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:text=
"新闻30分" />
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:text=
"网易" />
<android
.support.design.widget.TabItem
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:text=
"叮当猫" />
</android
.support.design.widget.TabLayout>
代码设置Tab
效果图：
代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.mipmap.ic_launcher));
mTabLayout.addTab(mTabLayout.newTab().setText(
"实时"));
mTabLayout.addTab(mTabLayout.newTab().setText(
"全球"),
0,
true);
mTabLayout.addTab(mTabLayout.newTab().setText(
"新闻30分"));
mTabLayout.addTab(mTabLayout.newTab().setText(
"网易"));
mTabLayout.addTab(mTabLayout.newTab().setText(
"叮当猫"));
}
这里将addTab方法的源码贴出，很明了：
/**
* Add a tab to this layout. The tab will be inserted at <code>position</code>.
* If this is the first tab to be added it will become the selected tab.
*
* @param tab The tab to add
* @param position The new position of the tab
*/
public void addTab(@NonNull Tab tab,
int position) {
addTab(tab, position, mTabs.isEmpty());
}
/**
* Add a tab to this layout. The tab will be added at the end of the list.
*
* @param tab Tab to add
* @param setSelected True if the added tab should become the selected tab.
*/
public void addTab(@NonNull Tab tab,
boolean setSelected) {
if (tab.mParent !=
this) {
throw new IllegalArgumentException(
"Tab belongs to a different TabLayout.");
}
addTabView(tab, setSelected);
configureTab(tab, mTabs.size());
if (setSelected) {
tab.select();
}
}
/**
* Add a tab to this layout. The tab will be inserted at <code>position</code>.
*
* @param tab The tab to add
* @param position The new position of the tab
* @param setSelected True if the added tab should become the selected tab.
*/
public void addTab(@NonNull Tab tab,
int position,
boolean setSelected) {
if (tab.mParent !=
this) {
throw new IllegalArgumentException(
"Tab belongs to a different TabLayout.");
}
addTabView(tab, position, setSelected);
configureTab(tab, position);
if (setSelected) {
tab.select();
}
}
tips java代码设置默认选中
tablayout.getTabAt(position).select();
监听Tab的各种事件
效果图：
Java代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText(
"热点"),
false);
mTabLayout.addTab(mTabLayout.newTab().setText(
"实时"),
false);
mTabLayout.addTab(mTabLayout.newTab().setText(
"全球"),
1,
true);
mTabLayout.addTab(mTabLayout.newTab().setText(
"新闻30分"),
false);
mTabLayout.addTab(mTabLayout.newTab().setText(
"网易"));
mTabLayout.addTab(mTabLayout.newTab().setText(
"叮当猫"),
false);
mTabLayout.setOnTabSelectedListener(
new TabLayout.OnTabSelectedListener() {
/**
* 当tab第一次选择时候调用
* @param tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.
this,
"select tab = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
/**
* 当tab从 选择 ->未选择
* @param tab
*/
@Override
public void onTabUnselected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.
this,
"unselected = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
/**
* 当tab已是选择状态时，继续点击调用此方法
* @param tab
*/
@Override
public void onTabReselected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.
this,
"reselected = "+tab.getText(), Toast.LENGTH_SHORT).show();
}
});
}
效果图:
java代码
public class MainActivity extends AppCompatActivity {
private List<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
titleList =
new ArrayList<>();
titleList.add(
"热点");
titleList.add(
"全球");
titleList.add(
"实时");
titleList.add(
"新闻30分");
titleList.add(
"网易");
titleList.add(
"叮当猫");
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(
new CustomPagerAdapter(
this));
mTabLayout.setupWithViewPager(mViewPager);
}
class CustomPagerAdapter extends PagerAdapter{
private Context context;
public CustomPagerAdapter(Context context){
this.context = context;
}
@Override
public Object
instantiateItem(ViewGroup container,
int position) {
TextView mTextView =
new TextView(context);
mTextView.setText(titleList.get(position));
mTextView.setGravity(Gravity.CENTER);
mTextView.setTextColor(Color.WHITE);
mTextView.setTextSize(
20);
container.addView(mTextView);
return mTextView;
}
@Override
public void destroyItem(ViewGroup container,
int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return titleList.size() ==
0 ?
0 : titleList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence
getPageTitle(
int position) {
return titleList.get(position);
}
}
}
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:background="@android:color/darker_gray"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="@style/AppTabLayout"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
