【移動開發】Android中不用圖檔資源也能做出好看的界面

這裡我給大家推薦一種簡單實用的方法，就是顔色值強化使用！

官方文檔

<a href="http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape" target="_blank">http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape</a>

查閱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

<code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"utf-8"</code><code>?&gt;</code>

<code>&lt;</code><code>shape</code>

<code>    </code><code>xmlns:android</code><code>=</code><code>"http://schemas.android.com/apk/res/android"</code>

<code>    </code><code>android:shape=["rectangle" | "oval" | "line" | "ring"] &gt;</code>

<code>    </code><code>&lt;</code><code>corners</code>

<code>        </code><code>android:radius</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:topLeftRadius</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:topRightRadius</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:bottomLeftRadius</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:bottomRightRadius</code><code>=</code><code>"integer"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>gradient</code>

<code>        </code><code>android:angle</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:centerX</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:centerY</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:centerColor</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:endColor</code><code>=</code><code>"color"</code>

<code>        </code><code>android:gradientRadius</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:startColor</code><code>=</code><code>"color"</code>

<code>        </code><code>android:type=["linear" | "radial" | "sweep"]</code>

<code>        </code><code>android:useLevel=["true" | "false"] /&gt;</code>

<code>    </code><code>&lt;</code><code>padding</code>

<code>        </code><code>android:left</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:top</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:right</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:bottom</code><code>=</code><code>"integer"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>size</code>

<code>        </code><code>android:width</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:height</code><code>=</code><code>"integer"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>solid</code>

<code>        </code><code>android:color</code><code>=</code><code>"color"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>stroke</code>

<code>        </code><code>android:color</code><code>=</code><code>"color"</code>

<code>        </code><code>android:dashWidth</code><code>=</code><code>"integer"</code>

<code>        </code><code>android:dashGap</code><code>=</code><code>"integer"</code> <code>/&gt;</code>

<code>&lt;/</code><code>shape</code><code>&gt;</code>

1.shape 形狀

作根标簽，使用： android:shape=["rectangle" | "oval" | "line" | "ring"] &gt;

值

描述

rectangle

長方形，預設值

oval

橢圓

line

水準直線，可以通過&lt;stroke&gt;标簽來定義寬度

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"]

<code></code><code>android:useLevel=["true" | "false"] /&gt;</code>

angle

漸變角度。0是從左到右的,90是底部向頂部，必須是45的倍數，預設是0。

centerX

以x位置為中心的漸變(0.0 -- 1.0)。

centerY

以y位置為中心的漸變(0.0 -- 1.0)。

centerColor

中心顔色

endColor

結束顔色

gradientRadius

徑向漸變要指定半徑值（<code>android:type="radial"</code>.）

startColor

開始顔色

type

linear：線性漸變，預設值

radial： 徑向漸變

sweep： 掃線漸變

useLevel

設定資源管理的畫闆（不是很懂。。。）

注：漸變角度：

<a href="http://blog.51cto.com/attachment/201310/000747920.png" target="_blank"></a>

4.padding 間隔（内邊距）

5.size shape的寬和高

6.solid：實心

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

7.stroke：描邊

width

描邊的寬度

color

描邊的顔色

dashWidth

一個虛線"-"的寬度

dashGap

一個虛線"-"的隔開距離

exit_dialog.xml

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

<code>&lt;</code><code>LinearLayout</code> <code>xmlns:android</code><code>=</code><code>"http://schemas.android.com/apk/res/android"</code>

<code>    </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>    </code><code>android:layout_height</code><code>=</code><code>"wrap_content"</code>

<code>    </code><code>android:background</code><code>=</code><code>"@android:color/transparent"</code>

<code>    </code><code>android:orientation</code><code>=</code><code>"vertical"</code> <code>&gt;</code>

<code>    </code><code>&lt;</code><code>LinearLayout</code>

<code>        </code><code>android:layout_width</code><code>=</code><code>"250dp"</code>

<code>        </code><code>android:layout_height</code><code>=</code><code>"wrap_content"</code>

<code>        </code><code>android:background</code><code>=</code><code>"@drawable/fragment_logout_button_backgroud_normal"</code>

