【问题标题】:Click through RecyclerView ViewHolder点击通过 RecyclerView ViewHolder
【发布时间】:2021-06-22 15:22:35
【问题描述】:

我有一个 RecyclerView,它显示一个延伸到其父 ViewHolder 之外的 Button。我在按钮上添加了一个 clickListener 来显示一个 toast。如果单击 Button 并且单击的是 Button 父 ViewHolder 的区域,则显示 toast,但如果单击按钮但在其父 ViewHolder 之外,则不再显示 toast。

这是我目前拥有的

回收站视图:

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:focusedByDefault="false"
        android:scrollbars="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/indicator"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:reverseLayout="true"
        app:stackFromEnd="true" />

物品视图:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="15dp"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clickable="false"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:clipToPadding="false"
    android:elevation="0dp"
    android:scaleY="-1.0">

    <View
        android:id="@+id/vertical"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:alpha="0.25"
        android:background="#ffffff"
        android:visibility="gone"
        android:layout_marginVertical="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/annotation"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:scaleY="-1.0"
        android:elevation="100dp"
        android:text="TEST ANNOTATION"
        android:clickable="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

适配器:

class ChartAdapter(
    private val dataSet: MutableList<Float>,
    private val context: Context
) : RecyclerView.Adapter<ChartAdapter.ViewHolder>() {
    private var scaleFactor: Float = 1.0f

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val layout: ConstraintLayout = view.findViewById(R.id.layout)
        val vertical: View = view.findViewById(R.id.vertical)
        val annotation: View = view.findViewById(R.id.annotation)
    }

    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder =
        ViewHolder(
            LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.layout_quadrant, viewGroup, false)
        )

    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
        viewHolder.layout.layoutParams = ConstraintLayout.LayoutParams(
            (39 * this.scaleFactor).roundToInt(),
            ConstraintLayout.LayoutParams.MATCH_PARENT
        )

        ConstraintSet().apply {
            clone(viewHolder.layout)
            applyTo(viewHolder.layout)
        }

        viewHolder.annotation.scaleX = this.scaleFactor
        viewHolder.annotation.scaleY = this.scaleFactor * -1

        viewHolder.vertical.visibility = when {
            position % 5 == 0 || position == dataSet.size - 1 -> View.VISIBLE
            else -> View.GONE
        }

        viewHolder.annotation.visibility = when (position) {
            15 -> View.VISIBLE
            else -> View.GONE
        }

        viewHolder.annotation.setOnClickListener {
            Toast.makeText(context, "annotation clicked!", Toast.LENGTH_SHORT).show()
        }
    }

    override fun getItemCount() = dataSet.size

    fun setScaleFactor(scaleFactor: Float) {
        this.scaleFactor = scaleFactor
        notifyDataSetChanged()
    }
}

如您所见,我尝试将 android:clickable="false"android:focusable="false"android:focusableInTouchMode="false" 添加到 Item 布局和 RecyclerView 以防止它拦截点击操作,但不幸的是,父级总是一直拦截点击防止按钮被点击。

我也在 ViewHolder 上试过这个,但没有运气

inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    val layout: ConstraintLayout = view.findViewById(R.id.layout)
    val vertical: View = view.findViewById(R.id.vertical)
    val annotation: View = view.findViewById(R.id.annotation)

    init {
        view.layoutParams = WindowManager.LayoutParams().apply {
            height = WindowManager.LayoutParams.MATCH_PARENT;
            width = WindowManager.LayoutParams.WRAP_CONTENT;
            flags =
                WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
        }
        view.isClickable = false
        view.isFocusable = false
        view.isFocusableInTouchMode = false
        val itemTouchListener = View.OnTouchListener { v, event -> false }
        view.setOnTouchListener(itemTouchListener)
    }
}

【问题讨论】:

  • 我需要问为什么。为什么按钮“扩展其父级”。你为什么要添加所有那些可聚焦/可点击/等。为什么使用触摸监听器(而不是点击监听器)。这么多问题......你到底想在这里完成什么。
  • 由于您的按钮将延伸到父布局之外,是什么阻止您更改父布局的宽度以包裹内容?

