您的位置:首页 > 移动开发 > Android开发

3个按钮选一个 颜色产生变化 android button

2015-03-03 11:23 363 查看


这个是效果图

因为button的shape 不支持selected 所以这里用RadioButton

下面上代码

全部是采用xml书写

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/more_white"
android:gravity="center"
android:orientation="horizontal" >

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
android:layout_marginTop="14dp"
android:orientation="horizontal" >

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="@drawable/button_background"
android:orientation="horizontal" >

<RadioButton
android:id="@+id/teacher"
android:layout_width="73dp"
android:layout_height="25dp"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:background="@drawable/btn_left"
android:button="@null"
android:gravity="center"
android:text="教师"
android:textColor="@drawable/btn_color"
android:textSize="14sp" />

<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="@color/orange_base" />

<RadioButton
android:id="@+id/parent"
android:layout_width="73dp"
android:layout_height="25dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:background="@drawable/btn_middle"
android:button="@null"
android:gravity="center"
android:text="家长"
android:textColor="@drawable/btn_color"
android:textSize="14sp" />

<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="@color/orange_base" />

<RadioButton
android:id="@+id/student"
android:layout_width="73dp"
android:layout_height="25dp"
android:layout_marginBottom="1dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:background="@drawable/btn_right"
android:button="@null"
android:gravity="center"
android:text="学生"
android:textColor="@drawable/btn_color"
android:textSize="14sp" />
</RadioGroup>

<Button
android:id="@+id/all"
android:layout_width="73dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:background="@drawable/button_base"
android:gravity="center"
android:text="全选"
android:textColor="@drawable/btn_color"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>

</LinearLayout>


下面是几个shape

左边

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<shape >
<solid android:color="@color/orange_base"/>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp"/>
</shape>
</item>
<item>
<shape >
<solid android:color="@color/more_white"/>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp"/>
</shape>
</item>

</selector>


中间

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<shape >
<solid android:color="@color/orange_base"/>
</shape>
</item>
<item>
<shape >
<solid android:color="@color/more_white"/>
</shape>
</item>

</selector>


右边

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<shape >
<solid android:color="@color/orange_base"/>
<corners
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item>
<shape >
<solid android:color="@color/more_white"/>
<corners
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>

</selector>


右边一个全选按钮 这个是点击的时候颜色变化 点击后颜色回复原来的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"><shape>
<solid android:color="@color/orange_base" />

<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

<stroke android:width="1dp" android:color="@color/more_white" />
</shape></item>
<item><shape>
<solid android:color="@color/more_white" />

<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

<stroke android:width="1dp" android:color="@color/orange_base" />
</shape></item>
</selector>


这是这里面用到的btn_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:color="@color/more_white"></item>
<item android:state_checked="true" android:color="@color/more_white"></item>
<item android:color="@color/orange_base"></item>

</selector>


颜色值的16位数

<color name="more_text_color">#020202</color>
<color name="more_listitem_background_color">#fdfdfc</color>
<color name="more_listitem_pressed_background_color">#99fdfdfc</color>
<color name="more_white">#ffffff</color>
<color name="more_feedback_textcolor">#000000</color>
<color name="orange_base">#f46200</color>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: