如何使版面右侧可点击？

Question

我有这样的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/expand_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignBottom="@id/name_of_service"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="30dp"
            android:src="@drawable/down_arrow" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

</LinearLayout>

我想使放置imageview的整个右侧不仅可以单击imageview，还可以单击。 我决定将imageview放入framelayout中：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />

        <FrameLayout
            android:id="@+id/click_area"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignBottom="@id/name_of_service"
            android:layout_alignParentEnd="true"
            android:clickable="true"
            android:focusable="true">

            <ImageView
                android:id="@+id/expand_btn"
                android:layout_width="wrap_content"
                android:layout_gravity="bottom"
                android:layout_height="wrap_content"
                android:src="@drawable/down_arrow" />
        </FrameLayout>


    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

</LinearLayout>

然后覆盖click事件：

holder.frameLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                if(event.getAction() == MotionEvent.ACTION_UP){
                    Log.i("m","sjn");
                    return true;
                }
                return false;
            }
        });

但正如我所见，我只能单击布局的底部。 这种布局就像我的RecyclerView项目的视图一样使用，当我单击右侧时，将显示隐藏的线性布局，如下所示：

holder.showHideBtn.setOnClickListener(view -> {
            if (invisible) {
                holder.layout.setVisibility(View.VISIBLE);
                invisible = false;
                holder.showHideBtn.setImageResource(R.drawable.ic_up_arrow);
            } else {
                holder.layout.setVisibility(View.GONE);
                invisible = true;
                holder.showHideBtn.setImageResource(R.drawable.down_arrow);
            }

        });

也许有人可以帮助我解决我的问题？ 我尝试使用约束布局，但未能解决问题。 然后我尝试使用weight来完成这项任务，但并没有帮助我:(

UPDATE

为framelayout和imageview添加点击处理程序后：

Answer 1

尝试为FrameLayout和ImageView都编写onClick侦听器，因为ImageView现在可以覆盖FrameLayout而您只有这个很小的区域，而ImageView没有覆盖。 这应该有所帮助。

Answer 2

您需要将点击侦听器添加到不在imageview上的框架布局中。 在这种情况下，你frameLayout将作为您的imageView 。

    holder.frameLayout.setOnClickListener(view -> {

 if (invisible) {
                holder.layout.setVisibility(View.VISIBLE);
                invisible = false;
                holder.showHideBtn.setImageResource(R.drawable.ic_up_arrow);
            } else {
                holder.layout.setVisibility(View.GONE);
                invisible = true;
                holder.showHideBtn.setImageResource(R.drawable.down_arrow);
            }

        });

Answer 3

删除您的Framelayout并像这样设置ImageView

    <ImageView
        android:id="@+id/expand_btn"
        android:layout_width="wrap_content"
        android:layout_gravity="bottom"
        android:layout_alignBottom="@id/name_of_service"
        android:layout_alignParentEnd="true"
        android:scaleType="fitEnd"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_start" />

您的图片将占据整个右侧，并使用fitEnd将图标放置在底部。

Answer 4

我设法通过constraint_layout解决了我的问题：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">

    <RelativeLayout
        android:id="@+id/relLay"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#F2F2F2"
        app:layout_constraintHorizontal_weight="0.7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/testClick"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />


    </RelativeLayout>


    <FrameLayout
        android:id="@+id/testClick"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#F2F2F2"
        app:layout_constraintBottom_toBottomOf="@id/relLay"
        app:layout_constraintHorizontal_weight="0.3"
        app:layout_constraintLeft_toRightOf="@+id/relLay"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/expand_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/down_arrow" />
    </FrameLayout>


    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/relLay">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

也许会帮助别人。 祝好运 ：）