标签: android android-recyclerview


【解决方案1】:

问题是Android触摸系统在ViewGroup(这里是ConstraintLayout)上发起触摸,然后将其传播给children的 ViewGroup 但触摸必须在与 ViewGroup 重叠的子部分上。这就是你所看到的。

Here 很好地解释了发生的事情。

如果您需要坚持当前的设计,我认为最好的方法是捕捉封装整个按钮的视图项的第一个祖先的触摸。然后,您可以测试该祖先上的触摸事件,以查看它们是否也在按钮的范围内。如果是,您可以将触摸事件发送到按钮的dispatchTouchEvent()

这是一个简单的演示,说明正在发生的事情。我不使用 RecyclerView,而是使用更简单的布局,显示一个按钮,该按钮横跨 LinearLayout 中包含的 ConstraintLayout 的右边缘。目标是在其父 ViewGroup 中获取按钮 1/2 和 1/2 以显示点击是如何发生的。

在演示中,一个开关决定了我们是否要检测对位于其父级之外的按钮部分的点击。当开关“关闭”时,不会检测到外部的点击,当开关打开时,会检测到外部的点击。

这是演示的代码。代码为按钮建立一个屏幕上的点击矩形,并在 dispatchTouchEvent() 中检查主活动是否触摸在点击矩形内。

MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var mBaseLayout: LinearLayoutCompat
    private lateinit var mButton: Button
    private val mButtonOnScreenBounds = Rect()
    private var mIsOutsideClickEnabled = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mBaseLayout = findViewById(R.id.baseLayout)
        findViewById<SwitchCompat>(R.id.enableClicks).setOnCheckedChangeListener { _, isChecked ->
            mIsOutsideClickEnabled = isChecked
        }
        mButton = findViewById(R.id.button)
    }

    override fun dispatchTouchEvent(ev: MotionEvent) =
        super.dispatchTouchEvent(ev) ||
            (mIsOutsideClickEnabled && isClickWithinView(mButton, ev)
                && mButton.dispatchTouchEvent(ev))

    fun isClickWithinView(view: View, ev: MotionEvent) =
        Rect().let { rect ->
            view.getGlobalVisibleRect(rect)
            rect.contains(ev.x.toInt(), ev.y.toInt())
        }

    fun onClick(view: View) {
        when (view.id) {
            R.id.baseLayout -> Toast.makeText(this, "baseLayout clicked!", Toast.LENGTH_SHORT)
            R.id.innerLayout -> Toast.makeText(this, "innerLayout clicked!", Toast.LENGTH_SHORT)
            R.id.button -> Toast.makeText(this, "button clicked!", Toast.LENGTH_SHORT)
            else -> Toast.makeText(this, "Something else clicked!", Toast.LENGTH_SHORT)
        }.show()
    }
}

这是使用的布局:

activity_main.xml

<androidx.appcompat.widget.LinearLayoutCompat 
    android:id="@+id/baseLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    android:clipChildren="false"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/innerLayout"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="96dp"
        android:background="@android:color/holo_blue_light"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/enableClicks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="Enable clicks outside "
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:text="Button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.LinearLayoutCompat>

此处理或类似处理也可以在触摸处理期间调用的其他函数(例如触摸侦听器)中完成。



虽然前面看起来有效,但如果您看一下在 LinearLayout 内部和外部触摸按钮时的涟漪效果,情况会有所不同。当触摸在按钮上但在 LinearLayout 内时,波纹会按预期从触摸点延伸。当触摸在 LinearLayout 之外时,波纹不是来自触摸点而是来自底部中心。这引起了我的担忧,因为它表明,不知何故,处理是不同的。可能还有其他问题,例如可访问性等。所以,caveat emptor

更好的方法是以某种方式扩展视图持有者以包含按钮的整个范围。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-24
    • 2015-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多