当我们个人开发者做一款Android应用时，难免会为找不到好看的图片资源而发愁，（不仅要写代码，还得要稍微会点PS什么的，唉！j_0065.gif总之程序员什么都得要会一点。。。端好这碗饭可真不容易啊！j_0059.gif）要不就是好看的图片资源有了，从而导致我们的软件过大！怎么办呐？


这里我给大家推荐一种简单实用的方法，就是颜色值强化使用！


通常我们在res里xml中可以定义UI布局，按钮的按下效果，配置文件等，参阅博客：http://smallwoniu.blog.51cto.com/3911954/1248892,其实还可以自己定义控件的一些显示属性。


官方文档

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

查阅Shape Drawable，在res/drawable/文件夹下创建

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<? xml  version = "1.0"  encoding = "utf-8" ?>
< shape
     xmlns:android = "http://schemas.android.com/apk/res/android"
     android:shape=["rectangle" | "oval" | "line" | "ring"] >
     < corners
         android:radius = "integer"
         android:topLeftRadius = "integer"
         android:topRightRadius = "integer"
         android:bottomLeftRadius = "integer"
         android:bottomRightRadius = "integer"  />
     < gradient
         android:angle = "integer"
         android:centerX = "integer"
         android:centerY = "integer"
         android:centerColor = "integer"
         android:endColor = "color"
         android:gradientRadius = "integer"
         android:startColor = "color"
         android:type=["linear" | "radial" | "sweep"]
         android:useLevel=["true" | "false"] />
     < padding
         android:left = "integer"
         android:top = "integer"
         android:right = "integer"
         android:bottom = "integer"  />
     < size
         android:width = "integer"
         android:height = "integer"  />
     < solid
         android:color = "color"  />
     < stroke
         android:width = "integer"
         android:color = "color"
         android:dashWidth = "integer"
         android:dashGap = "integer"  />
</ shape >

这里我们可以看到这个xml中有好多貌似我们都没用过的标签。。。（其实刚开始我也是在不知道什么地方看到的，一头雾水，觉得好玩就要研究研究么~j_0057.gif）。首先，我们先来看一下：


1.shape 形状

作根标签，使用： android:shape=["rectangle" | "oval" | "line" | "ring"] >

值 描述
rectangle 长方形，默认值
oval 椭圆
line 水平直线，可以通过<stroke>标签来定义宽度
ring 环形


2.corners 圆角

用于shape被定义成rectangle时，使用： android:radius="integer"为角的弧度，值越大角越圆。

值 描述
android:topRightRadius 右上角
android:bottomLeftRadius 右下角
android:topLeftRadius 左上角
android:bottomRightRadius 左下角

注：默认值大于1才能显示出圆角，0为没有圆角。


3.gradient 渐变

指定shape的颜色值渐变，

android:type=["linear" | "radial" | "sweep"]

android:useLevel=["true" | "false"] />

值 描述
angle 渐变角度。0是从左到右的,90是底部向顶部，必须是45的倍数，默认是0。
centerX 以x位置为中心的渐变(0.0 -- 1.0)。
centerY 以y位置为中心的渐变(0.0 -- 1.0)。
centerColor 中心颜色
endColor 结束颜色
gradientRadius 径向渐变要指定半径值（android:type="radial".）
startColor 开始颜色
type

linear：线性渐变，默认值


radial： 径向渐变


sweep： 扫线渐变
useLevel 设置资源管理的画板（不是很懂。。。）

注：渐变角度：

000747920.png


4.padding 间隔（内边距）

5.size shape的宽和高

6.solid：实心

填充shape 使用：android:color指定填充的颜色


7.stroke：描边

值 描述
width 描边的宽度
color 描边的颜色
dashWidth 一个虚线"-"的宽度
dashGap 一个虚线"-"的隔开距离


ok! 差不多把官方文档上的连翻译带整理的总结完了j_0068.gif，写一个简单的小例子，让大家直观的感受一下它的作用吧！


