TabLayout自定义布局入门

android:id="@+id/tab"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicator="@drawable/tab_round_indicator"

app:tabIndicatorColor="@color/colorPrimary"

app:tabIndicatorFullWidth="false"

app:tabIndicatorHeight="2dp"

app:tabTextAppearance="@style/MyTabLayoutTextAppearance" />

app:tabIndicatorFullWidth="false"为tablayout的指示器不占满整个tab

app:tabIndicator="@drawable/tab_round_indicator" 为tablayout的指示器样式

TabLayout.Tab tab = tabLayout.getTabAt(0);

tab.setCustomView(R.layout.wancms_tab_item);

TextView tv = tab.getCustomView().findViewById(R.id.tv);

tv.setText("手机注册");

TextView tv1 = tab.getCustomView().findViewById(R.id.tv_num);

tv1.setText("99+");

设置tab自定义布局内容

android:layout_width="wrap_content" android:layout_height="wrap_content">

android:id="@+id/tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:enabled="false"

android:gravity="center"

android:padding="@dimen/dp_10"

android:textColor="@drawable/tab_text_color" />

android:id="@+id/tv_num"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@id/tv"

android:layout_alignRight="@id/tv"

android:background="@drawable/tab_num_color"

android:enabled="false" android:gravity="center"

android:minWidth="@dimen/dp_20"

android:paddingLeft="4dp"

android:paddingRight="4dp"

android:paddingBottom="2dp"

android:textColor="@drawable/tab_text_color_2"/>

自定义布局代码

tab_text_color.xml

tab_text_color2.xml

最后效果