此文同步CSDN：Material Design控件使用总结之TabLayout
一、TabLayout使用前提
compile 'com.android.support:design:26.+'
首先要导入依赖，需要注意的是版本一定要和自己support库的版本一致，
二、使用过程
一）基本使用
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/main_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@android:color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
这个需要解释的就是相关的属性，具体的可以查看官方文档，这里介绍几个常用的
app:tabIndicatorColor—–>tablayout下划线的颜色
app:tabIndicatorHeight—–>tablayout下划线的高度，如果不想显示可设置为0
app:tabTextColor—–>文本颜色
app:tabSelectedTextColor—–>选中后文本颜色
app:tabGravity—–>显示的位置 值有center 和fill
app:tabTextAppearance—–>设置显示字体的大小
app:tabMode —–>tab的显示方式，fixed填充屏幕如果内容过多会挤掉内容，scrollable内容过多，则可以滑动，内容少，则从左向右排列，不会填充屏幕
接下来，重要的就是给对应的tab设置不同的viewpager页面内容了，每一个ViewPager的内容都设置为一个Fragment
public class ContentFragment1 extends Fragment {
public static ContentFragment1 newInstance(int page) {
ContentFragment1 pageFragment = new ContentFragment1();
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_content2, container, false);
return view;
}
}
创建ViewPager的适配器, 这里提供了一个公共方法addData()来为viewpager设置数据，也可直接在adapter中设置数据，或者通过构造方法把数据传递过来。当然，也可以把adapter设置为一个内部类
class TabViewPagerAdapter extends FragmentStatePagerAdapter {
private List<String> titles;
private List<Fragment> fragments;
public TabViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return titles.size();
}
public void addData(List<String> tabList,List<Fragment> fragmentList){
this.titles = tabList;
this.fragments = fragmentList;
}
//返回Tab的标题，必须重写该方法，否则不显示tab标题
@Override
public CharSequence getPageTitle(int position) {
if (titles != null){
return titles.get(position);
}
return super.getPageTitle(position);
}
}
最后在activity中，对数据进行初始化就可以了
public class MainActivity extends AppCompatActivity {
private TabLayout mainTab;
private ViewPager mainContent;
private List<String> tabList;
private List<Fragment> fragmentList;
private TabViewPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
adapter = new TabViewPagerAdapter(getSupportFragmentManager());
// 设置tablayout数据
adapter.addData(tabList,fragmentList);
mainContent.setAdapter(adapter);
//设置Tablayout与ViewPager的联动
mainTab.setupWithViewPager(mainContent);
}
private void initData() {
tabList = new ArrayList<>();
tabList.add("推荐");
tabList.add("关注");
tabList.add("热门");
fragmentList = new ArrayList<>();
fragmentList.add(new ContentFragment1());
fragmentList.add(new ContentFragment2());
fragmentList.add(new ContentFragment3());
}
public void initView() {
mainTab = (TabLayout) findViewById(R.id.main_tab);
mainContent = (ViewPager) findViewById(R.id.main_content);
}
}
至此，已经基本的用法已经了解了，效果图：
tablayout基本使用.png
当然这里用的都是默认属性，为了方便颜色也用的android自带的，可根据自己的需要设置属性即可。同时可以指定下划线的高度，如果不想显示下划线，可将tabIndicatorColor设置为透明或者设置tabIndicatorHeight为0
二）进阶
1）改变TabLayout的文本的大小
当你修改文本大小时会发现没有textSize这个属性，也就是说无法修改文本大小，但是发现app:tabTextAppearance这个属性，可以修改文本的样式，于是乎，我们就可以通过这个属性间接修改文本大小
在style中：
<style name="TabTextSize" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">18sp</item>
</style>
2）为TabLayout显示图片
效果图：
278362072502111057.jpg
TabLayout并没有设置图片相关的属性，可以通过TabLyout.Tab对象的setIcon()方法设置，我在搜索过程中发现，很多使用SpannableString来设置图片，如果需要图片有选中和未选中两种状态，则需要对当前Tab是否被点击做个判断，然后传给adapter的getPageTitle()方法来处理。此处我用两个数组存放两种状态的图片，为tablayout设置监听addOnTabSelectedListener来进行切换。
/**
* 为Tab设置文字和图片
*/
private void setTabIcon() {
if (tabList == null || tabList.size() == 0){
return;
}
for (int i = 0; i < tabList.size(); i++){
//依次获取标签
TabLayout.Tab tab = mainTab.getTabAt(i);
//为标签设置图标和文字
tab.setIcon(tabIcon[i]);
// 默认选中第一项
if (i == 0 ){
tab.setIcon(tabSelectedIcon[0]);
}
}
mainTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.setIcon(tabSelectedIcon[tab.getPosition()]);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.setIcon(tabIcon[tab.getPosition()]);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
3）在TabLayout上显示自定义view
效果如下图所示，添加另一个增大的效果
269405666955536014.jpg
实现过程和图片文字的类似，这里通过setCustomView为tab设置自定义view视图，
holder = null;
for (int i = 0; i < tabList.size(); i++) {
//依次获取标签
TabLayout.Tab tab = mainTab.getTabAt(i);
//为每个标签设置布局
tab.setCustomView(R.layout.custom_tab);
holder = new ViewHolder(tab.getCustomView());
//为标签填充数据
holder.ivTabIcon.setImageResource(tabIcon[i]);
holder.tvTabText.setText(tabList.get(i));
holder.tvTabText.setTextColor(getResources().getColor(R.color.c_535151));
//默认选择第一项
if (i == 0){
holder.ivTabIcon.setSelected(true);
holder.tvTabText.setSelected(true);
holder.ivTabIcon.setImageResource(R.drawable.selected_guanzhu);
holder.tvTabText.setTextSize(16);
holder.tvTabText.setTextColor(getResources().getColor(R.color.c_406af2));
}
}
//tab选中的监听事件
mainTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.ivTabIcon.setSelected(true);
holder.tvTabText.setSelected(true);
//选中后字体变大
holder.tvTabText.setTextSize(16);
holder.tvTabText.setTextColor(getResources().getColor(R.color.c_406af2));
//选中后图片变大 变色
holder.ivTabIcon.setImageResource(tabSelectedIcon[tab.getPosition()]);
//让Viewpager跟随TabLayout的标签切换
mainContent.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.ivTabIcon.setSelected(false);
holder.tvTabText.setSelected(false);
//恢复为默认字体大小
holder.ivTabIcon.setImageResource(tabIcon[tab.getPosition()]);
holder.tvTabText.setTextSize(12);
holder.tvTabText.setTextColor(getResources().getColor(R.color.c_535151));
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
class ViewHolder{
ImageView ivTabIcon;
TextView tvTabText;
public ViewHolder(View tabView) {
ivTabIcon = tabView.findViewById(R.id.custom_tab_image);
tvTabText = tabView.findViewById(R.id.custom_tab_text);
}
}
网友评论