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

转载请标明出处：/article/10736880.html

好咧，今天带给大家的是一个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:centerY	Y坐标
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>

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

源码下载地址：

源码下载