<code>        </code><code>android:orientation</code><code>=</code><code>"vertical"</code> <code>&gt;</code>

<code>        </code><code>&lt;</code><code>LinearLayout</code>

<code>            </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>            </code><code>android:layout_height</code><code>=</code><code>"100dp"</code>

<code>            </code><code>android:orientation</code><code>=</code><code>"vertical"</code> <code>&gt;</code>

<code>            </code><code>&lt;</code><code>TextView</code>

<code>                </code><code>android:id</code><code>=</code><code>"@+id/oneBtnInfo"</code>

<code>                </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>                </code><code>android:layout_height</code><code>=</code><code>"40dp"</code>

<code>                </code><code>android:layout_margin</code><code>=</code><code>"2dp"</code>

<code>                </code><code>android:background</code><code>=</code><code>"@drawable/exit_bg"</code>

<code>                </code><code>android:gravity</code><code>=</code><code>"center"</code>

<code>                </code><code>android:text</code><code>=</code><code>"提示資訊"</code>

<code>                </code><code>android:textColor</code><code>=</code><code>"#fff"</code>

<code>                </code><code>android:textSize</code><code>=</code><code>"20sp"</code> <code>/&gt;</code>

<code>                </code><code>android:id</code><code>=</code><code>"@+id/tishiInfo"</code>

<code>                </code><code>android:layout_height</code><code>=</code><code>"wrap_content"</code>

<code>                </code><code>android:layout_marginTop</code><code>=</code><code>"20dp"</code>

<code>                </code><code>android:text</code><code>=</code><code>"确定要退出？"</code>

<code>                </code><code>android:textColor</code><code>=</code><code>"#000"</code>

<code>                </code><code>android:textSize</code><code>=</code><code>"18sp"</code> <code>/&gt;</code>

<code>        </code><code>&lt;/</code><code>LinearLayout</code><code>&gt;</code>

<code>            </code><code>android:layout_height</code><code>=</code><code>"50dp"</code>

<code>            </code><code>android:layout_margin</code><code>=</code><code>"2dp"</code>

<code>            </code><code>android:background</code><code>=</code><code>"@color/gray_light"</code>

<code>            </code><code>android:gravity</code><code>=</code><code>"center"</code>

<code>            </code><code>android:orientation</code><code>=</code><code>"horizontal"</code>

<code>            </code><code>android:padding</code><code>=</code><code>"5dp"</code> <code>&gt;</code>

<code>            </code><code>&lt;</code><code>Button</code>

<code>                </code><code>android:id</code><code>=</code><code>"@+id/exit_btn"</code>

<code>                </code><code>android:layout_height</code><code>=</code><code>"35dp"</code>

<code>                </code><code>android:layout_margin</code><code>=</code><code>"5dp"</code>

<code>                </code><code>android:layout_weight</code><code>=</code><code>"1"</code>

<code>                </code><code>android:background</code><code>=</code><code>"@drawable/fragment_logout_button_selector"</code>

<code>                </code><code>android:text</code><code>=</code><code>"确定"</code>

<code>                </code><code>android:textColor</code><code>=</code><code>"@color/black"</code> <code>/&gt;</code>

<code>                </code><code>android:id</code><code>=</code><code>"@+id/cancel_btn"</code>

<code>                </code><code>android:text</code><code>=</code><code>"取消"</code>

<code>    </code><code>&lt;/</code><code>LinearLayout</code><code>&gt;</code>

<code>&lt;/</code><code>LinearLayout</code><code>&gt;</code>

這裡使用到了我們前面講到的shape，先列舉一個(具體實作請看最後的源代碼)

exit_bg.xml

<code>&lt;</code><code>shape</code> <code>xmlns:android</code><code>=</code><code>"http://schemas.android.com/apk/res/android"</code> <code>&gt;</code>

<code>        </code><code>android:angle</code><code>=</code><code>"270"</code>

<code>        </code><code>android:centerColor</code><code>=</code><code>"@color/blue"</code>

<code>        </code><code>android:endColor</code><code>=</code><code>"@color/blue"</code>

<code>        </code><code>android:startColor</code><code>=</code><code>"@color/blue"</code>