exit_dialog.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<? xml  version = "1.0"  encoding = "utf-8" ?>
< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     android:layout_width = "fill_parent"
     android:layout_height = "wrap_content"
     android:background = "@android:color/transparent"
     android:orientation = "vertical"  >
     < LinearLayout
         android:layout_width = "250dp"
         android:layout_height = "wrap_content"
         android:background = "@drawable/fragment_logout_button_backgroud_normal"
         android:orientation = "vertical"  >
         < LinearLayout
             android:layout_width = "fill_parent"
             android:layout_height = "100dp"
             android:orientation = "vertical"  >
             < TextView
                 android:id = "@+id/oneBtnInfo"
                 android:layout_width = "fill_parent"
                 android:layout_height = "40dp"
                 android:layout_margin = "2dp"
                 android:background = "@drawable/exit_bg"
                 android:gravity = "center"
                 android:text = "提示信息"
                 android:textColor = "#fff"
                 android:textSize = "20sp"  />
             < TextView
                 android:id = "@+id/tishiInfo"
                 android:layout_width = "fill_parent"
                 android:layout_height = "wrap_content"
                 android:layout_marginTop = "20dp"
                 android:gravity = "center"
                 android:text = "确定要退出？"
                 android:textColor = "#000"
                 android:textSize = "18sp"  />
         </ LinearLayout >
         < LinearLayout
             android:layout_width = "fill_parent"
             android:layout_height = "50dp"
             android:layout_margin = "2dp"
             android:background = "@color/gray_light"
             android:gravity = "center"
             android:orientation = "horizontal"
             android:padding = "5dp"  >
             < Button
                 android:id = "@+id/exit_btn"
                 android:layout_width = "fill_parent"
                 android:layout_height = "35dp"
                 android:layout_margin = "5dp"
                 android:layout_weight = "1"
                 android:background = "@drawable/fragment_logout_button_selector"
                 android:text = "确定"
                 android:textColor = "@color/black"  />
             < Button
                 android:id = "@+id/cancel_btn"
                 android:layout_width = "fill_parent"
                 android:layout_height = "35dp"
                 android:layout_margin = "5dp"
                 android:layout_weight = "1"
                 android:background = "@drawable/fragment_logout_button_selector"
                 android:text = "取消"
                 android:textColor = "@color/black"  />
         </ LinearLayout >
     </ LinearLayout >
</ LinearLayout >


这里使用到了我们前面讲到的shape，先列举一个(具体实现请看最后的源代码)

exit_bg.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<? xml  version = "1.0"  encoding = "utf-8" ?>
< shape  xmlns:android = "http://schemas.android.com/apk/res/android"  >
     < gradient
         android:angle = "270"
         android:centerColor = "@color/blue"
         android:endColor = "@color/blue"
         android:startColor = "@color/blue"
         android:type = "linear"  />
     < stroke
         android:width = "0.5dp"
         android:color = "@color/blue"  />
     < corners
         android:radius = "2dp"
         android:topLeftRadius = "5dp"
         android:topRightRadius = "5dp"
         android:bottomLeftRadius = "0dp"
         android:bottomRightRadius = "0dp"
         />
</ shape >


MainActivity类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package  com.zhf.android_dialog_shape;
import  com.zhf.android_dialog_shape_theme.R;
import  android.os.Bundle;
import  android.app.Activity;
import  android.app.AlertDialog;
import  android.view.View;
import  android.view.View.OnClickListener;
import  android.view.Window;
import  android.widget.Button;
/**
  * 测试自定义的Dialog(使用到了Shape Drawable)
  * @author ZHF
  *
  */
public  class  MainActivity  extends  Activity {
                                                                                           
     private  AlertDialog alertDialog;
     private  Button button;
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         button = (Button)  this .findViewById(R.id.button);
         button.setOnClickListener( new  OnClickListener() {
             @Override
             public  void  onClick(View v) {
                 loadExitDialog();
             }
         });
     }
                                                                                           
     /**弹出自定义对话框**/
     private  void  loadExitDialog() {
         alertDialog =  new  AlertDialog.Builder( this ).create();
         alertDialog.show();
         Window window = alertDialog.getWindow();
         window.setContentView(R.layout.exit_dialog);
         Button exit_btn = (Button) window.findViewById(R.id.exit_btn);
         Button cancel_btn = (Button) window.findViewById(R.id.cancel_btn);
         exit_btn.setOnClickListener( new  OnClickListener() {
             @Override
             public  void  onClick(View v) {
                 finish();
             }
         });
         cancel_btn.setOnClickListener( new  OnClickListener() {
             @Override
             public  void  onClick(View v) {
                 alertDialog.dismiss();
             }
         });
     }
}


最终效果图：

005153806.png

仔细观察一下，圆角、渐变都已经出来了，貌似比系统自带的Dialog好看多了。j_0066.gif

源码下载看附件