当前位置:   article > 正文

RadioButton自定义样式显示_radiobutton样式

radiobutton样式

背景

最近在开发一个自己的项目,用到的是大多数主流框架,底部几个选项,中间是对应选项的界面。像微信和QQ等。我的这个项目底部采用的是RadioGroup,然后里面包含了4个RadioButton,我的这种是一种实现方法,当然有很多其他的实现方法:像自定义一个底部布局也是可以实现的。好了不多说了,下面是实现的过程。


xml实现

如下所示:

<?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="wrap_content">

    <RadioGroup
        android:id="@+id/rg_main_bottom"
        android:weightSum="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:button="@null"
            android:drawableTop="@drawable/menu_main_selector"
            android:padding="10dp"
            android:text="@string/page1"
            android:checked="true"
            android:textSize="14sp"
            android:gravity="center_horizontal"
            android:id="@+id/rb_main_page1"
            android:layout_weight="0.25"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <View
            android:background="@android:color/darker_gray"
            android:layout_width="1px"
            android:layout_height="match_parent"/>

        <RadioButton
            android:drawableTop="@drawable/menu_discovery_selector"
            android:gravity="center_horizontal"
            android:textSize="14sp"
            android:button="@null"
            android:padding="10dp"
            android:text="@string/page2"
            android:id="@+id/rb_main_page2"
            android:layout_weight="0.25"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <View
            android:background="@android:color/darker_gray"
            android:layout_width="1px"
            android:layout_height="match_parent"/>

        <RadioButton
            android:drawableTop="@drawable/menu_friend_selector"
            android:gravity="center_horizontal"
            android:textSize="14sp"
            android:button="@null"
            android:padding="10dp"
            android:text="@string/page3"
            android:id="@+id/rb_main_page3"
            android:layout_weight="0.25"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <View
            android:background="@android:color/darker_gray"
            android:layout_width="1px"
            android:layout_height="match_parent"/>

        <RadioButton
            android:drawableTop="@drawable/menu_mine_seletor"
            android:gravity="center_horizontal"
            android:textSize="14sp"
            android:button="@null"
            android:padding="10dp"
            android:text="@string/page4"
            android:id="@+id/rb_main_page4"
            android:layout_weight="0.25"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </RadioGroup>

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

界面显示

这里写图片描述

  • 上面的RadioButton中显示图片用的是drawableTop属性,这样可以使图片和文本上下显示,优化用户体验。
  • button属性设置为null可以使radioButton自己的样式清除。

如下所示:

这里写图片描述

这里写图片描述

radioButton选中的时候需要一个图片,未选中的时候也需要一个图片,上面的drawableTop属性设置即可实现,用到的一个selector如下所示:

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

    <!-- 设置选择和未选中时显示的drawable -->
    <item android:state_checked="false" android:drawable="@drawable/menu_main_origin"/>

    <item android:state_checked="true" android:drawable="@drawable/menu_main"/>

</selector>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

上面的state_checked属性值为false表示未选中,state_checked属性的值为true表示选中。


A little bit of progress every day!Come on!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/733675
推荐阅读
相关标签
  

闽ICP备14008679号