选择时如何将描边颜色应用于cardView

Question

我想知道如何将描边颜色应用于卡片视图 onClick 并在再次单击时取消选择它

另外，我有多个卡片视图，因此如果已经选择了一个卡片视图并应用了描边颜色，但如果用户单击另一个卡片视图，则描边颜色从第一个卡片视图中消失并应用于受尊重的卡片视图

我怎样才能实现这个目标？

现在我已将描边颜色应用于一张卡片视图

正如进一步说明的那样，我想CardView在单击捐赠按钮时获取所选的 ID 或金额，并将卡视图（金额）传递到支付网关。

它看起来是这样的：

donate_fragment.xml // 仅卡片视图部分和按钮

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:text="@string/select_an_amount"
        android:textColor="@color/white"
        android:textSize="25sp"
        android:textStyle="bold|normal" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            app:strokeColor="@color/wallet_holo_blue_light"
            app:strokeWidth="3dp"
            android:layout_marginEnd="10dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_0_5"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:layout_marginEnd="10dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_1"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_5"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>


    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:layout_marginEnd="10dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_10"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:layout_marginEnd="10dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_50"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.card.MaterialCardView
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:backgroundTint="@color/Card_Elevation_Color"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="10dp"
            app:cardElevation="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/_100"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold|normal" />
        </com.google.android.material.card.MaterialCardView>


    </LinearLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/donateBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="45dp"
        android:text="@string/donate"
        android:textAlignment="center"
        android:textSize="17sp"
        app:cornerRadius="10dp" />

实现答案后，这就是结果 // 谢谢@Zain

关联

更新//如何将选定的cardView从fragment传递并获取到acitivity中

捐赠_片段

// Donate Btn  // navigating to the Activity

    donateBtn = view.findViewById(R.id.donateBtn);
    donateBtn.setOnClickListener(view12 -> {
        Intent intent = new Intent(getActivity(), donate_final_activity.class);
        if (cardView1.isChecked()) {
            startActivity(intent);
        }
        if (cardView2.isChecked()) {
            startActivity(intent);
        }
        if (cardView3.isChecked()) {
            startActivity(intent);
        }
        if (cardView4.isChecked()) {
            startActivity(intent);
        }
        if (cardView5.isChecked()) {
            startActivity(intent);
        }
        if (cardView6.isChecked()) {
            startActivity(intent);
        }


    });

donate_activity.java // 这是我想要从片段中获取选定的cardViews的活动

public class donate_final_activity extends AppCompatActivity {
    MaterialButton donateBtn;
    TextView selectedAmt;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.final_donate_activity);
        // just trying to get something from the fragment  but didnt understand how to do it
        Donate_Fragment donate_fragment = new Donate_Fragment();
        donate_fragment.getView();
       // end of trying haha ha

        selectedAmt = findViewById(R.id.selectedAmt); // also i want to set the text after getting the cardView for eg if cardView6 was seleceted i want to setText to 100 $

        //Donate btn // this the final button when the payment gateway will open
        donateBtn = findViewById(R.id.donateBtn_final);
        donateBtn.setOnClickListener(view -> {
            if (cardView1.isChecked()){  // ofcourse this is not working as i didn't get the selected carView (or i say the listener) , i just keep it so you can get a understanding of what im trying to achive
                makePayment1();
            }
            if (cardView2.isChecked()) {
                makePayment2();
            }
            if (cardView3.isChecked()) {
                makePayment3();
            }
            if (cardView4.isChecked()) {
                makePayment4();
            }
            if (cardView5.isChecked()) {
                makePayment5();
            }
            if (cardView6.isChecked()) {
                makePayment6();
            }
        });
    }

Answer 1

您可以使用描边颜色选择器来更改state_checked：

选择器.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#36B3E0" android:state_checked="true" />
    <item android:color="@android:color/transparent" android:state_checked="false" />
</selector>

将其应用到CardView：

app:checkedIcon="@null"
app:strokeColor="@drawable/selector"
android:checkable="true"

checkedIcon被选中的卡设置为没有勾选图标。

然后更改检查状态OnClickListener

但在此之前，请使用其周围的 清除所有选中的卡片ViewGroup，这是一个扩展函数：

fun ViewGroup.clearCardSelection() {
    this.children.forEach {
        if (it is MaterialCardView)
            it.isChecked = false
    }
}

还有听者：

val listener = View.OnClickListener {
    if (it is MaterialCardView) {
        val isChecked = it.isChecked
        linearlayout1.clearCardSelection() // top LinearLayout
        linearlayout2.clearCardSelection() // bottom LinearLayout
        it.isChecked = !isChecked
    }
}
cardView.setOnClickListener(listener) // repeat this for the 6 cards

这是结果：

确保永久保存检查的卡状态，以避免在配置更改期间丢失它。

更新

这是 java 的等价物：

private void clearCardSelection(LinearLayout layout) {
    for (int i = 0; i < layout.getChildCount(); i++) {
        View child = layout.getChildAt(i);
        if (child instanceof MaterialCardView)
            ((MaterialCardView) child).setChecked(false);
    }
}


View.OnClickListener listener = view -> {
    if (view instanceof MaterialCardView) {
        MaterialCardView card = (MaterialCardView) view;
        boolean isChecked = card.isChecked();
        clearCardSelection(linearlayout1);
        clearCardSelection(linearlayout2);
        card.setChecked(!isChecked);
    }
};

cardView.setOnClickListener(listener); // repeat for all the cards

当我在java中测试时；我在布局上得到了 NPE MaterialCaredView，那是因为设置app:checkedIcon="@null"为 null，要解决此问题，请替换app:checkedIcon="@null"为app:checkedIcon="@android:color/transparent"