指示器无法与文字对齐 #34

Heart-Beats · 2022-05-17T10:32:11Z

大佬您好，我的 tab布局如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingEnd="@dimen/dp_30"
    android:paddingBottom="@dimen/sp_6">


    <com.zhengsr.tablib.view.TabColorTextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:textSize="@dimen/sp_9"
        app:colortext_change_color="@color/color_595cca"
        app:colortext_default_color="@color/color_6f718f"
        tools:text="测试" />


</FrameLayout>

整个tab 设置属性如下：

            <com.zhengsr.tablib.view.flow.TabVpFlowLayout
                android:id="@+id/rectflow"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tab_action_orientaion="left"
                app:tab_width_equals_text="true"
                app:tab_color="@color/colorPrimary"
                app:tab_type="rect" />

最终显示的效果却如下：

无论我怎么设置 tab布局中的 paddingEnd 或者 marginEnd，始终都达不到想要的效果，现在除了想到写死宽度，在设置指示器的宽度，没想到好的方法

LillteZheng · 2022-06-06T09:12:40Z

用demo试试

Heart-Beats · 2022-06-22T10:04:33Z

大佬还是和上次一样的问题，tab 使用 TabColorTextView 选中后渲染有问题，TabVpFlowLayout 设置如下：

            <com.zhengsr.tablib.view.flow.TabVpFlowLayout
               android:id="@+id/order_detail_tab_flow"
               android:layout_width="@dimen/dp_198"
               android:layout_height="wrap_content"
               app:tab_height="@dimen/dp_2"
               app:tab_visual_count="3"
               app:tab_width_equals_text="true"
               app:tab_item_res="@drawable/shape_round2_gradient_ff9295e7_ff595cca"
               app:tab_type="res" />
              ```
              
              其中自定义了一个 ResAction，因为默认的 ResAction
设置指示器高度有问题，尝试使用Textview 重写  TabFlowAdapter 
的 onItemSelectState 方法设置文字颜色，但是发现点击时该方法无回调，因此希望大佬可以看下这两个问题：


1.  TabColorTextView  文字渲染有问题
2. TabFlowAdapter  的 onItemSelectState 无事件回调

LillteZheng · 2022-06-27T01:21:56Z

用demo 试了吗？

Heart-Beats · 2022-06-27T06:41:16Z

我拿 demo 简单修改了一下，可以复现提到的两个问题：
截图如下：

修改部分代码如下：

    private void resFlow() {
        final TabVpFlowLayout flowLayout = findViewById(R.id.resflow);

        /**
         * 配置自定义属性
         */

        TabBean bean = new TabBean();
        bean.tabType = FlowConstants.RES;
        bean.tabItemRes = R.drawable.shape_round;
        bean.tabClickAnimTime = 300;
        // bean.tabMarginLeft = 30;
        bean.tabMarginTop = 12;
        bean.tabMarginRight = 5;
        bean.tabMarginBottom = 10;
        bean.autoScale = true;
        bean.scaleFactor = 1.2f;
        // bean.selectedColor = Color.RED;
        bean.tabHeight = 20;
        // bean.unSelectedColor = getResources().getColor(R.color.unselect);
        flowLayout.setTabBean(bean);

        TabConfig config = new TabConfig.Builder()
                .setViewpager(mViewPager)
                .setTextId(R.id.item_text)
                .build();
        flowLayout.setTabConfig(config);
        // flowLayout.setCusAction(new MyResAction());

        flowLayout.setAdapter(config, new TabFlowAdapter<String>(R.layout.item_my_test, mTitle) {

            @Override
            public void onItemSelectState(View view, boolean isSelected) {
                super.onItemSelectState(view, isSelected);
                Log.d(TAG, "onItemSelectState: isSelect == " + isSelected);
            }

            @Override
            public void bindView(View view, String data, int position) {
                setText(view, R.id.item_text, data);
            }

        });
    }

item_my_test文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.zhengsr.tablib.view.TabColorTextView

        android:id="@+id/item_text"
        android:layout_width="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="30dp"
        tools:text="测试"
        android:paddingTop="6dp"
        android:paddingBottom="6dp" android:textSize="18sp"
        android:gravity="center"
        app:colortext_default_color="@color/white"
        app:colortext_change_color="#FF0000"
        android:textColor="@color/unselect"
        android:layout_height="wrap_content"/>
</FrameLayout>

主要就是去除了 TabColorTextView 的左右 padding，然后加上 marginEnd 后就渲染异常了，还有 onItemSelectState 点击事件的生效时机好像时间隔三个切换才生效，而且给的状态里我看有两个 true。

而且希望大佬优化一下 ResAction 的默认绘制，因为现在的方式不取 tabHeight，导致使用 Res 形式的一定填充满整个 tab ,但有时需求却是有点像 rect这种形式支持渐变 shape 的，所以希望大佬优化一下这块的绘制处理，我之前重写了 config 方法如下：

	override fun config(parentView: AbsFlowLayout) {
		super.config(parentView)
		if (mRes != -1) {
			mDrawable = AppCompatResources.getDrawable(mContext, mRes)
		}
		val child = parentView.getChildAt(0)
		if (child != null) {
			if (mDrawable != null) {
				val width = child.measuredWidth
				val height = child.measuredHeight

				mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
				// 默认创建一个占满整个 view 的画布
				val canvas = Canvas(mBitmap)

				val l = (mTabBean.tabMarginLeft + child.left).toFloat()
				val t = (mTabBean.tabMarginTop + child.top).toFloat()
				val r = (child.right - mTabBean.tabMarginRight).toFloat()
				val b = (child.bottom - mTabBean.tabMarginBottom).toFloat()

				//这里更改原有的绘制高度和位置
				mDrawable!!.setBounds(0, height - mTabBean.tabHeight, width, height)
				mDrawable!!.draw(canvas)
				mTabRect.set(l, t, r, b)
				mSrcRect = Rect(0, 0, width, height)
			}
		}
	}

当有 tabHeight 时满足需求，但是没设置 tabHeight 时就没绘制出来，具体原因也就没细查下去了。

LillteZheng · 2022-06-27T08:52:24Z

我还是没理解你的需求：
你的需求时 res 类型下，不需要 res 填充整个高度？然后拿不到 TabBean 的 mTabheight?
目前 res 是根据子控件自身的大小去绘制的，如果你拿不到 mTabheight ，用 child.measuredHeight 也是能拿到高度才对

Heart-Beats · 2022-06-28T02:38:36Z

需求就是如下图这样：

指示器是个渐变的 shape，同时并不填充满整个高度，所以需要 ResAction 支持自定义指示器的高度

LillteZheng · 2022-06-28T03:53:27Z

明白了，我看你已经实现了呀。
设置tabheight？然后通过TabBean.tabHeight 去绘制 res 的大小？或者通过 child.measuredHeight 拿到也可以把。

Heart-Beats · 2022-06-28T04:12:18Z

嗯，ResAction 的指示器高度自定义我已简单实现了，所以这个是希望大佬默认支持一下，这个 issue 主要是针对我反馈的两个问题：

TabColorTextView 文字渲染有问题
TabFlowAdapter 的 onItemSelectState 无事件回调

希望大佬有事件可以看一下

LillteZheng · 2022-09-15T09:07:20Z

TabColorTextView 渲染，是因为demo有比较多滑动和动画，阻塞了；单个是没问题的，我们自己的项目也在用，压测过的。
onItemSelectState 这个是非 viewpager 再回回调，后面再去掉它。
感谢反馈

Heart-Beats · 2022-09-16T04:57:32Z

TabColorTextView 渲染，是因为demo有比较多滑动和动画，阻塞了；单个是没问题的，我们自己的项目也在用，压测过的。

onItemSelectState 这个是非 viewpager 再回回调，后面再去掉它。
感谢反馈

TabColorTextView 渲染的问题并不是由于多个阻塞的，可以看下图：

仅有单条时也会产生，可以使用如下代码进行复现：

    private void resFlow() {
        final TabVpFlowLayout flowLayout = findViewById(R.id.resflow);

        /**
         * 配置自定义属性
         */

        TabBean bean = new TabBean();
        bean.tabType = FlowConstants.RES;
        bean.tabItemRes = R.drawable.shape_round;
        bean.tabClickAnimTime = 300;
        // bean.tabMarginLeft = 30;
        bean.tabMarginTop = 12;
        bean.tabMarginRight = 5;
        bean.tabMarginBottom = 10;
        bean.autoScale = true;
        bean.scaleFactor = 1.2f;
        // bean.selectedColor = Color.RED;
        bean.tabHeight = 20;
        // bean.unSelectedColor = getResources().getColor(R.color.unselect);
        flowLayout.setTabBean(bean);

        TabConfig config = new TabConfig.Builder()
                .setViewpager(mViewPager)
                .setTextId(R.id.item_text)
                .build();
        flowLayout.setTabConfig(config);
        // flowLayout.setCusAction(new MyResAction());

        flowLayout.setAdapter(config, new TabFlowAdapter<String>(R.layout.item_my_test, mTitle) {

            @Override
            public void onItemSelectState(View view, boolean isSelected) {
                super.onItemSelectState(view, isSelected);
                Log.d(TAG, "onItemSelectState: isSelect == " + isSelected);
            }

            @Override
            public void bindView(View view, String data, int position) {
                setText(view, R.id.item_text, data);
            }

        });
    }

item_my_test文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.zhengsr.tablib.view.TabColorTextView
        android:id="@+id/item_text"
        android:layout_width="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="30dp"
        tools:text="测试"
        android:paddingTop="6dp"
        android:paddingBottom="6dp" android:textSize="18sp"
        android:gravity="center"
        app:colortext_default_color="@color/white"
        app:colortext_change_color="#FF0000"
        android:textColor="@color/unselect"
        android:layout_height="wrap_content"/>
</FrameLayout>

主要复现关键点在 TabColorTextView 中横向边距仅使用了 layout_marginEnd 这个属性，大佬可以使用此进行复现看看。

LillteZheng · 2022-09-21T02:58:38Z

好的，国庆后看看

zhaoxiuyu · 2022-10-09T08:24:01Z

@LillteZheng 期待国庆后解决，刚看你的Demo，确实是歪的。

LillteZheng · 2022-10-10T01:50:43Z

认真看了这个问题，原来是使用了 layout_marginEnd 或layout_marginStart ，这个偏移量的意思，就是为了让用户可以决定偏移量。
demo 也是故意设置的，因为我们的apk 也有这种需求，所以加上的。
这个不是 bug，是故意为之。如果要对齐，把 layout_marginEnd 或 layout_marginStart 设置为0，或者大小一致即可@zhaoxiuyu @Heart-Beats

LillteZheng · 2022-10-11T03:40:59Z

目前文字对齐只支持 rect 哈，其他模式暂不支持
v1.37 : 增加 tab_width_equals_text ，让 rect 根据 text 的长度变化，修复 TabColorTextView 加粗不起作用的问题。

这个当做需求来看

LillteZheng closed this as completed Sep 15, 2022

LillteZheng reopened this Sep 21, 2022

LillteZheng closed this as completed Oct 11, 2022

LillteZheng reopened this Oct 11, 2022

LillteZheng added the help wanted Extra attention is needed label Oct 11, 2022

LillteZheng self-assigned this Oct 11, 2022

LillteZheng added the 需求 label Oct 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

指示器无法与文字对齐 #34

指示器无法与文字对齐 #34

Heart-Beats commented May 17, 2022

LillteZheng commented Jun 6, 2022

Heart-Beats commented Jun 22, 2022

LillteZheng commented Jun 27, 2022

Heart-Beats commented Jun 27, 2022

LillteZheng commented Jun 27, 2022

Heart-Beats commented Jun 28, 2022

LillteZheng commented Jun 28, 2022

Heart-Beats commented Jun 28, 2022

LillteZheng commented Sep 15, 2022

Heart-Beats commented Sep 16, 2022

LillteZheng commented Sep 21, 2022

zhaoxiuyu commented Oct 9, 2022

LillteZheng commented Oct 10, 2022

LillteZheng commented Oct 11, 2022 •

edited

指示器无法与文字对齐 #34

指示器无法与文字对齐 #34

Comments

Heart-Beats commented May 17, 2022

LillteZheng commented Jun 6, 2022

Heart-Beats commented Jun 22, 2022

LillteZheng commented Jun 27, 2022

Heart-Beats commented Jun 27, 2022

LillteZheng commented Jun 27, 2022

Heart-Beats commented Jun 28, 2022

LillteZheng commented Jun 28, 2022

Heart-Beats commented Jun 28, 2022

LillteZheng commented Sep 15, 2022

Heart-Beats commented Sep 16, 2022

LillteZheng commented Sep 21, 2022

zhaoxiuyu commented Oct 9, 2022

LillteZheng commented Oct 10, 2022

LillteZheng commented Oct 11, 2022 • edited

LillteZheng commented Oct 11, 2022 •

edited