如何从多个 Cardview 中选择一个 Cardview

Question

我想从 3 个卡片视图中选择性别，用户无法选择多个卡片视图，用户只能选择一个卡片视图 像这样：

我知道我也可以使用微调器来完成这项工作，但我想知道如何处理卡片视图

已编辑

.......................
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="select Gender"
    android:textColor="@color/black"
    android:textSize="30sp"
    android:textStyle="bold" />

<androidx.cardview.widget.CardView
    android:id="@+id/maleCardView"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_margin="16dp"
    android:elevation="6dp"
    app:cardElevation="6dp">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Male"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:layout_gravity="center"
        android:textSize="22sp"/>
    
    
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/femaleCardView"
    android:layout_width="0dp"
    android:layout_height="70dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Female"/>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/otherCardView"
    android:layout_width="0dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Other"/>
    
</androidx.cardview.widget.CardView>
.............

Answer 1

输出

在CardView 中使用RadioButton 不适用于RadioGroup，您必须在CardView 中单独添加每个单选按钮并手动处理检查选择和取消选择。试试下面的代码：

主布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
<LinearLayout
    android:id="@+id/radioGrpGender"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_centerInParent="true"
    android:layout_marginTop="30dp"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/txtGender"
        android:layout_width="match_parent"
        android:text=""
        android:gravity="center"
        android:layout_height="wrap_content"/>
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_margin="5dp"
        app:cardCornerRadius="50dp"
        app:cardElevation="7dp"
        android:layout_height="50dp">
        <RadioButton
            android:id="@+id/radioMale"
            android:text="Male"
            android:paddingStart="10dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </androidx.cardview.widget.CardView>
    <androidx.cardview.widget.CardView

        android:layout_width="match_parent"
        android:layout_margin="5dp"
        app:cardCornerRadius="50dp"
        android:layout_height="50dp">
        <RadioButton
            android:id="@+id/radioFemale"
            android:text="Female"
            android:paddingStart="10dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </androidx.cardview.widget.CardView>
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_margin="5dp"
        app:cardCornerRadius="50dp"
        android:layout_height="50dp">
        <RadioButton
            android:id="@+id/radioOther"
            android:text="Other"
            android:paddingStart="10dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </androidx.cardview.widget.CardView>
</LinearLayout>

radio_flat_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/radio_flat_selected" 
 android:state_checked="true" />
<item android:drawable="@drawable/radio_flat_regular" />

radio_flat_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners android:radius="1dp" />
  <solid android:color="#D2FFDF" />
</shape>

radio_flat_regular.xml

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <solid android:color="#ffffff" />
 </shape>

主要 Java 代码：

public class YourActivityName extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {


private RadioButton radioMale;
private RadioButton radioFemale;
private RadioButton radioOther;
private TextView txtGender;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout_nanme);

    radioMale = findViewById(R.id.radioMale);
    radioFemale = findViewById(R.id.radioFemale);
    radioOther = findViewById(R.id.radioOther);
    txtGender = findViewById(R.id.txtGender);

    radioMale.setOnCheckedChangeListener(this);
    radioFemale.setOnCheckedChangeListener(this);
    radioOther.setOnCheckedChangeListener(this);

}


@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

    if (isChecked) {
        txtGender.setText(buttonView.getText().toString());
        if (R.id.radioMale == buttonView.getId()) {
            radioFemale.setChecked(false);
            radioOther.setChecked(false);
        } else if (R.id.radioFemale == buttonView.getId()) {
            radioMale.setChecked(false);
            radioOther.setChecked(false);
        } else {
            radioFemale.setChecked(false);
            radioMale.setChecked(false);
        }
    }
  }
}

Answer 2

由于您有 3 个卡片视图，您只需在 Activity 上实现一个 onClickListener，并将这 3 个视图设置为该侦听器。所以在你的 Activity 中应该是这样的：

    public class MainActivity extends AppCompatActivity implements View.onClickListener{
      ...
      CardView male;
      CardView female;
      CardView other; 
    
    
      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            male = (CardView)findViewById(R.id.maleCardView);
            female = (CardView)findViewById(R.id.femaleCardView);
            other = (CardView)findViewById(R.id.otherCardView);
            //Set listeners to your view
            male.setOnClickListener(this);
            female.setOnClickListener(this);
            other.setOnClickListener(this);
      }

      @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.maleCardView:
                Toast.makeText(this,"MALE",Toast.LENGTH_LONG).show;
                break;
            case R.id.femaleCardView:
                Toast.makeText(this,"MALE",Toast.LENGTH_LONG).show;
                break;
            case R.id.otherCardView:
                Toast.makeText(this,"MALE",Toast.LENGTH_LONG).show;
                break;
        }
    }
    
 }

处理完侦听器后，您可以相应地更改视图并将答案存储在数组中。

重要提示：上面的代码未经测试，我只是尝试给你一个大致的想法，它可能会按原样工作，但我不能肯定地说。