Android TabLayout 自定义指示器宽度
Android TabLayout custom indicator width
我想减小指示器的宽度 - 例如,使其宽度不是整个标签宽度,而是标签宽度的 1/2。
这就是我需要做的所有事情,所以我不想下载一些自定义库并搜索可以执行此操作的位置。
有没有办法做到这一点,还是我应该自己写这样的视图?
试试这个。
public void setIndicator (TabLayout tabs,int leftDip,int rightDip){
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
然后
tab.post(new Runnable() {
@Override
public void run() {
setIndicator(tab,60,60);
}
});
我的修改w/o反射(要设置自定义视图!)。
for (int i = 0; i < tabs.getTabCount(); i++) {
TabLayout.Tab tab = tabs.getTabAt(i);
if (tab != null) {
View customView = tab.getCustomView();
if (customView != null) {
View targetViewToApplyMargin = (View) customView.getParent();
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) targetViewToApplyMargin.getLayoutParams();
layoutParams.rightMargin = totalTabMargin;
targetViewToApplyMargin.setLayoutParams(layoutParams);
}
}
}
可以复制TabLayout,修改Indicator计算宽度的逻辑。请参阅 updateIndicatorPosition() 和 animateIndicatorToPosition()。
一个简单的演示 https://github.com/xybean/CustomTabLayout
对于最终解决此问题的任何人,我找到了一个简单的解决方案,其中包含约 90% 的制表符宽度指示器的矢量绘图:
ic_tab_indicator_24dp:
<vector
android:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:strokeWidth="4"
android:fillColor="@android:color/white"
android:pathData="M2,0 L22,0 L22,24 L2,24 z"/>
然后在布局中设置tabIndicator:
app:tabIndicator="@drawable/ic_tab_indicator_24dp"
或在styles.xml:
<item name="tabIndicator">@drawable/ic_tab_indicator_24dp</item>
编辑: 由于我的解决方案越来越受到关注,我想补充一点,您只需修改 pathData ("M2,0 L22,0 L22,24 L2,24 z") 更改 2 和 22 就可以玩宽度值。添加到 2 的量应该从 22 中减去。即:"M4,0 L20,0 L20,24 L4,24 z" 或 "M6,0 L18,0 L18,24 L6,24 z"...
尝试了所有这些解决方案,但都不满意,最后我自己找到了解决方案,我们只需要修改 SlidingTabIndicator 的 indicatorLeft 和 indicatorRight 字段,扩展 tablayout 并在需要时调用 setIndicaotrWidth() ,例如:
setIndicatorWidth(70);
全部代码:
import android.content.Context;
import android.content.res.Resources;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.google.android.material.tabs.TabLayout;
import java.lang.reflect.Field;
import androidx.annotation.NonNull;
public class TabLayoutEx extends TabLayout {
public TabLayoutEx(Context context) {
this(context, null);
}
public TabLayoutEx(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabLayoutEx(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private void init(AttributeSet attrs) {
setTabIndicatorFullWidth(false);
setIndicatorWidth(70);
}
private class DefPreDrawListener implements ViewTreeObserver.OnPreDrawListener {
private LinearLayout tabStrip = null;
private int tabWidth;
private Field fieldLeft;
private Field fieldRight;
public void setTabStrip(LinearLayout tabStrip, int width) {
try {
this.tabStrip = tabStrip;
this.tabWidth = width;
Class cls = tabStrip.getClass();
fieldLeft = cls.getDeclaredField("indicatorLeft");
fieldLeft.setAccessible(true);
fieldRight = cls.getDeclaredField("indicatorRight");
fieldRight.setAccessible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public boolean onPreDraw() {
try {
if (tabWidth > 0) {
int left = fieldLeft.getInt(this.tabStrip);
int right = fieldRight.getInt(this.tabStrip);
//根据目标宽度及现在的宽度调整为合适的left和right
int diff = right - left - tabWidth;
left = left + diff / 2;
right = right - diff / 2;
fieldLeft.setInt(this.tabStrip, left);
fieldRight.setInt(this.tabStrip, right);
}
} catch (Exception e) {
e.printStackTrace();
}
return true;
}
}
private DefPreDrawListener defPreDrawListener = new DefPreDrawListener();
public void setIndicatorWidth(int widthDp) {
Class<?> tabLayout = TabLayout.class;
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("slidingTabIndicator");
tabStrip.setAccessible(true);
LinearLayout tabIndicator = (LinearLayout) tabStrip.get(this);
int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, widthDp, Resources.getSystem().getDisplayMetrics());
//avoid add preDrawListener multi times
tabIndicator.getViewTreeObserver().removeOnPreDrawListener(defPreDrawListener);
tabIndicator.getViewTreeObserver().addOnPreDrawListener(defPreDrawListener);
defPreDrawListener.setTabStrip(tabIndicator, width);
} catch (Exception e) {
e.printStackTrace();
}
}
}
如果您想要一个固定大小的标签指示器,您可以通过 drawable 创建一个固定大小的指示器形状来实现:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
<size
android:width="16dp"
android:height="2dp" />
</shape>
</item>
</layer-list>
然后在 TabLayout 上,您可以将标签指示器设置为可绘制。
同时,您还必须设置 tabIndicatorColor
app:tabIndicatorColor="@color/tabIndicatorColor"
app:tabIndicator="@drawable/tab_indicator"
因为可绘制对象本身将形状置于其边界内的中心,指示器将具有固定大小。
如果想让指示器匹配标签的宽度,可以去掉tabIndicatorandroid:gravity
。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
radius="2dp" />
<size
android:width="16dp"
android:height="2dp" />
</shape>
</item>
</layer-list>
我想减小指示器的宽度 - 例如,使其宽度不是整个标签宽度,而是标签宽度的 1/2。
这就是我需要做的所有事情,所以我不想下载一些自定义库并搜索可以执行此操作的位置。
有没有办法做到这一点,还是我应该自己写这样的视图?
试试这个。
public void setIndicator (TabLayout tabs,int leftDip,int rightDip){
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
然后
tab.post(new Runnable() {
@Override
public void run() {
setIndicator(tab,60,60);
}
});
我的修改w/o反射(要设置自定义视图!)。
for (int i = 0; i < tabs.getTabCount(); i++) {
TabLayout.Tab tab = tabs.getTabAt(i);
if (tab != null) {
View customView = tab.getCustomView();
if (customView != null) {
View targetViewToApplyMargin = (View) customView.getParent();
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) targetViewToApplyMargin.getLayoutParams();
layoutParams.rightMargin = totalTabMargin;
targetViewToApplyMargin.setLayoutParams(layoutParams);
}
}
}
可以复制TabLayout,修改Indicator计算宽度的逻辑。请参阅 updateIndicatorPosition() 和 animateIndicatorToPosition()。 一个简单的演示 https://github.com/xybean/CustomTabLayout
对于最终解决此问题的任何人,我找到了一个简单的解决方案,其中包含约 90% 的制表符宽度指示器的矢量绘图:
ic_tab_indicator_24dp:
<vector
android:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:strokeWidth="4"
android:fillColor="@android:color/white"
android:pathData="M2,0 L22,0 L22,24 L2,24 z"/>
然后在布局中设置tabIndicator:
app:tabIndicator="@drawable/ic_tab_indicator_24dp"
或在styles.xml:
<item name="tabIndicator">@drawable/ic_tab_indicator_24dp</item>
编辑: 由于我的解决方案越来越受到关注,我想补充一点,您只需修改 pathData ("M2,0 L22,0 L22,24 L2,24 z") 更改 2 和 22 就可以玩宽度值。添加到 2 的量应该从 22 中减去。即:"M4,0 L20,0 L20,24 L4,24 z" 或 "M6,0 L18,0 L18,24 L6,24 z"...
尝试了所有这些解决方案,但都不满意,最后我自己找到了解决方案,我们只需要修改 SlidingTabIndicator 的 indicatorLeft 和 indicatorRight 字段,扩展 tablayout 并在需要时调用 setIndicaotrWidth() ,例如:
setIndicatorWidth(70);
全部代码:
import android.content.Context;
import android.content.res.Resources;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.google.android.material.tabs.TabLayout;
import java.lang.reflect.Field;
import androidx.annotation.NonNull;
public class TabLayoutEx extends TabLayout {
public TabLayoutEx(Context context) {
this(context, null);
}
public TabLayoutEx(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabLayoutEx(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(attrs);
}
private void init(AttributeSet attrs) {
setTabIndicatorFullWidth(false);
setIndicatorWidth(70);
}
private class DefPreDrawListener implements ViewTreeObserver.OnPreDrawListener {
private LinearLayout tabStrip = null;
private int tabWidth;
private Field fieldLeft;
private Field fieldRight;
public void setTabStrip(LinearLayout tabStrip, int width) {
try {
this.tabStrip = tabStrip;
this.tabWidth = width;
Class cls = tabStrip.getClass();
fieldLeft = cls.getDeclaredField("indicatorLeft");
fieldLeft.setAccessible(true);
fieldRight = cls.getDeclaredField("indicatorRight");
fieldRight.setAccessible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public boolean onPreDraw() {
try {
if (tabWidth > 0) {
int left = fieldLeft.getInt(this.tabStrip);
int right = fieldRight.getInt(this.tabStrip);
//根据目标宽度及现在的宽度调整为合适的left和right
int diff = right - left - tabWidth;
left = left + diff / 2;
right = right - diff / 2;
fieldLeft.setInt(this.tabStrip, left);
fieldRight.setInt(this.tabStrip, right);
}
} catch (Exception e) {
e.printStackTrace();
}
return true;
}
}
private DefPreDrawListener defPreDrawListener = new DefPreDrawListener();
public void setIndicatorWidth(int widthDp) {
Class<?> tabLayout = TabLayout.class;
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("slidingTabIndicator");
tabStrip.setAccessible(true);
LinearLayout tabIndicator = (LinearLayout) tabStrip.get(this);
int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, widthDp, Resources.getSystem().getDisplayMetrics());
//avoid add preDrawListener multi times
tabIndicator.getViewTreeObserver().removeOnPreDrawListener(defPreDrawListener);
tabIndicator.getViewTreeObserver().addOnPreDrawListener(defPreDrawListener);
defPreDrawListener.setTabStrip(tabIndicator, width);
} catch (Exception e) {
e.printStackTrace();
}
}
}
如果您想要一个固定大小的标签指示器,您可以通过 drawable 创建一个固定大小的指示器形状来实现:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
<size
android:width="16dp"
android:height="2dp" />
</shape>
</item>
</layer-list>
然后在 TabLayout 上,您可以将标签指示器设置为可绘制。
同时,您还必须设置 tabIndicatorColor
app:tabIndicatorColor="@color/tabIndicatorColor"
app:tabIndicator="@drawable/tab_indicator"
因为可绘制对象本身将形状置于其边界内的中心,指示器将具有固定大小。
如果想让指示器匹配标签的宽度,可以去掉tabIndicatorandroid:gravity
。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
radius="2dp" />
<size
android:width="16dp"
android:height="2dp" />
</shape>
</item>
</layer-list>