选中时如何将 strokeColor 应用于 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

Link

Update //如何将fragment中选中的cardView传入acitivity

Donate_Fragment

// 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 // 这是 activity 我想从片段

中获取选定的 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:

selector.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 中测试时；我在 MaterialCaredView 布局上得到了 NPE，那是因为将 app:checkedIcon="@null" 设置为空，要解决此问题，请将 app:checkedIcon="@null" 替换为 app:checkedIcon="@android:color/transparent"

Answer 2

好的，我已经像这样解决了第二个问题并且成功了

好的，我知道这是实现 if() 的一种非常糟糕的方法，但如果您有更好的解决方案，请更新此答案

// Donate Btn
        donateBtn = view.findViewById(R.id.donateBtn);
        donateBtn.setOnClickListener(view12 -> {
            if (cardView1.isChecked()) {
                makePayment1();
            }
            if (cardView2.isChecked()) {
                makePayment2();
            }
            if (cardView3.isChecked()) {
                makePayment3();
            }
            if (cardView4.isChecked()) {
                makePayment4();
            }
            if (cardView5.isChecked()) {
                makePayment5();
            }
            if (cardView6.isChecked()) {
                makePayment6();
            }
        });

选中时如何将 strokeColor 应用于 cardView

How to apply strokeColor to cardView when selected

xml

android

android-layout

android-cardview

更新