RadioButton 如何做到页面的显示和切换

最新推荐文章于 2023-11-27 10:43:23 发布

「已注销」

最新推荐文章于 2023-11-27 10:43:23 发布

阅读量3.8k

点赞数 1

分类专栏：安卓文章标签：安卓底部布局radiobutton做

本文链接：https://blog.youkuaiyun.com/ss1573/article/details/78757522

版权

安卓专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何使用RadioButton和RadioGroup在Android中实现页面的显示和切换效果。通过创建底部RadioButton布局，中间显示内容的FramLayout，以及在Activity中处理点击事件，详细展示了具体步骤和关键代码，帮助读者理解如何利用RadioButton实现页面动态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RadioButton是一个按钮，是一组按钮，它的作用是用来切换的,

 
 
  
  在实际的项目中，我们经常都是RadioButton和RadioGroup一起配合使用。RadioGroup是单选组合框，可以容纳多个RadioButton的容器。在没有RadioGroup的情况下，RadioButton可以全部都选中；当多个RadioButton被RadioGroup包含的情况下，RadioButton只可以选中一个。并用setOnCheckedChangeListener来对单选按钮进行监听。
 
 
 
 
  
       
  
  众所周知，
  
  RadioGroup
  
  只能够通过设置
  
  radioGroup.setOrientation()
  
  实现纵向或者横向排列，并且只能是一列或者一行，并且
  
  RadioGroup
  
  中还只能直接放
  
  RadioButton
  
  ，但在实际项目中我们大都是需要实现上面的效果，所以简单的封装了一个，取名为：
  
  XRadioGroup
  
  。
  
  
那么为了做出这个底部导航的效果，我们看具体一步一步来实现：首先中间要准备显示的内容就是四个布局，那么这四个布局靠的就是一个帧布局，，，但是这四个小的布局不能够全部写在帧布局里面把，如果全部都写在里面那么可能就会出现，如果全部写在里面那么，布局就太大了，太复杂了，底部就是四个按钮，就是上面这一组radioButton，也是一个布局：首先我们来创建下面一组布局：
一、创建底部的RadioButton布局<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RadioGroup
        android:id="@+id/group12"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/radioButton4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="RadioButton" />
    </RadioGroup>
</LinearLayout>
二、创建中间的要显示内容的布局，这个要显示内容的布局就可以用一个FramLayout来做，首先把它三个子布局分别创建出来，每一个子布局也可以是一个Fragment，当然这里还没有用到
1.这个是layout_0,layout_1,layout_2;都是一样的；
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    android:layout_height="match_parent">

</LinearLayout>
2.将三个layout小布局都添加到一个framlayout里面这就可以了，取名为framlayoutall
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/layout_0"
       />
    <include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"
        layout="@layout/layout_1"        />    <include        android:layout_width="match_parent"        android:layout_height="match_parent"
        android:visibility="invisible"
        layout="@layout/layout_2"        /></FrameLayout>
三、在将下面的按钮布局和这个framlayout<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.administrator.layout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"

        >
        <include
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:id="@+id/include_fram"
            layout="@layout/framlayoutall"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        >
        <include
            layout="@layout/radio_button"
            />
    </LinearLayout>
</LinearLayout>
写到这里布局基本就完成，我们使用隐藏和显示来做，在framlayout中有个属性visibility，如果invisible的是不可见，但是占位置，如果值是gone那么就是可不见也不占位置，现在就是三个RadioButton，操控三个layout了，现在就开始在activty中用代码来实现把
四、看actvity中具体的实现
1.我们需要首先找到这三个radioButton，用fingviewByid（）这个方法找到就是一个具体控件，可以用对象数组来装它：就是下面这个private RadioButton[] radioButton=new RadioButton[3];
 private LinearLayout[] linearLayout=new LinearLayout[3];
radioButton[0]=(RadioButton)findViewById(R.id.radioButton2);
radioButton[1]=(RadioButton)findViewById(R.id.radioButton3);
radioButton[2]=(RadioButton)findViewById(R.id.radioButton4);
linearLayout[0]= (LinearLayout) findViewById(R.id.include_0);
linearLayout[1]= (LinearLayout) findViewById(R.id.include_1);
linearLayout[2]= (LinearLayout) findViewById(R.id.include_2);
2.下面的操作就是RadioButton点击进行切换了，那么它有什么点击事件呢？OnCheckedChangeListener（），注意是这方法，同时注意在这里是RadioGroup设置并不是给什么radiobutton设置，同是在这里找线性布局的id时，我们找的是include里面的id，你可以试试如果把id设置在最初的那个Linalayout试下自己能否找到吧。。



  
  //在这里有几点要特别的注意就是第一个第一设置的监听事件是直接给RadioGroup设置的，第二个我的这个中间几个布局的id是在帧布局中的include，里面每一个include设置的，第三：调用view.setability()方法、虽然现在我们是通过inclde引入的，那么可以还是直接通过findviewbyid（），找到它直接的底层id进行修改的；
  
  

  
  

  
  

  
  

  
  

  
  public class MainActivity extends AppCompatActivity {
   private RadioButton[] radioButton=new RadioButton[3];
    private LinearLayout[] linearLayout=new LinearLayout[3];
    private RadioGroup radioGroup;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        radioGroup=(RadioGroup)findViewById(R.id.group12);
        radioButton[0]=(RadioButton)findViewById(R.id.radioButton2);
        radioButton[1]=(RadioButton)findViewById(R.id.radioButton3);
        radioButton[2]=(RadioButton)findViewById(R.id.radioButton4);
        linearLayout[0]= (LinearLayout) findViewById(R.id.include_0);
        linearLayout[1]= (LinearLayout) findViewById(R.id.include_1);
        linearLayout[2]= (LinearLayout) findViewById(R.id.include_2);

          radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
          {
              @Override
              public void onCheckedChanged(RadioGroup group, @IdRes int checkedId)
              {
                  Log.e("msg",checkedId+"checkedId");
                  switch(checkedId)
                  {
                      case R.id.radioButton2:
                          Log.e("msg",R.id.radioButton2+"R.id.radioButton2");

                          changeradio(0);
                          break;
                      case R.id.radioButton3:
                          changeradio(1);
                          break;
                      case R.id.radioButton4:
                          changeradio(2);
                          break;
                  }
              }
          });



    }

    int old=0;
    public void changeradio(int i)
    {
        Log.e("msg",i+"");
        linearLayout[old].setVisibility(View.INVISIBLE);
        linearLayout[i].setVisibility(View.VISIBLE);
        old=i;
    }
}