原文地址:http://blog.csdn.net/brokge/article/details/9713041/
<shape>和<selector>在Android UI設計中經常用到。比如我們要自定義一個圓角Button,點擊Button有些效果的變化,就要用到<shape>和<selector>。
可以這樣說,<shape>和<selector>在美化控件中的作用是至關重要。
在看這篇文章之前,可以看下這個小例子:鏤空按鈕的實現
1.Shape
簡介
作用:XML中定義的幾何形狀
位置:res/drawable/文件的名稱.xml
使用的方法:
Java代碼中:R.drawable.文件的名稱
XML中:Android:background="@drawable/文件的名稱"
屬性:
<shape> Android:shape=["rectangle" | "oval" | "line" | "ring"]
其中rectagle矩形,oval橢圓,line水平直線,ring環形
<shape>中子節點的常用屬性:
<gradient> 漸變
Android:startColor
起始顏色
Android:endColor
結束顏色
Android:angle
漸變角度,0從左到右,90表示從下到上,數值爲45的整數倍,默認爲0;
Android:type
漸變的樣式 liner線性漸變 radial環形漸變 sweep
<solid > 內部填充
Android:color
填充的顏色
<stroke >描邊
Android:width
描邊的寬度
Android:color
描邊的顏色
Android:dashWidth
表示'-'橫線的寬度
Android:dashGap
表示'-'橫線之間的距離
<corners >圓角
Android:radius
圓角的半徑 值越大角越圓
Android:topRightRadius
右上圓角半徑
Android:bottomLeftRadius
右下圓角角半徑
Android:topLeftRadius
左上圓角半徑
Android:bottomRightRadius
左下圓角半徑
<padding >邊界填充
android:bottom="1.0dip"
底部填充
android:left="1.0dip"
左邊填充
android:right="1.0dip"
右邊填充
android:top="0.0dip"
上面填充
2.Selector
簡介
根據不同的選定狀態來定義不同的現實效果
分爲四大屬性:
android:state_selected 是否選中
android:state_focused 是否獲得焦點
android:state_pressed 是否按壓
android:state_enabled 是否設置是否響應事件,指所有事件
另:
android:state_window_focused 默認時的背景圖片
引用位置:res/drawable/文件的名稱.xml
使用的方法:
Java代碼中:R.drawable.文件的名稱
XML中:Android:background="@drawable/文件的名稱"
-
<?xml version="1.0" encoding="utf-8" ?>
-
<selector xmlns:Android="http://schemas.android.com/apk/res/android">
-
-
<item Android:drawable="@drawable/pic1" />
-
-
<item
-
Android:state_window_focused="false"
-
android:drawable="@drawable/pic_blue"
-
/>
-
-
<item
-
Android:state_focused="true"
-
android:state_pressed="true"
-
android:drawable= "@drawable/pic_red"
-
/>
-
-
<item
-
Android:state_focused="false"
-
Android:state_pressed="true"
-
Android:drawable="@drawable/pic_pink"
-
/>
-
-
<item
-
Android:state_selected="true"
-
android:drawable="@drawable/pic_orange"
-
/>
-
-
<item
-
Android:state_focused="true"
-
Android:drawable="@drawable/pic_green"
-
/>
-
</selector>
.layer-list
簡介:
將多個圖片或上面兩種效果按照順序層疊起來
例子:
-
<?xml version="1.0" encoding="utf-8"?>
-
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
<item>
-
<bitmap android:src="@drawable/android_red"
-
android:gravity="center" />
-
</item>
-
<item android:top="10dp" android:left="10dp">
-
<bitmap android:src="@drawable/android_green"
-
android:gravity="center" />
-
</item>
-
<item android:top="20dp" android:left="20dp">
-
<bitmap android:src="@drawable/android_blue"
-
android:gravity="center" />
-
</item>
-
</layer-list>
-
<ImageView
-
android:layout_height="wrap_content"
-
android:layout_width="wrap_content"
-
android:src="@drawable/layers" />
效果圖:
4.最後
以上三個標籤可以揉合到一塊兒來使用,比如下面這個例子:
-
<selector xmlns:android="http://schemas.android.com/apk/res/android">
-
<item android:state_pressed="true">
-
<layer-list>
-
<item android:bottom="8.0dip">
-
<shape>
-
<solid android:color="#ffaaaaaa" />
-
</shape>
-
</item>
-
<item>
-
<shape>
-
<corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
-
-
<solid android:color="#ffaaaaaa" />
-
-
<padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
-
</shape>
-
</item>
-
<item>
-
<shape>
-
<corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
-
-
<solid android:color="@color/setting_item_bgcolor_press" />
-
</shape>
-
</item>
-
</layer-list>
-
</item>
-
<item>
-
<layer-list>
-
<item android:bottom="8.0dip">
-
<shape>
-
<solid android:color="#ffaaaaaa" />
-
</shape>
-
</item>
-
<item>
-
<shape>
-
<corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
-
-
<solid android:color="#ffaaaaaa" />
-
-
<padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
-
</shape>
-
</item>
-
<item>
-
<shape>
-
<corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
-
-
<solid android:color="@color/setting_item_bgcolor" />
-
</shape>
-
</item>
-
</layer-list>
-
</item>
-
</selector>