多个布局中奇怪的单选按钮行为

时间：2018-05-09 13:27:05

标签： android android-relativelayout android-radiobutton

我有一个布局，每个图像下面有三个图像和三个单选按钮。我希望如果选中一个按钮，那么我知道用户已经选择了上面的图像。这是我的布局文件：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal">

        <LinearLayout
            android:id="@+id/frontRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/frontShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioFrontImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/sideRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@id/frontRadioLayout"
            android:layout_marginLeft="16dp">

            <ImageView
                android:id="@+id/sideShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioSideImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/backRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@id/sideRadioLayout"
            android:layout_marginLeft="16dp">

            <ImageView
                android:id="@+id/backShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioBackImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

    </RelativeLayout>

布局正确呈现但测试时会出现这种情况 - 所有按钮都会被选中并且无法取消选中。我已经尝试将我的布局简化为：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal">

        <ImageView
            android:id="@+id/frontShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_hair_tools" />

        <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_marginLeft="33dp"/>

        <ImageView
            android:id="@+id/sideShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_hair_tools"
            android:layout_toRightOf="@+id/frontShotIV"
            android:layout_marginLeft="16dp"/>

        <RadioButton
            android:id="@+id/radioSideImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_toRightOf="@+id/frontShotIV"
            android:layout_marginLeft="46dp"/>

        <ImageView
            android:id="@+id/backShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:src="@drawable/ic_hair_tools"
            android:scaleType="centerCrop"
            android:layout_toRightOf="@+id/sideShotIV"
            android:layout_marginLeft="16dp"/>

        <RadioButton
            android:id="@+id/radioBackImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/backShotIV"
            android:layout_toRightOf="@+id/sideShotIV"
            android:layout_marginLeft="46dp"/>

    </RelativeLayout>

但它仍然产生相同的检查所有行为。 任何人都可以帮我解决这个问题，使用布局单选按钮单独检查并取消选中另一个选项吗？ 感谢。

2 个答案:

答案 0 :(得分：0)

您需要将RadioButton放入RadioGroup。 例如：

 <RadioGroup
       android:id="@+id/radioGroup1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >
       <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_marginLeft="33dp"/>
 </RadioGroup>

来自Google文档：

  

但是，由于单选按钮是互斥的，因此必须分组   他们一起在RadioGroup里面。通过将它们组合在一起，   系统确保一次只能选择一个单选按钮。

或者，您可以使用CheckBox

有关详细信息，请查看原始文档：

https://developer.android.com/guide/topics/ui/controls/radiobutton?authuser=0

答案 1 :(得分：0)

如果我已正确理解您的要求。您希望允许用户只选择三个图像中的一个图像。

然后您必须使用RadioButton

转到RadioGroup

因为使用无线电组，您可以轻松识别选择的图像。而无线电组将允许用户一次只选择一个选项。

您可以按照this示例进行尝试。 activity.xml 

<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"
tools:context=".Main4Activity">

<LinearLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/frontShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />

    <ImageView
        android:id="@+id/sideShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />

    <ImageView
        android:id="@+id/backShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />
</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout">

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:layout_marginLeft="60dp"
            android:gravity="center_horizontal" />


        <RadioButton
            android:id="@+id/radioSideImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:layout_marginLeft="90dp"
            android:layout_toRightOf="@+id/frontShotIV"
            android:gravity="center_horizontal" />


        <RadioButton
            android:id="@+id/radioBackImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/backShotIV"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="4dp" />
    </RadioGroup>
</LinearLayout>

<Button
    android:id="@+id/btnCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="166dp"
    android:text="Check selected Image"/></RelativeLayout>

Activity.java：

public class Main4Activity extends AppCompatActivity {

private RadioGroup radiogroup;
private RadioButton radioFrontImg;
private RadioButton radioSideImg;
private RadioButton radioBackImg;
private RadioButton radioButton;
private Button btnCheck;
private String selectedImage;


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

    init();

}

private void init() {
    radiogroup = findViewById(R.id.radiogroup);
    radioFrontImg = findViewById(R.id.radioFrontImg);
    radioSideImg = findViewById(R.id.radioSideImg);
    radioBackImg = findViewById(R.id.radioBackImg);
    btnCheck = findViewById(R.id.btnCheck);
    btnCheck.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            method1();
            method2();
        }
    });
}

private void method2() {
    if (radioFrontImg.isChecked()) {
        selectedImage = "frontShotIV";
    } else if (radioSideImg.isChecked()) {
        selectedImage = "sideShotIV";
    } else if (radioBackImg.isChecked()) {
        selectedImage = "backShotIV";
    }
    Toast.makeText(getApplicationContext(), selectedImage, Toast.LENGTH_LONG).show();
    Log.e("selectedImage", selectedImage);

}

private void method1() {
    int selectedId = radiogroup.getCheckedRadioButtonId();
    radioButton = (RadioButton) findViewById(selectedId);
    if (selectedId == R.id.radioFrontImg)
        selectedImage = "frontShotIV";
  else if (selectedId == R.id.radioSideImg)
        selectedImage = "sideShotIV";
  else if (selectedId == R.id.radioBackImg)
        selectedImage = "backShotIV";
    Toast.makeText(Main4Activity.this, selectedImage, Toast.LENGTH_SHORT).show();
    Log.e("selectedImage",selectedImage);
}

}

您可以使用两种方法。

相关问题
最新问题