Git Product home page Git Product logo

Comments (14)

LillteZheng avatar LillteZheng commented on June 1, 2024

用demo试试

from flowhelper.

Heart-Beats avatar Heart-Beats commented on June 1, 2024

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

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

用demo 试了吗？

from flowhelper.

Heart-Beats avatar Heart-Beats commented on June 1, 2024

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

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

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

from flowhelper.

Heart-Beats avatar Heart-Beats commented on June 1, 2024

需求就是如下图这样：
image

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

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

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

from flowhelper.

Heart-Beats avatar Heart-Beats commented on June 1, 2024

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

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

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

from flowhelper.

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

from flowhelper.

Heart-Beats avatar Heart-Beats commented on June 1, 2024
  1. TabColorTextView 渲染，是因为demo有比较多滑动和动画，阻塞了；单个是没问题的，我们自己的项目也在用，压测过的。
  2. 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 这个属性，大佬可以使用此进行复现看看。

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

好的，国庆后看看

from flowhelper.

zhaoxiuyu avatar zhaoxiuyu commented on June 1, 2024

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

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

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

from flowhelper.

LillteZheng avatar LillteZheng commented on June 1, 2024

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

这个当做需求来看

from flowhelper.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.