用RadioButton和shape实现仿QQ界面标题栏

概要

哈哈，没有考试一身轻松~上午小打了一会儿代码把这个功能实现了，我们来一点一点的完成QQ界面！

实现效果

我们这回要做的是这个

再来看一下我们的效果

大家再向下看之前可以先想一下我们会用到什么~

知识点补充

1.关于RadioButton

首先要知道什么是RadioButton，我想写过html的朋友已经不会陌生，就是一个单选框

就是这样，我们通常用一个RadioGroup来规定一组，每组可以有多个RadioButton，用户只能在这组中的RadioButton中选择一个，至于具体操作的API会在代码注释中给出

2.关于用selector来设置按钮特效

我们会经常看到一个按钮在被点下去时会显示一个点击效果（比如点击时是白色，不点击时是橘黄色）

这个我们通常是写一个xml文件，里面指定点击前和点击后的图片，然后再按钮设置的background里面设置为这个xml文件即可，Demo里面会有详细的实现说明

3.关于shape

android允许我们用xml画一些简单的图案，比如一个橘黄色的圆角矩形....

下面是关于shape的详尽说明

1.格式

在xml文件里

<shape xmlns:android= "http://schemas.android.com/apk/res/android"
        android:shape= "rectangle"
        android:useLevel= "false" >
    </shape>

指定形状等相关信息，然后在shape中写具体的内容。shape用来指定形状，至于useLevel跟LevelListDrawable有关，我们就不做讨论了，尽管把它设置成false

2.部分相关控件解释

具体使用方法请看demo，这里只提供一些控件解释

<corners
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"/>

这个是圆角，属性分别是各个角的圆角半径

<gradient
    android:startColor="@android:color/white"
    android:centerColor="#ff9500"
    android:endColor="#eeeeee"
    android:angle="45"
    android:type="radial"
    android:centerX="0"
    android:centerY="0"
    android:gradientRadius="90"/>

渐变，分别是设置渐变的开始颜色、中间颜色、结尾颜色、渐变角度、渐变类型（我们这里设置的是放射状）、渐变点位置、渐变半径...这些具体还是要大家亲自试一下，具体感受一下比较好，下面是效果图（有点丑...就那个意思哈~哈~哈~哈....）

    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/>

间隔

    <size
        android:width="50dp"
        android:height="50dp"/>

大小

    <solid
        android:color="@android:color/white"/>

填充的颜色

    <stroke
        android:width="2dp"
        android:color="@android:color/black"/>   

描边，这个我们会用到，要注意当width设置为dip（弧度）时的特效

DEMO

大体就说这些吧，开始我们的demo

首先，主体部分我们已经学习过了，所以怎么切换fragment就不说了，有疑问的请看之前的文章或是给我留言，谢谢

我们要实现的其实只是一个标题栏而已，关于怎么设置标题栏之前也有说明，其实设置他的方法还有一种，用include...以后再说，我们还是用老方法，这里就不再说明了，着重说明一下界面，下面是这个标题栏的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="#ff9500"
    >

        <ImageButton
            android:layout_width="5dp"
            android:layout_height="25dp"
            android:background="@drawable/home_nave_icon_more_default"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            />

这里是标题栏最左边的三个小点，这节先不给他加功能

<p>
</p>    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_centerInParent="true">

这里提醒一下 layout_centerInParent="true" 是用来设置布局在父布局的中间开始向两边展开

    <RadioGroup
        android:layout_width="wrap_content"
<pre>        android:layout_height="wrap_content"
        android:orientation="horizontal">

 这里开始就是单选按钮了，他们同在这个RadioGroup里

<RadioButton
        android:button="@null"
        android:layout_marginLeft="15dp"
        android:gravity="center"
        android:id="@+id/main_top_notice"
        android:checked="true"
        android:layout_width="71dp"
        android:layout_height="30dp"
        android:text="消息"
        android:textSize="18dp"
        android:textColor="#000000"
        android:background="@drawable/tittle_left_button"/>

按钮的通常设置，这里注意一下

tittle_left_button

这个不是随随便便的一个图案，我们随后会说明这个xml

    <RadioButton
        android:button="@null"
        android:layout_marginRight="15dp"
        android:id="@+id/main_top_reminder"
        android:gravity="center"
        android:clickable="true"
        android:layout_width="71dp"
        android:layout_height="30dp"
        android:text="电话"
        android:textSize="18dp"
        android:textColor="#000000"
        android:background="@drawable/right_button"/>
    </RadioGroup>

    </LinearLayout>
    <ImageButton
        android:id="@+id/main_top_overflow"
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:paddingRight="12dp"
        android:background="@null"
        android:src="@drawable/home_tab_icon_home_default" />

    </RelativeLayout>

以上都是简单到爆的按钮设置不做详细说明，下面我们就

tittle_left_button.xml 的布局来说明一下按钮的特效

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tittle_button" android:state_checked="false"/>
    <item android:drawable="@drawable/tittle_button_pressed" android:state_checked="true"/>
</selector>

就是这样，设置为点击之前是一个图片，点击之后又是一个图片，但是我们的这两个又不是简简单单的图片，也是一个xml文件

我们就 tittle_button.xml 来解释一下

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android= "http://schemas.android.com/apk/res/android"
        android:shape= "rectangle"
        android:useLevel= "false" >
        <solid android:color= "#ff9500" />
        <size android:height="30dp"
            android:width="61dp"/>
        <corners
            android:topLeftRadius="18dp"
            android:topRightRadius="0dp"
            android:bottomLeftRadius="18dp"
            android:bottomRightRadius="0dp" />
        <stroke
            android:width="1dip"
            android:color="#ffffff" />

    </shape>

具体的控件的意思我们之前已有说明，就不再赘述了

最后再用老套路给按钮设置点击事件切换fragment就可以了！！

感想

关于技术方面没什么想说的，一点一点学呗，不想做推脱将就的人，不做一件事情需要千万个借口：

"我不适合写算法，我想做软件！” 

“我不适合做软件，我想学信安~”

“写博客有卵用，还不如睡会儿觉~”

所以，告诉自己坚持下去，记得前一阵子前微软中国总裁高群耀来我们学校讲座，其中有一句话让我印象特深，就当成今天的每日一句送给大家吧

每日一句

你不做重要的事，就得做紧急的事

解释：高群耀教授说这世上有两种事，一种是重要的，一种是紧急的，优秀的人一般都在做重要的事，比如锻炼身体是重要的事，生病医治是紧急的事；努力学习是重要的事，考试高分是紧急的事...然后他举了一个例子：在五星级的酒店，假如客人正在预订房间，这时提供订房服务的人员突然手机来电话了，服务人员一般都会选择接通：“喂，您好，现在正有一位客人，一会给您拨回去”然后挂断接待客人