自定义RadioButton样式1

原创

gundumw100 2023-04-07 10:06:27 ©著作权

文章标签 android sed xml 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者gundumw100的原创作品，请联系作者获取转载授权，否则将追究法律责任

主要是布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<RadioGroup android:gravity="center"
		android:layout_gravity="bottom" 
		android:orientation="horizontal"
		android:layout_width="fill_parent" 
		android:layout_height="wrap_content" >
		<RadioButton 
		    android:id="@+id/btn_0"
			android:textSize="17.0sp" 
			android:textColor="@android:color/black"
			android:text="搜索微博"
			android:layout_weight="1" 
			android:button="@null"
			android:checked="true"
			android:drawableLeft="@drawable/state_radio"
			android:background="@drawable/state_btn"
			android:gravity="center_vertical"
			>
		</RadioButton>
		<RadioButton 
		    android:id="@+id/btn_1"
			android:textSize="17.0sp" 
			android:textColor="@android:color/black"
			android:text="搜索用户"
			android:layout_weight="1" 
			android:button="@null"
			android:drawableLeft="@drawable/state_radio"
			android:background="@drawable/state_btn"
			android:gravity="center_vertical"
			>
		</RadioButton>
	</RadioGroup>
</LinearLayout>

其中state_radio.xml

<?xml version="1.0" encoding="utf-8"?><selector
	xmlns:android="http://schemas.android.com/apk/res/android"
	>
	<item
		android:state_focused="false"
		android:state_checked="false"
		android:state_pressed="false"
		android:drawable="@drawable/bg_radio"
		>
	</item>
	<item
		android:state_focused="false"
		android:state_checked="true"
		android:state_pressed="false"
		android:drawable="@drawable/bg_radio_selected"
		>
	</item>
	<item
		android:state_focused="true"
		android:state_checked="false"
		android:state_pressed="false"
		android:drawable="@drawable/bg_radio_onfocus"
		>
	</item>
	<item
		android:state_focused="true"
		android:state_checked="true"
		android:state_pressed="false"
		android:drawable="@drawable/bg_radio_onfocus_selected"
		>
	</item>
</selector>

state_btn.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> 
       <item android:state_window_focused="false"      
             android:drawable="@drawable/bg_btn"/>  
       <item android:state_focused="true" android:state_pressed="true"         
             android:drawable="@drawable/bg_btn_selected" />  
       <item android:state_focused="false" android:state_pressed="true"    
             android:drawable="@drawable/bg_btn_selected" />  
</selector>

上面的写法有点拖沓，采用style可能会更简单：

<?xml version="1.0" encoding="utf-8"?> <resources> 
<style name="CustomTheme" parent="android:Theme"> 
   <item name="android:radioButtonStyle">@style/RadioButton</item> 
</style> 
<style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton"> 
   <item name="android:button">@drawable/radio</item> 
</style> 
</resources>

radio.xml:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_checked="true" android:state_window_focused="false" 
        android:drawable="@drawable/radio_hover" /> 
    <item android:state_checked="false" android:state_window_focused="false" 
        android:drawable="@drawable/radio_normal" /> 
    <item android:state_checked="true" android:state_pressed="true" 
        android:drawable="@drawable/radio_active" /> 
    <item android:state_checked="false" android:state_pressed="true" 
        android:drawable="@drawable/radio_active" /> 
    <item android:state_checked="true" android:state_focused="true" 
        android:drawable="@drawable/radio_hover" /> 
    <item android:state_checked="false" android:state_focused="true" 
        android:drawable="@drawable/radio_normal_off" /> 
    <item android:state_checked="false" android:drawable="@drawable/radio_normal" /> 
    <item android:state_checked="true" android:drawable="@drawable/radio_hover" /> 
</selector>

实现分断Button，模仿MIUI设置页面顶部Button