天天看點

Android xml 效果之 Shape Drawable

呃,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. 翻譯有誤差,可以參看官方文檔

二、效果展示

說了那麼多,是時候看下效果了

Android xml 效果之 Shape Drawable

矩形效果

<?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源碼下載下傳

以上