首页 > 开发 > 前端 > 正文

仿QQ切换按钮,纯代码实现,告别图片

2016-04-15 12:50:16  来源:极客头条

  这个是我很久以前实现的了,当时记录到我有道云笔记里面,翻阅笔记的时候,发现了这个东西的存在,打算分享给大家,可能对大家来说已经不是什么新鲜货了,但是可以帮助新学的了解一下android xml相关的知识。
  首先我来看两张效果图:
这里写图片描述
  这里写图片描述
  看到这两张图片,可能对于很多新学Android的同学来说,第一时间想到的可能就是RadioGroup里面包裹两个RadioButton按钮,然后分别设置其背景图片。因为当时我接手的几个残缺项目(别人没有做完就跑了)大概都是这样实现的。因为这样的原因,我才觉得其实xml+RadioGroup完全可以实现同样的效果(当然还有其他很多方式哈)。
  第一步,我们先分析下这个界面,虽然很简单,但是还是有值得注意的地方。
  (1)整个RadioGroup的背景是白色的,选中的时候RadioButton的背景是黄色,字体颜色为白色
  (2)当未选中的时候背景为白色,字体颜色为黄色
  (3)最外面的RadioGroup的弧度和RadioButton的弧度保持一致
  (4)里面RadioButton与RadioGroup之间存在一定的距离
  第二步,通过上面简单的分析,我们大体在心中知道了应该怎么样做了吧,现在我们就来简单的实现一下,
  首先书写我们的布局:RadioGroup包裹两个RadioButton按钮
                                             通过以上简单的代码,我们可以实现以下的效果:
  这里写图片描述
  是不是很丑?没事后面我会详细的一步一步的讲解,
  1.我们先来实现RadioGroup的弧度,
在res->drawable下新建shape_radiogroup_bg.xml,写入以下代码:
             然后将 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 ,写入以下代码:
     然后分别在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
  一共六个,是不是有点多?其实很多都是一样的,
代码分别为:
                                                                                             然后分别在RadioButton去引用这个两个xml,
  android:background=”@drawable/selector_radiobutton_bg_left”,
  android:background=”@drawable/selector_radiobutton_bg_right”
  之后便是给我们的文字设置颜色了,新建:/res/drawable/radiobutton_text_selector.xml
         之后使用android:textColor=”@drawable/radiobutton_text_selector” 引用我们的radiobutton_text_selector.xml文件,到此,就完成了所有的代码了。小伙伴赶快也试一试吧。