android通過drawable資源實現常用的自定義效果

1.首先來介紹bitmap標籤的使用:/MyProgram/res/drawable/drawable_layer.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

節點屬性介紹:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="類型:String。定義了XML的命名空間,必須是<a target=_blank href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>。
                   如果<bitmap>是根元素,那麼他是必須的,如果是嵌套在<itme>裏面,那麼就不是必須的。"
    android:src="類型:Drawable resource。必需。 引用一個drawableresource"
    android:antialias="類型:Boolean。是否開啓抗鋸齒。"
    android:dither="類型:Boolean。如果位圖與屏幕的像素配置不同時,是否允許抖動"
    android:filter="類型:Boolean。是否允許對位圖進行濾波。對位圖進行收縮或者延展使用濾波可以獲得平滑的外觀效果。"
    android:gravity="<em>類型:</em>關鍵字。定義位圖的重力(gravity),如果位圖小於其容器,使用重力指明在何處。多個屬性之間用  |  分隔。"
    android:mipMap=["true" | "false"]
    android:tileMode="<em>類型:Keyword</em>。定義了tile模式。當tile模式被啓用,位圖是重複的,並且gravity屬性將被忽略。/>

2.nine-patch標籤

我們在應用開發當中,時刻需要對圖片進行處理,爲了讓圖片被拉伸的時候不會變形和扭曲,讓圖片邊緣部分過渡得更加平滑自然。這時就要用到draw9patch.bat這個工具。

:\ADT\sdk\tools\draw9patch.bat

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="false"
    android:src="@drawable/nine_patch" >

</nine-patch>

src所對應的資源文件需要時.9格式的圖片

在佈局文件中引用:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/xml_ninepatch" />

3.layer-list標籤

將資源文件一層一層的覆蓋上去

layertest.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/src01" />
    </item>
    <item
        android:left="10dp"
        android:top="10dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/src02" />
    </item>
    <item
        android:left="20dp"
        android:top="20dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/src03" />
    </item>

</layer-list>

在佈局文件中引用:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layertest" />

4.selector標籤

selector.xml用來控制按鈕等空間的點擊效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/pressed" />
    <item android:state_focused="true"
          android:drawable="@drawable/focused" /> 
    <item android:drawable="@drawable/normal" /> 
</selector>

在佈局中的引用

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector"
        android:text="按鈕" />

5.layer-list

圖像級別資源的使用

lamp_level.xml

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/lamp_off" android:minLevel="6"
		android:maxLevel="10" />
	<item android:drawable="@drawable/lamp_on" android:minLevel="12"
		android:maxLevel="20" />
</level-list>

在佈局文件中的引用

<ImageView
        android:id="@+id/imageview_lamp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/lamp_level" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick_effect1"
        android:text="效果1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick_effect2"
        android:text="效果2" />

在Java文件中的使用

private ImageView ivLamp;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.level_res);

		ivLamp = (ImageView) findViewById(R.id.imageview_lamp);
		// 設置Level爲8
		ivLamp.setImageLevel(8);
	}

	public void onClick_effect1(View view) {
		// LevelListDrawable levelListDrawable =
		// (LevelListDrawable)ivLamp.getDrawable();
		// levelListDrawable.setLevel(15);
		// 設置Level爲15
		ivLamp.setImageLevel(15);

	}

	public void onClick_effect1(View view) {
		// 設置Level爲6
		ivLamp.getDrawable().setLevel(6);

	}

6.transition 標籤

用來產生過度效果

lamp_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/lamp_off" />
	<item android:drawable="@drawable/lamp_on" />
</transition>

佈局文件中引用

<ImageView
        android:id="@+id/imageview_lamp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/lamp_transition" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick_LampOn"
        android:text="開燈" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick_LampOff"
        android:text="關燈" />

Java文件中的使用

@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.cross_fade_res);

		ivLamp = (ImageView) findViewById(R.id.imageview_lamp);
	}

	public void onClick_LampOn(View view) {
		// 從第一個圖像切換到第二個圖像。其中使用1秒的時間完成淡入淡出效果
		TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();
		drawable.startTransition(1000);
	}

	public void onClick_LampOff(View view) {
		// 從第二個圖像切換第一個圖像。其中使用1秒的時間完成淡入淡出效果
		TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();
		drawable.reverseTransition(1000);
	}

7.inset 標籤

嵌入圖像資源的使用

inset.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:insetBottom="10dp"
    android:insetLeft="10dp"
    android:insetRight="10dp"
    android:insetTop="10dp" >

</inset>

標籤屬性介紹

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:insetBottom="圖像距離下邊的距離"
    android:insetLeft="圖像距離左標的距離"
    android:insetRight="圖像距離右邊的距離"
    android:insetTop="圖像距離上邊的距離" >

</inset>

在佈局中的引用

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/inset" />

8.clip 標籤

剪切圖像資源的使用

clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/progress"
    android:gravity="left" />

在佈局文件中的引用

<ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/clip" />

Java代碼中的使用

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.clip_res);
		ImageView imageview = (ImageView) findViewById(R.id.image);
		ClipDrawable drawable = (ClipDrawable) imageview.getBackground();
		// 截取30%的圖像
		drawable.setLevel(3000);
	}

9.scale 標籤

比例圖像資源的使用

scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="80%"
    android:scaleWidth="80%" >

</scale>

在佈局文件中的引用

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/scale" />

10.shape 標籤

圖形資源使用

shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!-- 圓角 -->
    <corners
	android:radius="9dp"
	android:topLeftRadius="2dp"
	android:topRightRadius="2dp"
	android:bottomLeftRadius="2dp"
	android:bottomRightRadius="2dp"/><!-- 設置圓角半徑 -->
    <!-- 漸變 -->
    <gradient
	android:angle="45"
	android:endColor="#80FF00FF"
	android:startColor="#FFFF0000" />

    <!-- 間隔 -->
    <padding
	android:bottom="7dp"
	android:left="7dp"
	android:right="7dp"
	android:top="7dp" /><!-- 各方向的間隔 -->

    <!-- 填充 -->
    <solid
	android:color="@android:color/white"/><!-- 填充的顏色 -->

    <!-- 大小 -->
    <size
	android:width="50dp"
	android:height="50dp"/><!-- 寬度和高度 -->

    <!-- 描邊 -->
    <stroke
	android:width="2dp"
	android:color="#FFF" />

    <corners android:radius="8dp" />

</shape>

在佈局文件中的引用

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@drawable/shape"
        android:text="Shape Label" />
好了,常用的drawable資源就總結到這,效果要自己去嘗試,希望多學習和工作有所幫助!



























發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章