Android layer-list shape corners
Android的图片资源应用非常广泛,它们可以很容易的被绘制到screen,同时设定图片资源的方式也有很多种,例如可以通过类似getDrawable(int)的API获取,也或或则可以通过在XML资源里设定,例如通过设定属性
android:drawable
和 android:icon,来设定图片资源。同样我们也有很多种类型的图片资源,例如:
Bitmap File,
Nine-Patch File,
Layer List,State List,Level List,Transition Drawable,Inset Drawable,Clip Drawable,Scale Drawable,Shape 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
- String. Required. 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:
Value Desciption "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 byandroid: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 byandroid: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:
Value Description "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 theandroid: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.
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