轉載請備注出自于:http://blog.csdn.net/qq_22118507/article/details/51505844
三者的使用的方法: Java代碼中:R.drawable.檔案的名稱 XML中:Android:background="@drawable/檔案的名稱"
1.Shape
[html] view plain copy
- <?xml version="1.0" encoding="utf-8"?>
- <!--
- android:shape=["rectangle" | "oval" | "line" | "ring"]
- shape的形狀,預設為矩形,可以設定為矩形(rectangle)、橢圓形(oval)、線性形狀(line)、環形(ring) 下面的屬性隻 android:shape="ring" 時可用:
- android:innerRadius 尺寸,内環的半徑。
- android:innerRadiusRatio 浮點型,以環的寬度比率來表示内環的半徑,例如,如果android:innerRadiusRatio,表示 内環半徑等于環的寬度除以5,這個值是可以被覆寫的,預設為9.
- android:thickness 尺寸,環的厚度
- android:thicknessRatio 浮點型,以環的寬度比率來表示環的厚度,例如,如果 android:thicknessRatio="2",那麼環的厚度就等于環的寬度除以2。這個值是可以被android:thickness覆寫的,預設值是 3.
- android:useLevel boolean值,如果當做是LevelListDrawable使用時值為true,否則為false.
- -->
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <!--
- 圓角
- android:radius 整型 半徑
- android:topLeftRadius 整型 左上角半徑
- android:topRightRadius 整型 右上角半徑
- android:bottomLeftRadius 整型右下角半徑
- android:bottomRightRadius 整型左下角半徑
-
這裡有個地方需要注意,bottomleftradius是右下角,而不是左下角,這個不要記錯了。
還有網上看到有人說設定成0dp無效,不過我在測試中發現是可以的,我用的是2.2,可能修複了這個問題吧,如果無效的話那就隻能設成1dp了。
- -->
- <corners
- android:radius="8dp"
- android:topLeftRadius="5dp"
- android:topRightRadius="15dp"
- android:bottomLeftRadius="20dp"
- android:bottomRightRadius="25dp"
- />
- <!--
- 漸變色
- android:startColor 顔色值 起始顔色
- android:endColor 顔色值 結束顔色
- android:centerColor 整型 漸變中間顔色,即開始顔色與結束顔色之間的顔色
- android:angle 整型 漸變角度
- 使用android:angle的注意事項:
-
當angle=0時,漸變色是從左向右。 然後逆時針方向轉,當angle=90時為從下往上。angle必須為45的整數倍
另外漸變預設的模式為android:type="linear",即線性漸變,可以指定漸變為徑向漸變,android:type="radial",徑向漸變需要指定半徑android:gradientradius="50"。
android:angle網 上有各種說法,這裡,我說說自己的實驗結果,漸變的時候,最原始的,即android:angle=“0”時,是從左到右,按照開始顔色到結束顔色來渲染 的,android:angle=“90”是從上到下來渲染的,android:angle=“180”是從右到左來渲染的,android:angle=“360”和android:angle=“0”是一樣的,是以這裡應該是這樣的,渲染時按照最原始的渲染色闆(把控件内部看作一塊可以繞中心旋轉的闆子)圍繞控件中心來旋轉相應的度數,即android:angle裡面的值就是所需要旋轉的角度,隻是這個旋轉角度必須是45的整數倍)
- android:type ["linear" | "radial" | "sweep"] 漸變類型(取值:linear、radial、sweep)
- linear 線性漸變,這是預設設定
- radial 放射性漸變,以開始色為中心。
- sweep 掃描線式的漸變。
- android:useLevel ["true" | "false"] 如果要使用LevelListDrawable對象,就要設定為 true。設定為true無漸變。false有漸變色
- android:gradientRadius 整型 漸變色半徑.當 android:type="radial" 時才使用。 單獨使用 android:type="radial"會報錯。
- android:centerX 整型 漸變中心X點坐标的相對位置
- android:centerY 整型 漸變中心Y點坐标的相對位置
- -->
- <gradient
- android:startColor="#FFFF0000"
- android:endColor="#80FF00FF"
- android:angle="45"
- />
- <!--
- 内邊距,即内容與邊的距離
- android:left 整型 左内邊距
- android:top 整型 上内邊距
- android:right 整型 右内邊距
- android:bottom 整型 下内邊距
- -->
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp"
- />
- <!--
- size 大小
- android:width 整型 寬度
- android:height 整型 高度
- -->
- <size
- android:width="600dp"
- />
- <!--
- 内部填充
- android:color 顔色值 填充顔色
- -->
- <solid
- android:color="#ffff9d77"
- />
- <!--
- 描邊
- android:width 整型 描邊的寬度
- android:color 顔色值 描邊的顔色
- android:dashWidth 整型 表示描邊的樣式是虛線的寬度, 值為0時,表示為實線。值大于0則為虛線。
- android:dashGap 整型 表示描邊為虛線時,虛線之間的間隔 即“ - - - - ”
- -->
- <stroke
- android:width="2dp"
- android:color="#dcdcdc"
- />
- </shape>
2.Selector
根據不同的標明狀态來定義不同的現實效果,分為四大屬性:
android:state_selected 是選中
android:state_focused 是獲得焦點
android:state_pressed 是點選
android:state_enabled 是設定是否響應事件,指所有事件
另:
android:state_window_focused 預設時的背景圖檔
[html] view plain copy
- <?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:drawable="@drawable/pic_green"
/>
- <!-- 非觸摸模式下獲得焦點并單擊時的背景圖檔 -->
- <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>
3.layer-list
3.1 多圖層疊加效果(1)
四個角都是圓角的效果。如果讓UI設計人員直接出圖,可能會更簡單一些。但是我們使用android中layer-list多圖層疊加效果同樣可以實作。
我們把它拆分為三個部分,第一個部分是最頂端的那一行(我這裡稱為頂部),第二部分是中間部分(中間部分不需要圓角效果),第三部分是底部。
頂部的實作:
頂部是一個有灰色邊框但無下邊框,帶圓角,白色背景的長方體。實作效果如下:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape>
<solid android:color="#FFFFFF" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />
<stroke android:width="1dp" android:color="#ffa8abad" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp">
<shape>
<solid android:color="#FFFFFF" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />
<stroke android:width="1dp" android:color="#ffffffff" />
</shape>
</item>
</layer-list>
中間部分是一個不帶圓角 白色背景 灰色邊框 無下邊框 長方體.實作效果如下:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#ffa8abad" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape>
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#ffffffff" />
</shape>
</item>
</layer-list>
底部是一個具有底部圓角,白色背景,灰色邊框的長方體,實作效果如下:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />
<stroke android:width="1dp" android:color="#ffa8abad" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">
<shape>
<solid android:color="#FFFFFF" />
<corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />
<stroke android:width="1dp" android:color="#ffffffff" />
</shape>
</item>
</layer-list>
3.3 多圖層疊加效果(2)
<?xml version="1.0" encoding="UTF-8"?>
- <layer-list
- xmlns:android="http://schemas.android.com/apk/res/android">
- <!--圖檔1-->
- <item android:id="@+id/user_faceback_drawable"
- android:drawable="@drawable/faceback" />
- <!--圖檔2-->
- <item android:id="@+id/user_face_drawable"
- android:drawable="@drawable/h001"
- android:left="10.0dip"
- android:top="18.0dip"
- android:right="25.0dip"
- android:bottom="35.0dip" />
- </layer-list>
- <!--2個圖檔的疊加-->
效果圖如下: