欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

TabLayout相关设置(TabLayout属性,自定义itemTab,设置垂直分割线)

程序员文章站 2022-06-18 14:14:59
tabLayout属性

tabLayout属性

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tb_video_message_type"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabTextColor="@color/black3d3d3d"
        app:tabSelectedTextColor="@color/main_bottom_text_select_color"
        app:tabIndicatorColor="@color/tabIndicatorColor"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabIndicatorFullWidth="false"
        app:tabGravity="fill"
        app:tabBackground="@android:color/transparent"
        app:tabRippleColor="@android:color/transparent"/>

tabTextColor:设置未选中字体颜色;
tabSelectedTextColor:设置选中字体颜色
tabIndicatorColor:设置下划线颜色
tabIndicatorHeight:设置下划线高度
tabMode:设置布局中tab选项卡的行为模式,两个常量fixed(固定的tab)和 scrollable(滑动的tab)
tabIndicatorFullWidth:为false时下划线自适应文字的宽度,为true时 下划线宽度与itemTab宽度一致
tabGravity:tab的布局方式,两个值center (内容中心显示) 和 fill (内容尽可能充满TabLayout)

1、自定义itemTab

//添加itemTab
private void setupTabIcons() {
  for (int i = 0; i < tabTypeBeanList.size(); i++) {
       tabLayout.getTabAt(i).setCustomView(getTabView(i));
   }
}
//自定义itemTab布局
public View getTabView(int position) {
    View view = LayoutInflater.from(getContext()).inflate(R.layout.item_tab, null);
    TextView txt_title = (TextView) view.findViewById(R.id.tv_item_tab);
    txt_title.setText(tabTypeBeanList.get(position).getTitle());
    ImageView img_title = (ImageView) view.findViewById(R.id.iv_item_tab);
    img_title.setImageResource(tabTypeBeanList.get(position).getDrawableId());
    return view;
}
//view布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <ImageView
        android:id="@+id/iv_item_tab"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginRight="10dp"/>
    <TextView
        android:id="@+id/tv_item_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="@drawable/item_tab_text_color"/>
</LinearLayout>
//item_tab_text_color 设置字体选中及未选中颜色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:color="@color/black3d3d3d"/>
    <item android:state_selected="true" android:color="@color/main_bottom_text_select_color"/>
</selector>

2、设置垂直分割线

首先添加个竖线xml名为item_tab_divider_vertical:
<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android">
	    <solid android:color="@color/gray1"/>
	    <size android:width="1dp"/>
	</shape>
设置分割线
LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(getContext(),
                R.drawable.item_tab_divider_vertical));

3、TabLayout与ViewPager绑定

代码引用

ViewPagerFragmentAdapter fragmentPagerAdapter = new ViewPagerFragmentAdapter(getChildFragmentManager(),fragmentList,tabTypeBeanList);
viewPager.setAdapter(fragmentPagerAdapter);
viewPager.setOffscreenPageLimit(fragmentList.size());
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();//自定义itemTab
//添加垂直分割线
LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(getContext(),
        R.drawable.item_tab_divider_vertical));

适配器

public class ViewPagerFragmentAdapter extends FragmentPagerAdapter {
    private List<BaseFragment> baseFragmentList;
    private List<TabTypeBean> titleList;
    public ViewPagerFragmentAdapter(@NonNull FragmentManager fm, List<BaseFragment> baseFragmentList) {
        super(fm);
        this.baseFragmentList = baseFragmentList;
    }
    public ViewPagerFragmentAdapter(@NonNull FragmentManager fm, List<BaseFragment> baseFragmentList, List<TabTypeBean> titleList) {
        super(fm);
        this.baseFragmentList = baseFragmentList;
        this.titleList = titleList;
    }
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return baseFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return baseFragmentList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        String title = "";
        if(titleList != null){
            title = titleList.get(position).getTitle();
        }
        return title;
    }
}

本文地址:https://blog.csdn.net/u011210902/article/details/108143710