安卓实现ios7样式单选按钮

luoyjx · 2015-01-11 16:02 · 875次阅读

在安卓中想要实现像ios7中的radiobutton怎么办呢?

好说,用shape就可以实现。

先看看ios7中radiobutton是什么样子的。

如图所见,要不怎么说ios用户体验做的好呢。

分析一下,发现其实用android中的shape来实现足够了。

分析:

  1. 最左边和最右边的靠边的圆角有一定的角度,而和其他按钮连接的地方基本是没有角度的。
  2. 如果出现中间的按钮,那么也不需要圆角了。
  3. 按钮上的字可以通过selector中的check属性来调整颜色。
  4. 需要注意的是,在选中的按钮上,也是有边框的,不然两个按钮高度会差了边框的宽度那么多,由于右边的空心按钮是用边框来实现的,所以左边实心按钮也需要加边框。

实现过程:

    我们最终要做出的应该是一套selector,包括:最左、中间和最右这三种。

    而在每个selector中又需要两种状态的shape,即选中和没选中的。

    那么我们先列出最终的文件名清单吧:

  1. 最左selector: ios7_radio_left_selector.xml
  2. 最左选中的shape:ios7_radio_left_check.xml
  3. 最左未选中shape:ios7_radio_left_uncheck.xml
  4. 中间selector: ios7_radio_middlle_selector.xml
  5. 中间选中的shape:ios7_radio_ middlle _check.xml
  6. 中间未选中shape:ios7_radio_ middlle _uncheck.xml
  7. 最右selector: ios7_radio_right_selector.xml
  8. 最右选中的shape:ios7_radio_right_check.xml
  9. 最右未选中shape:ios7_radio_right_uncheck.xml

    来举例实现其中一组,那么其他的也就可以举一反三了。

    清单: ios7_radio_left_selector.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_checked="true" 
          android:drawable="@drawable/ios7_radio_left_check" /> <!-- 选中时 -->  
    <item android:state_checked="false"  
          android:drawable="@drawable/ios7_radio_left_uncheck" /> <!-- 未选中 -->  
    
</selector>

     清单: ios7_radio_left_check.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners -- 四个角的圆角半径,左边右边中间的区别就是在这里体现的
        android:topLeftRadius="5dp"
        android:bottomLeftRadius="5dp" 
        android:topRightRadius="0.1dp"
        android:bottomRightRadius="0.1dp" />
    
    <stroke    -- 指定边框,边框必须要的
        android:width="0.5dp"
        android:color="#0000ff" />
    <solid    -- 填充颜色,选中和未选中的区别就在这里还有文字颜色
        android:color="#0000ff" />
</shape>

    清单: ios7_radio_left_uncheck.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners  -- 四个角的圆角半径,左边右边中间的区别就是在这里体现的
        android:topLeftRadius="5dp"
        android:bottomLeftRadius="5dp" 
        android:topRightRadius="0.1dp"
        android:bottomRightRadius="0.1dp" />
    
    <stroke    -- 指定边框,边框必须要的
        android:width="0.5dp"
        android:color="#0000ff" />
    <solid    -- 填充颜色,选中和未选中的区别就在这里还有文字颜色
        android:color="#ffffff" />
</shape>

    好了,有了这三个例子,中间的组成和最右边的组成也很容易就修改出来了。

    

    使用:

  1. 将radiobutton的background设为各个部位的selector。
  2. 按钮的textColor属性也做成并赋值为 一个selector。

    好了,这样就实现了类似ios7风格的RadioButton了,有什么好的想法或者建议可以在评论中留言给我。

暂无评论

登录后可以进行评论。没有账号?马上注册