Android 动态修改 Tab 宽度
在 Android 开发中，我们经常会使用 TabLayout 控件来实现页面之间的切换。默认情况下，TabLayout 中的每个 Tab 的宽度是相等的，但有时候我们需要根据需求动态修改某个 Tab 的宽度。本文将介绍如何在 Android 中实现动态修改 Tab 宽度的方法，并提供相应的代码示例。
1. 使用自定义布局
为了实现动态修改 Tab 宽度，我们需要使用自定义布局来替代默认的 Tab 布局。首先，在 res/layout 目录下创建一个名为 tab_item_layout.xml 的布局文件，用于定义每个 Tab 的外观。
<LinearLayout
xmlns:android="
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" />
<View
android:id="@+id/tab_indicator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#FF0000"
android:visibility="invisible" />
</LinearLayout>
在这个布局文件中，我们使用了一个 LinearLayout 作为根布局，内部包含一个用于显示文字的 TextView 和一个用于显示指示器的 View。这样我们就可以自定义每个 Tab 的外观和样式。
2. 创建自定义 TabLayout
接下来，我们需要创建一个自定义的 TabLayout 控件，用于替代默认的 TabLayout。首先，在 res/values/styles.xml 文件中定义一个名为 CustomTabLayout 的新样式。
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorHeight">0dp</item>
<item name="tabBackground">?android:attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#000000</item>
<item name="android:textStyle">bold</item>
</style>
在这个样式中，我们将 tabIndicatorHeight 设置为 0dp，以隐藏默认的指示器；将 tabBackground 设置为系统默认的可选中样式；将 tabTextAppearance 设置为自定义的文本外观。
然后，在我们的 TabLayout 类中，继承自 TabLayout 并重写 addTab 方法，以创建自定义的 Tab。
public class CustomTabLayout extends TabLayout {
public CustomTabLayout(Context context) {
super(context);
}
public CustomTabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public void addTab(Tab tab, int position, boolean setSelected) {
View tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_item_layout, this, false);
TextView textView = tabView.findViewById(R.id.tab_text);
textView.setText(tab.getText());
textView.setOnClickListener(v -> {
if (setSelected) {
selectTab(tab);
}
});
tab.setCustomView(tabView);
super.addTab(tab, position, setSelected);
}
}
在这个自定义的 TabLayout 类中，我们重写了 addTab 方法，在每个 Tab 被添加时，加载我们自定义的布局，并设置相应的属性和点击事件。通过设置 customView，我们实现了自定义 Tab 布局的目的。
3. 动态修改 Tab 宽度
现在，我们已经完成了自定义 TabLayout 的创建，接下来我们将演示如何动态修改 Tab 的宽度。假设我们有三个 Tab，我们希望将第二个 Tab 的宽度修改为原来的两倍。
CustomTabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
Tab tab = tabLayout.newTab().setText("Tab 2");
tabLayout.addTab(tab);
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
View tabView = tab.getCustomView();
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = params.width * 2; // 修改宽度为原来的两倍
tabView.setLayoutParams(params);
``
