FlowHelper 指示器无法与文字对齐

大佬您好，我的 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，始终都达不到想要的效果，现在除了想到写死宽度，在设置指示器的宽度，没想到好的方法

May 17 '22 10:05 Heart-Beats

用demo试试

Jun 06 '22 09:06 LillteZheng

大佬还是和上次一样的问题，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 无事件回调

Jun 22 '22 10:06 Heart-Beats

用demo 试了吗？

Jun 27 '22 01:06 LillteZheng

我拿 demo 简单修改了一下，可以复现提到的两个问题：截图如下： Screenshot_20220627_142211_com zhengsr tabhelper 修改部分代码如下：

    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 时就没绘制出来，具体原因也就没细查下去了。

Jun 27 '22 06:06 Heart-Beats

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

Jun 27 '22 08:06 LillteZheng

需求就是如下图这样：

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

Jun 28 '22 02:06 Heart-Beats

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

Jun 28 '22 03:06 LillteZheng

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

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

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

Jun 28 '22 04:06 Heart-Beats

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

Sep 15 '22 09:09 LillteZheng

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

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

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

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

    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 这个属性，大佬可以使用此进行复现看看。

Sep 16 '22 04:09 Heart-Beats

好的，国庆后看看

Sep 21 '22 02:09 LillteZheng

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

Oct 09 '22 08:10 zhaoxiuyu

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

Oct 10 '22 01:10 LillteZheng

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

这个当做需求来看

Oct 11 '22 03:10 LillteZheng

FlowHelper FlowHelper copied to clipboard

指示器无法与文字对齐

FlowHelper
FlowHelper copied to clipboard