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

来源：互联网发布：appium python脚本编辑：程序博客网时间：2024/06/03 17:55

概要

哈哈，没有考试一身轻松~上午小打了一会儿代码把这个功能实现了，我们来一点一点的完成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就可以了！！

感想

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

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

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

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

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

每日一句

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

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

0 0