老婆保佑，代码无BUG
前言
Material Design 系列第四篇 TabLayout
目录
- 一：使用
- 二：属性介绍
- 三：与ViewPager一起使用
引用
compile 'com.android.support:design:26.1.0'
Untitled.gif
一：使用
1. 静态设置
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_launcher_background"
android:text="Tab1" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_launcher_background"
android:text="Tab2" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_launcher_background"
android:text="Tab3" />
</android.support.design.widget.TabLayout>
</LinearLayout>
2. 动态设置
TabLayout tabLayout = findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("tab1").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("tab2").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("tab3").setIcon(R.mipmap.ic_launcher));
二：属性介绍
| 属性 | 说明 |
|---|---|
| app:tabSelectedTextColor="@color/colorAccent" | 选中字体的颜色 |
| app:tabTextColor="@color/colorPrimary" | 未选中字体的颜色 |
| app:tabIndicatorColor="@color/colorPrimary" | 指示器下标的颜色 |
| app:tabIndicatorHeight="4dp" | 指示器下标的高度,0表示没有标 |
| app:tabMode="scrollable" | 默认是fixed：Tab的模式（scrollable-滑动，fixed-固定），如（图1） |
| app:tabBackground="@color/line_view" | 整个TabLayout的背景颜色 |
| app:tabContentStart="20dp" | TabLayout开始的位置的偏移量 |
| app:tabGravity="center" | 整个TabLayout居中显示(如果是fill，则是充满) |
| app:tabMaxWidth="100dp" | 最大的tab宽度 |
| app:tabMinWidth="20dp" | 最小的tab宽度 |
| app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" | tablayout上字体的大小 |
图1
三：与ViewPager一起使用
tabLayout.setupWithViewPager(viewPager);
最重要的就这个代码
package com.allens.utils;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import java.util.List;
/**
* Created by Administrator on 2016/9/27.
*/
public class Tab2VpUtils {
private Tab2VpUtils() {
}
private static Tab2VpUtils newInstance;
public static Tab2VpUtils getInstance() {
if (newInstance == null) {
synchronized (Tab2VpUtils.class) {
if (newInstance == null) {
newInstance = new Tab2VpUtils();
}
}
}
return newInstance;
}
private TabLayout tabLayout;
private ViewPager viewPager;
private List<Fragment> fragmentList;
private FragmentManager fragmentManager;
private String[] arr;
/***
*
* @param tabLayout
* @param viewPager
* @param fragmentList
* @param fragmentManager
* @param arr 数组
*/
public void tabControl(TabLayout tabLayout, ViewPager viewPager, List<Fragment> fragmentList, FragmentManager fragmentManager, String[] arr) {
this.arr = arr;
this.fragmentManager = fragmentManager;
this.fragmentList = fragmentList;
this.tabLayout = tabLayout;
this.viewPager = viewPager;
initSet();
}
private void initSet() {
viewPager.setAdapter(new MyViewPagerFragmentAdapter(fragmentManager));
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < arr.length; i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setText(arr[i]);
// tab.setIcon(R.drawable.buttom_category_seletor);//图片选择器，只能在上面？？
}
}
private class MyViewPagerFragmentAdapter extends FragmentPagerAdapter {
public MyViewPagerFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList == null ? 0 : fragmentList.size();
}
}
}
源码地址
点击进入GitHub
最后
全部系列
