RadioGroup Realizes Multi line Arrangement of Radio Boxes

  • 2021-11-13 18:23:34
  • OfStack

The use of RadioGroup is very simple, just 1 general case, can only be horizontal or vertical arrangement. If let more horizontal arrangement is not so simple.

Maybe there are children's shoes to say, will RadioButton be written into LineLayout soon? After testing, I can do that, and I did it at first. But when I ran it, I found an bug-the radio button is no longer a radio button. And the selection event will not be monitored. This requires us to find a way. In fact, it is not difficult to implement. Just use a few more RadioGroup (to handle 1 event in the code).

On the code:

1. Layout in 1. xml:


<RelativeLayout
  android:id="@+id/main_tab_container"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:paddingTop="30dp">

  <RadioGroup
   android:id="@+id/radio1"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="GBP Pound sterling " />

   <RadioButton
    android:id="@+id/rb_2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="HKD Hong Kong dollar " />

   <RadioButton
    android:id="@+id/rb_3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="USD US dollar Ԫ" />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio2"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio1"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="CHF Swiss franc " />

   <RadioButton
    android:id="@+id/rb_5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="SGD Singapore dollar " />

   <RadioButton
    android:id="@+id/rb_6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="SEK Swedish kronor " />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio3"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio2"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="JPY Japanese yen " />

   <RadioButton
    android:id="@+id/rb_8"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="CAD Canadian dollar Ԫ" />

   <RadioButton
    android:id="@+id/rb_9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="AUD Australian dollar " />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio4"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio3"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/RB_text_size"
    android:text="EOR Euro Ԫ" />

  </RadioGroup>

</RelativeLayout>

This is a multi-line layout, which is just one part of my layout, where android: textSize= "@ dimen/RB_text_size" is the font size defined by myself.

2. Use and handling in 2. activity:


public class SelectMoneyActivity extends BaseActivity {


 String strBtnSelected = "";   // Record which option is selected 

 private RadioGroup rg1, rg2, rg3, rg4;
 private RadioButton rb_1, rb_2, rb_3, rb_4, rb_5, rb_6, rb_7, rb_8, rb_9, rb_10;

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

  initView();

 }


 private void initView() {

  rg1 = (RadioGroup) findViewById(R.id.radio1);
  rg2 = (RadioGroup) findViewById(R.id.radio2);
  rg3 = (RadioGroup) findViewById(R.id.radio3);
  rg4 = (RadioGroup) findViewById(R.id.radio4);

  rb_1 = (RadioButton) findViewById(R.id.rb_1);
  rb_2 = (RadioButton) findViewById(R.id.rb_2);
  rb_3 = (RadioButton) findViewById(R.id.rb_3);
  rb_4 = (RadioButton) findViewById(R.id.rb_4);
  rb_5 = (RadioButton) findViewById(R.id.rb_5);
  rb_6 = (RadioButton) findViewById(R.id.rb_6);
  rb_7 = (RadioButton) findViewById(R.id.rb_7);
  rb_8 = (RadioButton) findViewById(R.id.rb_8);
  rb_9 = (RadioButton) findViewById(R.id.rb_9);
  rb_10 = (RadioButton) findViewById(R.id.rb_10);

  btn_back = (Button) findViewById(R.id.btn_back);
  btn_next = (Button) findViewById(R.id.btn_next);

// Create listeners for each RadioButton Register monitor 

  BtnSelected btnSelected1 = new BtnSelected("1");
  BtnSelected btnSelected2 = new BtnSelected("2");
  BtnSelected btnSelected3 = new BtnSelected("3");
  BtnSelected btnSelected4 = new BtnSelected("4");
  BtnSelected btnSelected5 = new BtnSelected("5");
  BtnSelected btnSelected6 = new BtnSelected("6");
  BtnSelected btnSelected7 = new BtnSelected("7");
  BtnSelected btnSelected8 = new BtnSelected("8");
  BtnSelected btnSelected9 = new BtnSelected("9");
  BtnSelected btnSelected10 = new BtnSelected("10");

  rb_1.setOnClickListener(btnSelected1);
  rb_2.setOnClickListener(btnSelected2);
  rb_3.setOnClickListener(btnSelected3);
  rb_4.setOnClickListener(btnSelected4);
  rb_5.setOnClickListener(btnSelected5);
  rb_6.setOnClickListener(btnSelected6);
  rb_7.setOnClickListener(btnSelected7);
  rb_8.setOnClickListener(btnSelected8);
  rb_9.setOnClickListener(btnSelected9);
  rb_10.setOnClickListener(btnSelected10);


// Listener for click events 
 public class BtnSelected implements View.OnClickListener {

  private String btnId;

  public BtnSelected(String str) {
   btnId = str;
  }

  @Override
  public void onClick(View v) {
   strBtnSelected = btnId;        // Selected a 1 Items 
   isSelect = true;
   // Click on the number 1 Line, empty the clicked items of another line 
   if (btnId.equals("1") || btnId.equals("2") || btnId.equals("3")) {

    rg2.clearCheck();
    rg3.clearCheck();
    rg4.clearCheck();
   } else if (btnId.equals("4") || btnId.equals("5") || btnId.equals("6")) {
    rg1.clearCheck();
    rg3.clearCheck();
    rg4.clearCheck();
   } else if (btnId.equals("7") || btnId.equals("8") || btnId.equals("9")) {
    rg1.clearCheck();
    rg2.clearCheck();
    rg4.clearCheck();
   } else {
    rg1.clearCheck();
    rg2.clearCheck();
    rg3.clearCheck();
   }
  }
 }
}

It's done. Another way is to customize the RadioGroup implementation, but this is a bit complicated. I went home from work anyway.

Additional:

Use RadioGroup. setcheck (id of RadioButton) to initialize the problem that the A button is selected by default, but listening will not be performed

Solution: Because check= "true" has been set in the layout for the A button; Removing this property will enable listening.


Related articles: