Android layer-list shape corners

Android的图片资源应用非常广泛,它们可以很容易的被绘制到screen,同时设定图片资源的方式也有很多种,例如可以通过类似getDrawable(int)的API获取,也或或则可以通过在XML资源里设定,例如通过设定属性android:drawable 和 android:icon,来设定图片资源。同样我们也有很多种类型的图片资源,例如:Bitmap FileNine-Patch FileLayer ListState ListLevel ListTransition DrawableInset DrawableClip DrawableScale DrawableShape Drawable等。详细介绍请访问:Drawable Resources

那么这章向大家介绍的是其中一种类型:Shape Drawable,以下是有关的一些基础知识的介绍:

 

This is a generic shape defined in XML.

file location:
res/drawable/filename.xml
The filename is used as the resource ID.
compiled resource datatype:
Resource pointer to a GradientDrawable.
resource reference:
In Java: R.drawable.filename
In XML: @[package:]drawable/filename
syntax:
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:shape=["rectangle" | "oval" | "line" | "ring"] >
 5     <corners
 6         android:radius="integer"
 7         android:topLeftRadius="integer"
 8         android:topRightRadius="integer"
 9         android:bottomLeftRadius="integer"
10         android:bottomRightRadius="integer" />
11     <gradient
12         android:angle="integer"
13         android:centerX="integer"
14         android:centerY="integer"
15         android:centerColor="integer"
16         android:endColor="color"
17         android:gradientRadius="integer"
18         android:startColor="color"
19         android:type=["linear" | "radial" | "sweep"]
20         android:useLevel=["true" | "false"] />
21     <padding
22         android:left="integer"
23         android:top="integer"
24         android:right="integer"
25         android:bottom="integer" />
26     <size
27         android:width="integer"
28         android:height="integer" />
29     <solid
30         android:color="color" />
31     <stroke
32         android:width="integer"
33         android:color="color"
34         android:dashWidth="integer"
35         android:dashGap="integer" />
36 </shape>

 

elements:

<shape>
The shape drawable. This must be the root element.attributes:
xmlns:android
StringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".
android:shape
Keyword. Defines the type of shape. Valid values are:

 

ValueDesciption
"rectangle" A rectangle that fills the containing View. This is the default shape.
"oval" An oval shape that fits the dimensions of the containing View.
"line" A horizontal line that spans the width of the containing View. This shape requires the <stroke> element to define the width of the line.
"ring" A ring shape.

The following attributes are used only when android:shape="ring":

android:innerRadius
Dimension. The radius for the inner part of the ring (the hole in the middle), as a dimension value or dimension resource.
android:innerRadiusRatio
Float. The radius for the inner part of the ring, expressed as a ratio of the ring’s width. For instance, if android:innerRadiusRatio="5", then the inner radius equals the ring’s width divided by 5. This value is overridden by android:innerRadius. Default value is 9.
android:thickness
Dimension. The thickness of the ring, as a dimension value or dimension resource.
android:thicknessRatio
Float. The thickness of the ring, expressed as a ratio of the ring’s width. For instance, if android:thicknessRatio="2", then the thickness equals the ring’s width divided by 2. This value is overridden by android:innerRadius. Default value is 3.
android:useLevel
Boolean. “true” if this is used as a LevelListDrawable. This should normally be “false” or your shape may not appear.
<corners>
Creates rounded corners for the shape. Applies only when the shape is a rectangle.attributes:

 

android:radius
Dimension. The radius for all corners, as a dimension value or dimension resource. This is overridden for each corner by the following attributes.
android:topLeftRadius
Dimension. The radius for the top-left corner, as a dimension value or dimension resource.
android:topRightRadius
Dimension. The radius for the top-right corner, as a dimension value or dimension resource.
android:bottomLeftRadius
Dimension. The radius for the bottom-left corner, as a dimension value or dimension resource.
android:bottomRightRadius
Dimension. The radius for the bottom-right corner, as a dimension value or dimension resource.

Note: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero (“0dp”) where you don’t want rounded corners.

<gradient>
Specifies a gradient color for the shape.attributes:

 

android:angle
Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.
android:centerX
Float. The relative X-position for the center of the gradient (0 – 1.0).
android:centerY
Float. The relative Y-position for the center of the gradient (0 – 1.0).
android:centerColor
Color. Optional color that comes between the start and end colors, as a hexadecimal value or color resource.
android:endColor
Color. The ending color, as a hexadecimal value or color resource.
android:gradientRadius
Float. The radius for the gradient. Only applied when android:type="radial".
android:startColor
Color. The starting color, as a hexadecimal value or color resource.
android:type
Keyword. The type of gradient pattern to apply. Valid values are:

 

ValueDescription
"linear" A linear gradient. This is the default.
"radial" A radial gradient. The start color is the center color.
"sweep" A sweeping line gradient.
android:useLevel
Boolean. “true” if this is used as a LevelListDrawable.
<padding>
Padding to apply to the containing View element (this pads the position of the View content, not the shape).attributes:

 

android:left
Dimension. Left padding, as a dimension value or dimension resource.
android:top
Dimension. Top padding, as a dimension value or dimension resource.
android:right
Dimension. Right padding, as a dimension value or dimension resource.
android:bottom
Dimension. Bottom padding, as a dimension value or dimension resource.
<size>
The size of the shape.attributes:

 

android:height
Dimension. The height of the shape, as a dimension value or dimension resource.
android:width
Dimension. The width of the shape, as a dimension value or dimension resource.

Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".

<solid>
A solid color to fill the shape.attributes:

 

android:color
Color. The color to apply to the shape, as a hexadecimal value or color resource.
<stroke>
A stroke line for the shape.attributes:

 

android:width
Dimension. The thickness of the line, as a dimension value or dimension resource.
android:color
Color. The color of the line, as a hexadecimal value or color resource.
android:dashGap
Dimension. The distance between line dashes, as a dimension value or dimension resource. Only valid if android:dashWidth is set.
android:dashWidth
Dimension. The size of each dash line, as a dimension value or dimension resource. Only valid if android:dashGap is set.
example:XML file saved at res/drawable/gradient_box.xml:
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:shape="rectangle">
 4     <gradient
 5         android:startColor="#FFFF0000"
 6         android:endColor="#80FF00FF"
 7         android:angle="45"/>
 8     <padding android:left="7dp"
 9         android:top="7dp"
10         android:right="7dp"
11         android:bottom="7dp" />
12     <corners android:radius="8dp" />
13 </shape>

 

This layout XML applies the shape drawable to a View:

1 <TextView
2     android:background="@drawable/gradient_box"
3     android:layout_height="wrap_content"
4     android:layout_width="wrap_content" />

This application code gets the shape drawable and applies it to a View:

Resources res = getResources();
Drawable shape = res. getDrawable(R.drawable.gradient_box);

TextView tv = (TextView)findViewByID(R.id.textview);
tv.setBackground(shape);

see also:

基础知识介绍完,下面便是学以至用,以下是我建的shape drawable的xml文件,并存放于:res/drawable包下。

 

 1 <?xml version=”1.0″ encoding=”utf-8″?>
 2 <layer-list xmlns:android=”http://schemas.android.com/apk/res/android”>
 3 <item>
 4 <shape android:shape=”rectangle”>
 5 <solid android:color=”#b8d630″ />
 6 <corners
 7 android:topLeftRadius=”5.0dp”
 8 android:bottomLeftRadius=”5.0dp”/>
 9 </shape>
10 </item>
11 <item android:top=”1dp” android:bottom=”1dp” android:left=”1dp” android:right=”1px”>
12 <shape>
13 <gradient
14 android:startColor=”#b8d630″ android:endColor=”#3fd133″
15 android:type=”linear” android:angle=”0″
16 android:centerX=”0.5″ android:centerY=”0.5″ />
17 <corners
18 android:topLeftRadius=”5.0dp”
19 android:bottomLeftRadius=”5.0dp”/>
20 </shape>
21 </item>
22 </layer-list>

将这个Drawable设置为Button的背景显示,在3.0以下的Android版本下其效果图如下:

从图我们可以看到,左下角的5像素圆角效果显示在了右下角。而正确的效果图应该是这样的:

是的,在3.0以前左小角和右小角有个顺序颠倒的Bug,也就是说在3.0以前设置属性android:bottomRightRadius指的是左下角,相反设置属性android:bottomLeftRadius指的是右下角,知道这个问题的真正原因之后,解决方法也就有了,我们只要再建一个包res/drawable-v12,目的在于存放3.0以后版本所用到的所有特殊资源文件,既然这样,那我们只需将正确设置的shape drawable放在res/drawable-v12包下,相反设置的shape drawable放置在res/drawable下,这样我们无论在3.0以上或以下版本都能显示正常啦。

写在最后:更多有关Android版本的版本号请访问:API LEVEL。最后祝愿你成功解决问题,且不要吝啬你的评论哦。

 

原文链接:http://www.ithouge.com/android-layer-list-shape-corners.html

 

posted @ 2012-12-01 16:58  Ithouge  阅读(1117)  评论(0编辑  收藏  举报