Android技巧之shape实现控件圆角，背景，边框等属性

转载请标明出处：http://blog.csdn.net/joker_ya/article/details/38638481

好咧，今天带给大家的是一个UI上的小技巧。就是使用shape来实现输入框、按钮等控件的圆角。该方法对于UI的设计来说非常实用。

还是老规矩，上图：

接下来就是shape的讲解：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle"    ><!-- 其中rectagle表示矩形，oval表示椭圆，line表示水平直线，ring表示环形 -->    <!-- 节点属性介绍如下 -->    <corners />    <!-- 节点1：corners(圆角)    android:radius圆角的半径 值越大角越圆      android:topLeftRadius左上圆角半径      android:topRightRadius右上圆角半径    android:bottomLeftRadius左下圆角半径    android:bottomRightRadius右下圆角半径    -->        <gradient />    <!-- 节点2： gradient (背景颜色渐变)    android:startColor 起始颜色android:centerColor中间颜色android:endColor 末尾颜色android:angle 渐变角度，必须为45的整数倍。android:type 渐变模式 默认是linear(线性渐变)radial(环形渐变)android:centerX X坐标android:centerYY坐标android:gradientRadius radial(环形渐变)时需指定半径    -->        <padding />    <!-- 节点3： padding (定义内容离边界的距离)    android:left 左部边距        android:top顶部边距        android:right 右部边距        android:bottom底部边距    -->        <size />    <!-- 节点4：size (大小)    android:width 指定宽度    android:height 指定高度     -->         <solid />    <!-- 节点5：solid (填充)     android:color 指定填充的颜色    -->        <stroke /><!-- 节点6：stroke (描边) android:width 描边的宽度        android:color 描边的颜色       把描边弄成虚线的形式"- - -":        android:dashWidth 表示'-'这样一个横线的宽度        android:dashGap 表示之间隔开的距离--></shape></span>

好了接下来就看例子了，新建一个项目ShapeDemo。目录如下：

shape_rectangle_button.xml代码：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle"    >    <corners         android:radius="10dip"        />    <solid         android:color="#8DEEEE"        />    <size         android:width="250dip"        android:height="25dip"        />    <stroke         android:width="2dip"        android:color="#000000"        /></shape></span>

shape_oval_button.xml代码：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval"    >    <corners         android:radius="10dip"        />    <solid         android:color="#787878"        />    <size         android:width="300dip"        android:height="50dip"        />    <stroke         android:width="2dip"        android:color="#000000"        /></shape></span>

shape_layout.xml代码：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle"    >    <corners         android:radius="10dip"        /><gradient     android:startColor="#FFC0CB"    android:centerColor="#FF83FA"    android:endColor="#CAFF70"    android:angle="90"        />    </shape></span>

其他的就不贴了。那个shape="line"就是一条直线来的。故此没有给出例子。

最后给出activity_main.xml代码：

<span style="font-size:18px;"><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"    android:background="@drawable/shape_layout"    tools:context=".MainActivity" >    <LinearLayout         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical"        >        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="按钮："            android:textSize="25sp"            />    <Button         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/no_changed"        />    <Button         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dip"        android:text="@string/changed_rectangle"        android:background="@drawable/shape_rectangle_button"        />    <Button         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dip"        android:text="@string/changed_oval"        android:background="@drawable/shape_oval_button"        />       </LinearLayout>        <LinearLayout         android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_marginTop="20dip"        android:orientation="vertical"        >    <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="输入框："            android:textSize="25sp"            />    <EditText         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dip"        android:hint="@string/no_changed"        />    <EditText         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dip"        android:hint="@string/changed_rectangle"        android:background="@drawable/shape_rectangle_edittext"        />    </LinearLayout></LinearLayout></span>

好了，今天就讲到这里了。怎么样？是不是非常的简单。还有很多没有尝试，大家不妨自己试试。

源码下载地址：

源码下载