我們在手機上經常看到一堆選項,但是我們只能選擇一個,那么在Android中,這個控件就叫做RadioButton,也就是單選按鈕的意思,他們之所以能夠達到只能選擇一個的效果,是因為有一個RadioGroup這樣一個組件。
這次,我們就來詳細的解說一下RadioButton和RadioGroup這兩個控件的關系和區別,以及如何去使它們默契的搭配在一起~
要實現RadioButton由兩部分組成,也就是RadioButton和RadioGroup配合使用,其中RdioGroup是單選組合框,可以容納多個RadioButton的一個容器。在沒有RadioGroup的情況下,RadioButton可以全部被選中;當多個RadioButton被RadioGroup包含的情況下,RadioButton只可以選擇一個,從而達到了單選的目的。並用setOnCheckChangeLinstener()來對單選按鈕進行監聽。
RadioGroup的相關屬性:
1.RadioGroup.getCheckedRadioButtonId();
該方法可以獲取選中的按鈕
2.RadioGroup.clearCheck();
該方法可以清除選中狀態
3.setOnCheckedChangeLintener(RadioGroup.OnCheckedChangeListener listener);
當一個單選按鈕組中的單選按鈕選中狀態發生改變的時候調用的回調方法
4.RadioGroup.check(int id);
該方法可以通過傳入ID來設置該選項為選中狀態
5.addView(View child,int index, ViewGroup.LayoutParams params);
使用指定布局參數添加一個字視圖(其中child是要添加的子視圖,index是將要添加子視圖的位置,params 所要添加的子視圖的布局參數)
6.RadioButton.getText();
獲取單選框的值
此外,RadioButton的checked屬性設置為true,代碼里調用RadioButton的check(id)方法,不會觸發onCheckedChanged事件
然后,我們來看一下RadioButton和RadioGroup的關系:
1.RadioButton表示單個原型單選框,而RadioGroup是可以容納多個RadioButton的容器
2.每個RadioGroup中的RadioButton同時只能有一個被選中
3.不同的RadioGroup中的RadioButton互不相干,即如果組A中有一個選中了,那么組B中依然可以有一個被選中。
4.在大部分場合下,一個RadioGroup中至少有兩個RadioButton
5.在大部分場合下,一個RadioGroup中的RadioButton默認會有一個被選中,並建議您將它放在RadioGroup的起始位置
我們繼續來看一下RadioButton和CheckBox的區別(是與CheckBox哦~):
1.單個RadioButton選中之后,通過點擊無法變為未選中
單個CheckBox在選中后,通過點擊可以變為未選中
2.一組RadioButton,只能同時選中一個
一組CheckBox,能同時選中多個
3.RadioButton在大部分UI框架中默認都以圓形表示
CheckBox在大部分UI框架中默認都以矩形表示
然后,我們來做一個小案例,來進一步的解釋說明RadioButton和RadioGroup
二話不說,我們先上圖
今天哈,我們就用RadioButton和RadioGroup來實現我們上面的這個小案例。
首先,我們來分析一下,我們想要實現這個案例都需要准備寫什么吧
我們根據上面的圖,我們能看出來,我們需要圖片~然而需要幾張呢?這里事需要6張的哦!我們看起來是三張圖片,但是當我們點擊的時候,我們會發現圖片變色了, 這就是另一張圖片了。所以,我們需要准備6張圖片。
這是資源。
接下來,我們來分析一下,我們都需要創建什么配置文件
不用想,我們首先必須要有一個主界面的布局文件,並且放上三個RadioButton,用一個RadioGroup把這三個RadioButton包裹起來,並設置相應屬性
然后,我們還需要在drawable目錄下創建一個改變字體顏色的配置文件,和三個改變圖片的配置文件
然后,我們再來分析一下,在Activity中,我們應該如何去做
首先,我們需要獲取到這個RadioGroup,然后為其設置點擊事件,在點擊事件中,我們實現點擊按鈕彈出一個吐司
好了,我們的分析就暫時到這里,接下來,我們根據我們的分析來做具體的實現
第一步、我們先來創建主界面的布局文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="application.smile.myapplicationdemo.MainActivity"> <RadioGroup android:id="@+id/rg" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorBackground" android:orientation="horizontal"> <RadioButton android:id="@+id/radioButton_xiaoxi" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/bottom_icon_iamge_selector_xiaoxi" android:gravity="center" android:text="消息" android:textColor="@drawable/bottom_icon_text_selector" /> <RadioButton android:id="@+id/radioButton_lianxiren" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/buttom_icon_image_selector_lianxiren" android:gravity="center" android:text="聯系人" android:textColor="@drawable/bottom_icon_text_selector" /> <RadioButton android:id="@+id/radioButton_dongtai" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/bottom_icon_image_selector_dongtai" android:gravity="center" android:text="動態" android:textColor="@drawable/bottom_icon_text_selector" /> </RadioGroup> </LinearLayout>
在這里,我們解釋一下其中上面沒有介紹到的屬性
android:drawableTop 屬性是用來將指定的圖片顯示到RadioButton的頂部,為了方便我們下面放文字
第二步、我們來看改變字體顏色的配置文件:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:color="@color/colorWhite"></item> 這個是白色 <item android:state_checked="true" android:color="@color/colorRed"></item> 這個是橘黃色 </selector>
第三步、我們來看改變那三張圖片的配置文件:
改變“消息”:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/xiaoxi_unchecked" android:state_checked="false"></item> <item android:drawable="@mipmap/xiaoxi_selected" android:state_checked="true"></item> </selector>
改變“聯系人”:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@mipmap/lianxiren_unchecked"></item> <item android:state_checked="true" android:drawable="@mipmap/lianxiren_selected"></item> </selector>
改變“動態”:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@mipmap/dongtai_unchecked"></item> <item android:state_checked="true" android:drawable="@mipmap/dongtai_selected"></item> </selector>
我們來詳細的看一下這些文件中的屬性
其中android:state_checked 屬性是設置狀態的,如果是選中狀態,就為true,否則為false。后面對應的 android:drawable 屬性就是對應的圖片
第四步、我們來看Activity中的具體實現:
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { //通過findViewById()來找到我們需要的RadioGroup RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg); //設置狀態改變的事件 radioGroup.setOnCheckedChangeListener(this); } /** * 重寫的狀態改變的事件的方法 * @param group 單選組合框 * @param checkedId 其中的每個RadioButton的Id */ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { //根據不同ID 彈出不同的吐司 switch (group.getCheckedRadioButtonId()){ case R.id.radioButton_xiaoxi: Toast.makeText(this, "你點擊了“消息”按鈕", Toast.LENGTH_SHORT).show(); break; case R.id.radioButton_lianxiren: Toast.makeText(this, "你點擊了“聯系人”按鈕", Toast.LENGTH_SHORT).show(); break; case R.id.radioButton_dongtai: Toast.makeText(this, "你點擊了“動態”按鈕", Toast.LENGTH_SHORT).show(); break; } } }
根據我們的思路,我們實現了這樣的一個小案例,我們來測試一下吧。
這樣,我們就完美的實現了我們的小案例。
讓程序寫入生命,將代碼融入靈魂
-------smile、zj