在 TabLayout Android 中 selected/unselected 时更改选项卡字体大小
Change tab font size when selected/unselected in TabLayout Android
我想像这样在选中或取消选中时更改我的标签文本大小。
我的表格布局
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/toolbar"
android:overScrollMode="never"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
app:tabRippleColor="@null"
app:tabTextAppearance="@style/MyCustomTabText"
app:tabIndicatorHeight="0dp"
/>
我的自定义样式
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyCustomTabText">
<item name="android:textSize">16sp</item>
</style>
<resources>
我使用了自定义的文字大小样式,但我不知道如何更改selected/unselected。有人可以帮助我吗?
要根据 selected/unselected 状态更改选项卡字体大小,您必须使用自定义选项卡视图并使用 TabLayout.OnTabSelectedListener
更改 selected/unselected 选项卡的大小。
1.TabLayout in xml 可以像下面这样:
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_light">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 3" />
</com.google.android.material.tabs.TabLayout>
2.Initialise 为每个选项卡使用 setCustomView
方法的 CustomView 并使用 TabLayout.OnTabSelectedListener
来监听当前选择了哪个选项卡以及现在未选择哪个选项卡并更改文本大小,如下所示:
//get each tab from tabLayout
TabLayout.Tab tab0 = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
TabLayout.Tab tab2 = tabLayout.getTabAt(2);
//and set for each one a custom View
tab0.setCustomView(createCustomTabView("Tab 0", 30, android.R.color.holo_green_light)); //initially this tab is selected
tab1.setCustomView(createCustomTabView("Tab 1", 15, android.R.color.black));
tab2.setCustomView(createCustomTabView("Tab 2", 15, android.R.color.black));
//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
@Override
public void onTabSelected(TabLayout.Tab tab) {
setTabTextSize(tab, 30, android.R.color.holo_green_light);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
setTabTextSize(tab, 15, android.R.color.black);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
使用以下辅助函数创建选项卡 CustomView 并根据 selected/unselected 状态更改文本大小:
private View createCustomTabView(String tabText, int tabSizeSp, int textColor){
View tabCustomView = getLayoutInflater().inflate(R.layout.tab_customview, null);
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setText(tabText);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
return tabCustomView;
}
private void setTabTextSize(TabLayout.Tab tab, int tabSizeSp, int textColor){
View tabCustomView = tab.getCustomView();
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
}
3.And自定义Tab布局R.layout.tab_customview
可以这样:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/tabTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:textSize="15sp"
android:textAlignment="center"
android:textColor="@android:color/black"
android:maxLines="1"
tools:text="Tab"/>
</RelativeLayout>
结果:
我想像这样在选中或取消选中时更改我的标签文本大小。
我的表格布局
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/toolbar"
android:overScrollMode="never"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
app:tabRippleColor="@null"
app:tabTextAppearance="@style/MyCustomTabText"
app:tabIndicatorHeight="0dp"
/>
我的自定义样式
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyCustomTabText">
<item name="android:textSize">16sp</item>
</style>
<resources>
我使用了自定义的文字大小样式,但我不知道如何更改selected/unselected。有人可以帮助我吗?
要根据 selected/unselected 状态更改选项卡字体大小,您必须使用自定义选项卡视图并使用 TabLayout.OnTabSelectedListener
更改 selected/unselected 选项卡的大小。
1.TabLayout in xml 可以像下面这样:
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_light">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 3" />
</com.google.android.material.tabs.TabLayout>
2.Initialise 为每个选项卡使用 setCustomView
方法的 CustomView 并使用 TabLayout.OnTabSelectedListener
来监听当前选择了哪个选项卡以及现在未选择哪个选项卡并更改文本大小,如下所示:
//get each tab from tabLayout
TabLayout.Tab tab0 = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
TabLayout.Tab tab2 = tabLayout.getTabAt(2);
//and set for each one a custom View
tab0.setCustomView(createCustomTabView("Tab 0", 30, android.R.color.holo_green_light)); //initially this tab is selected
tab1.setCustomView(createCustomTabView("Tab 1", 15, android.R.color.black));
tab2.setCustomView(createCustomTabView("Tab 2", 15, android.R.color.black));
//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
@Override
public void onTabSelected(TabLayout.Tab tab) {
setTabTextSize(tab, 30, android.R.color.holo_green_light);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
setTabTextSize(tab, 15, android.R.color.black);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
使用以下辅助函数创建选项卡 CustomView 并根据 selected/unselected 状态更改文本大小:
private View createCustomTabView(String tabText, int tabSizeSp, int textColor){
View tabCustomView = getLayoutInflater().inflate(R.layout.tab_customview, null);
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setText(tabText);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
return tabCustomView;
}
private void setTabTextSize(TabLayout.Tab tab, int tabSizeSp, int textColor){
View tabCustomView = tab.getCustomView();
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
}
3.And自定义Tab布局R.layout.tab_customview
可以这样:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/tabTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:textSize="15sp"
android:textAlignment="center"
android:textColor="@android:color/black"
android:maxLines="1"
tools:text="Tab"/>
</RelativeLayout>
结果: