【Android】Android图形之shape使用

首先用代码画出一个填充红色的矩形：

[java]  view plain copy print ?

1. package com.msi.manning.chapter9.SimpleShape;  
2.   
3. import android.app.Activity;  
4. import android.content.Context;  
5. import android.graphics.Canvas;  
6. import android.graphics.drawable.ShapeDrawable;  
7. import android.graphics.drawable.shapes.RectShape;  
8. import android.os.Bundle;  
9. import android.view.View;  
10.   
11. public class SimpleShape extends Activity {  
12.   
13.     @Override  
14.     protected void onCreate(Bundle icicle) {  
15.         super.onCreate(icicle);  
16.         setContentView(new SimpleView(this));  
17.     }  
18.   
19.     private static class SimpleView extends View {  
20.   
21.         private ShapeDrawable mDrawable = new ShapeDrawable();  
22.   
23.         public SimpleView(Context context) {  
24.             super(context);  
25.             setFocusable(true);  
26.             this.mDrawable = new ShapeDrawable(new RectShape());  
27.             this.mDrawable.getPaint().setColor(0xFFFF0000);  
28.         }  
29.   
30.         @Override  
31.         protected void onDraw(Canvas canvas) {  
32.   
33.             int x = 10;  
34.             int y = 10;  
35.             int width = 300;  
36.             int height = 50;  
37.             this.mDrawable.setBounds(x, y, x + width, y + height);  
38.             this.mDrawable.draw(canvas);  
39.             y += height + 5;  
40.   
41.         }  
42.     }  
43. }  

再如下图：

通过布局文件来设置：

第一副图shape_1.xml

实体solid为黑色，描边stroke为白色。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3. type="oval" >  
4.         <solid android:color="#00000000"/>  
5.         <padding android:left="10sp" android:top="4sp" android:right="10sp" android:bottom="4sp" />  
6.         <stroke android:width="1dp" android:color="#FFFFFFFF"/>  
7. </shape>  

第二幅图line.xml  为一条线

实体和描边都是白色，高度23dip  其中type="line"

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" type="line" >  
3.     <solid android:color="#FFFFFFFF"/>  
4.     <stroke android:width="1dp" android:color="#FFFFFFFF"  
5.             android:dashWidth="1dp" android:dashGap="2dp" />  
6.     <padding android:left="1dp" android:top="25dp"  
7.         android:right="1dp" android:bottom="25dp" />  
8.       
9.     <size android:height="23dp" />  
10. </shape>  

第三幅图shape_2.xml

[java]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <solid android:color="#FF0000FF"/>  
5.     <stroke android:width="4dp" android:color="#FFFFFFFF"  
6.             android:dashWidth="1dp" android:dashGap="2dp" />  
7.     <padding android:left="7dp" android:top="7dp"  
8.             android:right="7dp" android:bottom="7dp" />  
9.     <corners android:radius="4dp" />  
10. </shape>  

第四幅图shape_3.xml

shape类型type="oval"为椭圆

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval">  
3.     <solid android:color="#FFE1E1E1"/>  
4.     <stroke android:width="4dp" android:color="#99000000"  
5.             android:dashWidth="4dp" android:dashGap="2dp" />  
6.     <padding android:left="7dp" android:top="7dp"  
7.             android:right="7dp" android:bottom="18dp" />  
8.     <corners android:radius="12dp" />  
9. </shape>  

第五幅图和第二幅相同是一条高23dp的线

第六幅图shape_4.xml

渐变与圆角

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" type="rectangle">  
3.     <gradient android:startColor="#FFE1E1E1" android:endColor="#FFFFFFFF" android:angle="270"/>  
4.     <corners android:bottomLeftRadius="7dp"  
5.                 android:bottomRightRadius="7dp"  
6.                 android:topLeftRadius="1dp"  
7.                 android:topRightRadius="1dp"  
8.                  />  
9. </shape>   

第七幅图shape_5.xml

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval">  
3.     <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"  android:angle="270"/>  
4.     <padding android:left="7dp" android:top="7dp"  
5.             android:right="7dp" android:bottom="7dp" />  
6.   
7. </shape>  

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content">  
5.      <LinearLayout  
6.         android:orientation="vertical"  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content">  
9.     <ImageView android:layout_width="fill_parent"  
10.          android:layout_height="50dip"  
11.          android:src="@drawable/shape_1" />  
12.     <ImageView android:layout_width="fill_parent"  
13.             android:layout_height="wrap_content"  
14.             android:src="@drawable/line" />  
15.     <ImageView  
16.             android:layout_width="fill_parent"  
17.             android:layout_height="50dip"  
18.             android:src="@drawable/shape_2" />  
19. <!--     <ImageView-->  
20. <!--         android:layout_width="fill_parent"-->  
21. <!--         android:layout_height="wrap_content"-->  
22. <!--         android:src="@drawable/line" />-->  
23.         <ImageView  
24.             android:layout_width="fill_parent"  
25.         android:layout_height="50dip"  
26.             android:src="@drawable/shape_3" />  
27.     <ImageView  
28.         android:layout_width="fill_parent"  
29.             android:layout_height="wrap_content"  
30.             android:src="@drawable/line" />  
31.     <ImageView  
32.             android:layout_width="fill_parent"  
33.             android:layout_height="50dip"  
34.             android:src="@drawable/shape_4" />  
35. <!--     <ImageView-->  
36. <!--         android:layout_width="fill_parent"-->  
37. <!--         android:layout_height="wrap_content"-->  
38. <!--         android:src="@drawable/line" />-->  
39.     <ImageView  
40.             android:layout_width="fill_parent"  
41.             android:layout_height="50dip"  
42.             android:src="@drawable/shape_5" />  
43.     </LinearLayout>  
44. </ScrollView>