码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-14 21:13:16      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:markdown   views   lin   each   xmlns   androi   string   字体   vertica   

这个是我非常久曾经实现的了,当时记录到我有道云笔记里面,翻阅笔记的时候,发现了这个东西的存在,打算分享给大家,可能对大家来说已经不是什么新奇货了。可是能够帮助新学的了解一下android xml相关的知识。

首先我来看两张效果图:
技术分享

技术分享

看到这两张图片,可能对于非常多新学Android的同学来说,第一时间想到的可能就是RadioGroup里面包裹两个RadioButton按钮,然后分别设置其背景图片。由于当时我接手的几个残缺项目(别人没有做完就跑了)大概都是这样实现的。

由于这种原因,我才认为事实上xml+RadioGroup全然能够实现相同的效果(当然还有其它非常多方式哈)。

第一步,我们先分析下这个界面,尽管非常easy,可是还是有值得注意的地方。

(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切换button,纯代码实现,告别图片

标签:markdown   views   lin   each   xmlns   androi   string   字体   vertica   

原文地址:http://www.cnblogs.com/ljbguanli/p/7359769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!