开发公司的项目中需要实现以下效果图,需要自定义TabLayout中
的选项卡
<强> Tablayout xml
& lt; android.support.design.widget.TabLayout
android: id=癅 + id/dialog_mod_icon_tablayout”
android: layout_width=" wrap_content "
android: layout_height=" wrap_content "
应用:tabIndicatorHeight=" 0 dp”
android: paddingLeft=" @dimen/commom_margin_20”
应用:tabMode=肮龆?
应用:tabPaddingStart=" @dimen/commom_margin_5”
应用:tabPaddingEnd=" @dimen/commom_margin_5”
应用:tabSelectedTextColor=癅color/common_tv_dark_red”/祝辞
其中如果多个标签需要滚动则要设置应用:tabMode=肮龆?对于tabPaddingStart与tabPaddingEnd则是设置选项卡的左边和右边填充,根据具体的需求来设置就好,这里如果没有设置,TabLayout或自动设置一个默认的值給选项卡中,
<强> setCustomView()
设置自定义的标签布局給Tablayout
TabLayout。选项卡标签=tabLayout.newTab ();
视图视图=LayoutInflater.from(上下文).inflate (R.layout.widget_choose_icon_tab_bg, null);
TextView电视=(TextView) view.findViewById (R.id.choose_icon_tab_tv);
tv.setText (listData.get (i) . getname ());
tab.setCustomView(查看);
tabLayout.addTab(选项卡),
<强> widget_choose_icon_tab_bg.xml
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt; LinearLayout xmlns: android=" http://schemas.android.com/apk/res/android "
android: layout_width=" wrap_content "
android: layout_height=" wrap_content "
面向android:=按怪薄北?
& lt; TextView
android: id=癅 + id/choose_icon_tab_tv”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: layout_gravity="中心"
android:背景=" @drawable/selector_icon_choose_txt_bg”
android:填充=" @dimen/commom_margin_4”
android: textSize=" @dimen/commom_tv_size_12”
android: textStyle=按蟮ā?比;
& lt;/LinearLayout>
之前
<强> selector_icon_choose_txt_bg
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;选择xmlns: android=" http://schemas.android.com/apk/res/android "比;
& lt;项目android:可拉的=" @drawable/shape_icon_choose_select”android: state_checked=" true "/比;
& lt;项目android:可拉的=" @drawable/shape_icon_choose_select”android: state_selected=" true "/比;
& lt;项目android:可拉的=癅drawable/shape_icon_choose_no_select”/比;
& lt;/selector>
<强> shape_icon_choose_select
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;形状xmlns: android=" http://schemas.android.com/apk/res/android "比;
& lt;角落android:=癅dimen/commom_margin_2”/半径比;
& lt;中风android:颜色=" @color/common_bg_dali_gray_cc4”android:宽度=? dp/比;
& lt;/shape>
<强> shape_icon_choose_no_select
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;形状xmlns: android=" http://schemas.android.com/apk/res/android "比;
& lt;角落android:=癅dimen/commom_margin_2”/半径比;
& lt;中风android:颜色=" @color/common_bg_dali_gray_62”android:宽度=? dp/比;
& lt;/shape>
之前
通过以上设置,就实现了我图中TabLayout的子选项卡的布局. .
<强> Android TabLayout布局自带的填充和高度问题
TabLayout布局自带的属性
最近用TabLayout,发现设置简单的CustomView之后,有一些奇怪的边距。并不是按照你预想的那样。
他妈的源代码发现了两个要注意的地方。
<强>(1)选项卡默认自带横向边距问题
如上图,看到我就给了一个简单的观点,结果上下左右全都多了边距。
跟源码发现,是mTabPaddingStart和mTabPaddingEnd在初始化的时候,会自动给一个默认值。
