仿QQ切换按钮,纯代码实现,告别图片
来源:互联网 发布:足球彩票缩水软件 编辑:程序博客网 时间:2024/04/30 06:29
这个是我很久以前实现的了,当时记录到我有道云笔记里面,翻阅笔记的时候,发现了这个东西的存在,打算分享给大家,可能对大家来说已经不是什么新鲜货了,但是可以帮助新学的了解一下android xml相关的知识。
首先我来看两张效果图:
看到这两张图片,可能对于很多新学Android的同学来说,第一时间想到的可能就是RadioGroup里面包裹两个RadioButton按钮,然后分别设置其背景图片。因为当时我接手的几个残缺项目(别人没有做完就跑了)大概都是这样实现的。因为这样的原因,我才觉得其实xml+RadioGroup完全可以实现同样的效果(当然还有其他很多方式哈)。
第一步,我们先分析下这个界面,虽然很简单,但是还是有值得注意的地方。
(1)整个RadioGroup的背景是白色的,选中的时候RadioButton的背景是黄色,字体颜色为白色
(2)当未选中的时候背景为白色,字体颜色为黄色
(3)最外面的RadioGroup的弧度和RadioButton的弧度保持一致
(4)里面RadioButton与RadioGroup之间存在一定的距离
第二步,通过上面简单的分析,我们大体在心中知道了应该怎么样做了吧,现在我们就来简单的实现一下,
首先书写我们的布局:RadioGroup包裹两个RadioButton按钮
<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" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ff6d00" > <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="5dp" android:background="#ffffff" android:orientation="horizontal" > <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RadioGroup> </RelativeLayout></LinearLayout>
通过以上简单的代码,我们可以实现以下的效果:
是不是很丑?没事后面我会详细的一步一步的讲解,
1.我们先来实现RadioGroup的弧度,
在res->drawable下新建shape_radiogroup_bg.xml,写入以下代码:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 设置弧度 --> <corners android:radius="100dp" /> <!-- 设置颜色 --> <solid android:color="#ffffff" /></shape>
然后将 RadioGroup的android:background=”#ffffff”,这个属性
修改成android:background=”@drawable/shape_radiogroup_bg”
即,引用我们刚刚写好的shape_radiogroup_bg.xml
2.现在我需要对RadioButton做一些手脚了在我们的res->values下新建style_radiobutton_left.xml,style_radiobutton_right.xml ,写入以下代码:
<?xml version="1.0" encoding="utf-8"?><resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="radiobutton_left"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">40dp</item> <item name="android:layout_marginLeft">2dp</item> <item name="android:layout_marginRight">0dp</item> <item name="android:layout_marginTop">2dp</item> <item name="android:layout_marginBottom">2dp</item> <item name="android:gravity">center</item> <item name="android:button">@null</item> <item name="android:textSize">18sp</item> <item name="android:width">70dp</item> </style></resources>
<?xml version="1.0" encoding="utf-8"?><resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="radiobutton_right"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">40dp</item> <item name="android:layout_marginLeft">0dp</item> <item name="android:layout_marginRight">2dp</item> <item name="android:layout_marginTop">2dp</item> <item name="android:layout_marginBottom">2dp</item> <item name="android:gravity">center</item> <item name="android:button">@null</item> <item name="android:textSize">18sp</item> <item name="android:width">70dp</item> </style></resources>
然后分别在RadioButton去引用这个两个xml, style=”@style/radiobutton_left”,style=”@style/radiobutton_left”。现在的效果图为:
接下来,我们就需要给每一个RadioButton去选中和未选中的背景颜色,在我们的res->drawable下分别新建以下xml:
/res/drawable/selector_radiobutton_bg_left.xml
/res/drawable/selector_radiobutton_bg_right.xml
/res/drawable/shape_radiobutton_left_.xml
/res/drawable/shape_radiobutton_left.xml
/res/drawable/shape_radiobutton_right_.xml
/res/drawable/shape_radiobutton_right.xml
一共六个,是不是有点多?其实很多都是一样的,
代码分别为:
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_radiobutton_left" android:state_checked="true"></item> <item android:drawable="@drawable/shape_radiobutton_left_" android:state_checked="false"></item></selector>
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_radiobutton_right" android:state_checked="true"></item> <item android:drawable="@drawable/shape_radiobutton_right_" android:state_checked="false"></item></selector>
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 填充的颜色 --> <solid android:color="#ffffff" /> <!-- 设置按钮的四个角为弧形 --> <!-- android:radius 弧形的半径 --> <corners android:radius="100dip" /></shape>
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 填充的颜色 --> <solid android:color="#Ff6d00" /> <!-- 设置按钮的四个角为弧形 --> <!-- android:radius 弧形的半径 --> <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="0dp" android:topLeftRadius="20dp" android:topRightRadius="0dp" /></shape>
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 填充的颜色 --> <solid android:color="#ffffff" /> <!-- 设置按钮的四个角为弧形 --> <!-- android:radius 弧形的半径 --> <corners android:radius="100dip" /></shape>
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 填充的颜色 --> <solid android:color="#Ff6d00" /> <!-- 设置按钮的四个角为弧形 --> <!-- android:radius 弧形的半径 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="20dp" android:topLeftRadius="0dp" android:topRightRadius="20dp" /></shape>
然后分别在RadioButton去引用这个两个xml,
android:background=”@drawable/selector_radiobutton_bg_left”,
android:background=”@drawable/selector_radiobutton_bg_right”
之后便是给我们的文字设置颜色了,新建:/res/drawable/radiobutton_text_selector.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:color="#ff6d00"></item> <item android:state_checked="true" android:color="#ffffff"></item> </selector>
之后使用android:textColor=”@drawable/radiobutton_text_selector” 引用我们的radiobutton_text_selector.xml文件,到此,就完成了所有的代码了。小伙伴赶快也试一试吧。
- 仿QQ切换按钮,纯代码实现,告别图片
- 纯js +css 仿flash 图片切换效果代码
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- 纯原生javascript实现图片轮播切换效果代码。
- 使用:target实现点击按钮切换图片的功能(纯CSS)
- 纯js图片切换幻灯片代码
- 纯代码实现图片预览
- 纯css3实现图片自动切换
- Android 仿ios 可滑动切换效果按钮 实例代码
- iOS开发 ----- 仿QQ实现滑动显示后边按钮
- 仿QQ界面切换简单实现-ViewPager、Fragment
- 高仿QQ首页消息和电话切换的实现
- JavaScript 两个按钮,实现图片的切换
- Android 图片实现按钮点击切换效果
- Android 图片实现按钮点击切换效果
- 点击按钮实现图片的切换
- highchart动态添加点,并改变点的颜色为红色
- UIViewAnimationOptions类型
- Java内存访问重排序的研究
- Android小程序-Walker注册页面校验(三)
- SublimeText 配置lua开发环境
- 仿QQ切换按钮,纯代码实现,告别图片
- 代码阅读工具使用入门
- 地理空间距离计算优化
- 鼠标经过或触摸图片放大镜效果
- 剑指offer 数值的整数次方
- 添加打印机出现错误代码:0x000006d9
- MySQL索引原理及慢查询优化
- TortoiseSVN图标介绍
- 初识ngrok