使用RadioButton自定义样式实现喜马拉雅底部的切换功能

效果展示

布局文件的书写

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

    <RadioGroup
            android:id="@+id/radiogroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            >
        <RadioButton
                android:id="@+id/rabt01"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton01_bg"
                android:text="@string/search_name"
                android:textColor="#272727"
                android:gravity="center"
                android:paddingLeft="5dp"

                />

        <RadioButton
                android:id="@+id/rabt02"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton02_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="@string/down_name"
                android:textColor="#272727"
                />
        <RadioButton
                android:id="@+id/rabt03"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton03_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="@string/ting_name"
                android:textColor="#272727"
                />

        <RadioButton
                android:id="@+id/rabt04"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton04_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:includeFontPadding="true"
                android:text="@string/my_name"
                android:textColor="#272727"
                android:checked="false"
                />

    </RadioGroup>
</RelativeLayout>

radiobutton背景选择器

<?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/bg101"></item>
    <item android:drawable="@drawable/bg102"></item>

</selector>
<?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/bg201"></item>
    <item android:drawable="@drawable/bg202"></item>

</selector>
<?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/bg301"></item>
    <item android:drawable="@drawable/bg302"></item>
</selector>
<?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/bg401"></item>
    <item android:drawable="@drawable/bg402"></item>
</selector>

activity书写

package com.ht.myapp150427;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends Activity {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        RadioButton radioButton01 = (RadioButton) findViewById(R.id.rabt01);
        RadioButton radioButton02 = (RadioButton) findViewById(R.id.rabt02);
        RadioButton radioButton03 = (RadioButton) findViewById(R.id.rabt03);
        RadioButton radioButton04 = (RadioButton) findViewById(R.id.rabt04);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkID) {
                switch (checkID) {
                    case R.id.rabt01:
                        radioButton01.setTextColor(Color.rgb(220, 20, 60));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt02:
                        radioButton02.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt03:
                        radioButton03.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt04:
                        radioButton04.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        break;
                }

            }
        });

    }
}

改进

??我们也可以把字体颜色的改变写一个背景选择器,这样就可以省去在代码中写监听器了。

项目代码下载地址

https://github.com/zhujainxipan/radiogroup

知识讲解

??在android开发中,往往我们需要自定义RadioButton中button图片和文字的距离,经过多番查找资料,得知解决办法如下:

  • android:[email protected];//将默认的button图片清空
  • android:[email protected]/radiobutton;//使用该属性定义button图片
  • android:[email protected];//将radioButton的背景设为空
  • android:drawablePadding=6dp;//将文字和左侧的button图片相距6dp
  • button/drawableLeft/background/drawablePadding结合使用方可改变文字和图片的距离 ;

?

另外就是android选择器的知识点

?

radiogroup中如果嵌套布局,radiobutton就可以多选了,就不是我们想要的效果了。

?

android对资源文件的大小有限制,图片最大1m。

感恩:

RadioButton设置了gravity=center,发现文字还不居中,求指导

http://www.eoeandroid.com/thread-273181-1-1.html

Android RadioGroup中的RadioButton竟然能多选?

http://www.eoeandroid.com/thread-67458-1-1.html

http://blog.csdn.net/libaineu2004/article/details/41550447

Android中如何设置RadioButton在文字的右边,图标在左边?

http://www.2cto.com/kf/201208/150848.html

Android自定义radiobutton(文字靠左,选框靠右)

http://blog.csdn.net/helldevil/article/details/7963174

自定义RadioButton样式并去除默认样式位置

http://blog.csdn.net/shenyuemei/article/details/22172793

android自定义RadioGroup的RadioButton中文字和图片的距离

http://www.eoeandroid.com/thread-103444-2-1.html

Android radiobutton图片与文字间距的问题

http://www.oschina.net/question/222459_56046

时间: 2024-08-08 05:37:34

使用RadioButton自定义样式实现喜马拉雅底部的切换功能的相关文章

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

原文:WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合控件的样式定义: 二.ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二.DataGrid自定义样式 DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大): DataGrid控件样式结构包括以下几个部分: 列头header样式 调整列头宽度的列分割线样式 行样式 行头调整高度样式 行头部样式

WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定义样式,及Label标签.水印.清除日期功能扩展: 二.Calendar自定义样式 先看看效果: 从上面图可以看出,日历的显示其实有三种状态,如下面的分解图: "日"部分的显示: "月"部分的显示: &qu

如何用RadioButton做一个底部的切换栏

上面的效果是用Radio进行制作的,一般我们做底部的切换栏的时候需要让按钮和文字都有一个选中的状态,然后根据点击不同的按钮触发不同的页面,这里的页面一般都是fragment做的.这里我们不讨论复杂的东西,只是讲如何实现这样的效果.这里的关键点是中间的按钮和两边的按钮没有互斥关系,仅仅是一个独立的ImageView,还有就是按钮的文字需要根据选中的状态进行变化,按钮的图片需要根据状态进行变化. 一.定义按钮的图片和文字效果 我们在res中建立一个color的目录,建立一个main_bottomba

Dialog详解(包括进度条、PopupWindow、自定义view、自定义样式的对话框)

Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发,展现了andorid中大部分对话框,代码中用了一个对话框管理类来做封装,其中还定义了对话框的动画.自定义样式等等. 主布局文件(全是button) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.co

radiobutton设置样式

单选题里会用到radiobutton,如果不想使用系统提供的圆圈样式,可以自定义样式,想要做成的效果就是, 使用自定义的图片替换圆圈,然后选择有4个选项的其中一个,图片上有个对勾标记, 然后如果正确选项是帅哥,则选择A后,图片替换成 所以首先在xml属性里,将自定义的图片替换圆圈:关键就是 android:button="@drawable/c" 这一句: <RadioButton android:id="@+id/radio2" android:layout

KM盒子视频教程-怎样使用自定义样式功能

首先我们需要先了解下,KM盒子软件生成网页模式APP的源文件目录结构. 我们通过右键导出webapp来看下源文件的目录结构. 生成网页模式APP的源文件目录结构 自定义样式主要通过重写html/css/mobile.css文件进行实现. 试下修改头部和底部的样式 增加一行代码试下修改头部和底部的样式: .ui-page .ui-header, .ui-page .ui-footer{background: #BD0001;color:#ffffff;border:1px solid #76000

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. 在DataGrid中的最高水平,你可以改变的外观和感觉,通过设置一些: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式: <!--DataGrid样式-->    <Style TargetType="DataGrid">        <Setter Property="RowHeaderWidth" Value="0"></Setter>        <Setter Property="AutoGenerateColumns"