<code>        </code><code>android:type</code><code>=</code><code>"linear"</code> <code>/&gt;</code>

<code>        </code><code>android:width</code><code>=</code><code>"0.5dp"</code>

<code>        </code><code>android:color</code><code>=</code><code>"@color/blue"</code> <code>/&gt;</code>

<code>        </code><code>android:radius</code><code>=</code><code>"2dp"</code>

<code>        </code><code>android:topLeftRadius</code><code>=</code><code>"5dp"</code>

<code>        </code><code>android:topRightRadius</code><code>=</code><code>"5dp"</code>

<code>        </code><code>android:bottomLeftRadius</code><code>=</code><code>"0dp"</code>

<code>        </code><code>android:bottomRightRadius</code><code>=</code><code>"0dp"</code>

<code>        </code><code>/&gt;</code>

MainActivity類

<code>package</code> <code>com.zhf.android_dialog_shape;</code>

<code>import</code> <code>com.zhf.android_dialog_shape_theme.R;</code>

<code>import</code> <code>android.os.Bundle;</code>

<code>import</code> <code>android.app.Activity;</code>

<code>import</code> <code>android.app.AlertDialog;</code>

<code>import</code> <code>android.view.View;</code>

<code>import</code> <code>android.view.View.OnClickListener;</code>

<code>import</code> <code>android.view.Window;</code>

<code>import</code> <code>android.widget.Button;</code>

<code>/**</code>

<code> </code><code>* 測試自定義的Dialog(使用到了Shape Drawable)</code>

<code> </code><code>* @author ZHF</code>

<code> </code><code>*</code>

<code> </code><code>*/</code>

<code>public</code> <code>class</code> <code>MainActivity </code><code>extends</code> <code>Activity {</code>

<code>                                                                                          </code> 

<code>    </code><code>private</code> <code>AlertDialog alertDialog;</code>

<code>    </code><code>private</code> <code>Button button;</code>

<code>    </code><code>@Override</code>

<code>    </code><code>protected</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) {</code>

<code>        </code><code>super</code><code>.onCreate(savedInstanceState);</code>

<code>        </code><code>setContentView(R.layout.activity_main);</code>

<code>        </code><code>button = (Button) </code><code>this</code><code>.findViewById(R.id.button);</code>

<code>        </code><code>button.setOnClickListener(</code><code>new</code> <code>OnClickListener() {</code>

<code>            </code><code>@Override</code>

<code>            </code><code>public</code> <code>void</code> <code>onClick(View v) {</code>

<code>                </code><code>loadExitDialog();</code>

<code>            </code><code>}</code>

<code>        </code><code>});</code>

<code>    </code><code>}</code>

<code>    </code><code>/**彈出自定義對話框**/</code>

<code>    </code><code>private</code> <code>void</code> <code>loadExitDialog() {</code>

<code>        </code><code>alertDialog = </code><code>new</code> <code>AlertDialog.Builder(</code><code>this</code><code>).create();</code>

<code>        </code><code>alertDialog.show();</code>

<code>        </code><code>Window window = alertDialog.getWindow();</code>

<code>        </code><code>window.setContentView(R.layout.exit_dialog);</code>

<code>        </code><code>Button exit_btn = (Button) window.findViewById(R.id.exit_btn);</code>

<code>        </code><code>Button cancel_btn = (Button) window.findViewById(R.id.cancel_btn);</code>

<code>        </code><code>exit_btn.setOnClickListener(</code><code>new</code> <code>OnClickListener() {</code>

<code>                </code><code>finish();</code>

<code>        </code><code>cancel_btn.setOnClickListener(</code><code>new</code> <code>OnClickListener() {</code>

<code>                </code><code>alertDialog.dismiss();</code>

<code>}</code>

最終效果圖：

<a href="http://blog.51cto.com/attachment/201310/005153806.png" target="_blank"></a>

源碼下載下傳看附件

<a href="http://down.51cto.com/data/2363598" target="_blank">附件：http://down.51cto.com/data/2363598</a>

     本文轉自zhf651555765 51CTO部落格，原文連結：http://blog.51cto.com/smallwoniu/1307776，如需轉載請自行聯系原作者