呃,xml 效果包含的東西蠻多的,一不小心,坑好像挖得有點大,看來有必要分成幾次來填坑。
Android xml 效果之 Shape Drawable
今天先說 Shape ,可以設定背景、邊框、漸變等效果
一、Shape 基本屬性
基本屬性copy自官方文檔,如下:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]
android:innerRadius="integer"
android:innerRadiusRatio="float"
android:thickness="integer"
android:thicknessRatio="float"
android:useLevel="boolean" >
<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>
屬性說明:
節點 shape = [ "rectangle" | "oval" | "line" | "ring" ]
- rectangle 矩形,這個是預設值;
- oval 橢圓;
- line 直線;
- ring 圓環;
下面5個屬性都是用在圓環 shape="ring" 時
android:innerRadius 内環半徑
android:innerRadiusRatio 設定内環半徑比例,預設值等于9, 内環半徑 = 環寬度 / 該值,會被android:innerRadius 覆寫
android:thickness 環的厚度,即内環與外環的距離
android:thicknessRatio 設定環的厚度比例,預設值等于3,環厚度 = 環寬度 / 該值,會被android:thickness 覆寫
android:useLevel 當值為true時,作為一個LeveListDrawable,這裡必須為設定為false,不然圓環可能不會出現;LeveListDrawable 是一個坑,待填。
節點 corners 建立圓角,僅用于矩形 shape="rectangle"
android:radius 設定為圓角矩形,該值為圓角半徑;
android:topLeftRadius 設定左上角圓角半徑;
android:topRightRadius 設定右上角圓角半徑;
android:bottomLeftRadius 設定左下角圓角半徑;
android:bottomRightRadius 設定右下角圓角半徑;
節點 gradient 指定顔色漸變效果
android:angle 漸變的角度,必須是45的倍數,預設值 0 ;
- angle=0 從左到右
- angle=45 從左下到右上
- angle=90 從下到上
- angle=135 從右下到左上
- angle=180 從右到左
- angle=225 從右上到左下
- angle=270 從上到下
- angle=315 從左上到右下
android:centerX 相對X軸位置,取值 (0 ~ 1.0)
android:centerY 相對Y軸位置,取值 (0 ~ 1.0)
這兩個要配合使用,設定漸變的中心點位置
android:startColor 設定漸變的開始顔色
android:centerColor 設定漸變的中間顔色
android:endColor 設定漸變的結束顔色
其中,開始顔色和結束顔色是必須有的,如果二缺一,缺的那個會預設為白色;
如果設定中間顔色,顔色按 開始》中間》結束 順序漸變
android:type 漸變圖案的類型
- linear 線性漸變,預設值,沿着一條軸線(水準或垂直)改變顔色,從起點到終點顔色進行順序漸變,從一邊拉向另一邊;
- radial 徑向漸變,放射性漸變,從内到外的圓形顔色漸變,從中間拉向外面;
- sweep 掃描漸變,以右邊為起點,按順時針方向掃描;
android:gradientRadius 僅用于徑向漸變 type=“radial" 時,
該值用于設定漸變圓形半徑
android:useLevel 當值為true時,作為一個LeveListDrawable ,還是剛才的那個坑,先不填。
節點 padding 設定填充内容邊距
這個就很常見了,等同控件的android:padding 屬性
android:left 填充左邊距
android:top 填充上邊距
androdi:right 填充右邊距
android:bottom 填充下邊距
節點 size 設定尺寸大小
設定寬高為固定值,ImageView控件可能需要用到
android:height 設定高度
android:width 設定寬度
節點 solid 設定純色填充内容
android:color 設定填充的顔色
節點 stroke 設定邊框線
android:width 邊框線的寬度,也就是粗細
android:color 邊框線的顔色
android:dashGap 設定虛線效果,空白劃線長度
android:dashWidth 設定虛線效果,着色劃線長度
其它補充:
1. 節點 solid 和節點 gradient 會影響覆寫,如果同時使用,寫在前面的會被寫在後面的覆寫
2. 翻譯有誤差,可以參看官方文檔
二、效果展示
說了那麼多,是時候看下效果了
矩形效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
<gradient
android:type="linear"
android:angle="45"
android:endColor="@color/red_end"
android:startColor="@color/red_start" />
<padding
android:bottom="10dip"
android:left="10dip"
android:right="10dip"
android:top="10dip" />
<size
android:height="100dip"
android:width="100dip" />
<stroke
android:dashGap="10px"
android:dashWidth="20px"
android:width="3dip"
android:color="@color/blue_start" />
</shape>
虛線效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:height="10dp" />
<stroke
android:dashGap="5dp"
android:dashWidth="10dp"
android:width="5dp"
android:color="@color/blue_start" />
</shape>
虛線補充
虛線效果有個問題,android 4.0 版本後有個Bug,設定虛線會變成實線,參看這裡
解決方法是關閉硬體加速
// 在AndroidManifest.xml 設定應用不使用硬體加速,對應用性能有影響,不建議使用
<application
......
android:hardwareAccelerated="false"/>
// 在使用虛線的控件設定,推薦
<View
......
android:layerType="software"/>
單環效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="10dp"
android:useLevel="false" >
<solid android:color="@color/blue_start" />
<gradient
android:angle="45"
android:endColor="@color/red_end"
android:startColor="@color/red_start" />
</shape>
雙環效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="15dp"
android:useLevel="false" >
<size
android:height="100dp"
android:width="10dp" />
<gradient
android:angle="45"
android:endColor="@color/white"
android:startColor="@color/white" />
<stroke
android:dashGap="0px"
android:dashWidth="20px"
android:width="5dip"
android:color="@color/red_end" />
</shape>
三環效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="15dp"
android:useLevel="false" >
<size
android:height="100dp"
android:width="10dp" />
<gradient
android:angle="45"
android:endColor="@color/red_end"
android:startColor="@color/red_start" />
<stroke
android:dashGap="1px"
android:dashWidth="20px"
android:width="5dip"
android:color="@color/blue_start" />
</shape>
除了圓環不太好控制,其它都不是很麻煩
三、最後補充
關于留下來的坑,待填
轉載請注明出處:http://blog.csdn.net/lxmy2012/article/details/41631483
XML源碼下載下傳
以上