Android中的drawable下的資源使用

所謂的Level動畫就是給圖片設置不同的等級,在不同的等級下顯示不同的圖片,比如說手機電池的電量。

實現步驟:

一、

①在res文件夾下創建新的文件夾drawable,在其中新建level.xml文件:這裏我們把標籤改爲level-list,因爲新建中沒有該項。

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

    <!--
         在level中顯示不同的圖片,當等級不同的時候,切換或者改變圖片
    	一般用於管理電池電量的變化
    	定義對應的等級:android:maxLevel=100	android:minLevel=90
    	如果在給定的等級範圍內則顯示對應的圖片android:drawable="@drawable/lamp_on"

    -->
    <item
        android:drawable="@drawable/lamp_on"
        android:maxLevel="50"
        android:minLevel="25">
    </item>
    <item
        android:drawable="@drawable/lamp_off"
        android:maxLevel="25"
        android:minLevel="1">
    </item>

</level-list>
②、然後是佈局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LevelActivity" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/leve" />
    
    <!-- 開關 -->
    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
    
    <!-- 點擊改變狀態 -->
    <ToggleButton
        android:id="@+id/tog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/switch1"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textOff="關燈"
        android:textOn="開燈" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:onClick="on"
        android:text="開燈" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:onClick="off"
        android:text="關燈" />

</RelativeLayout>
③、然後是在代碼中的具體實現:

package com.example.text01;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.ImageView;
import android.widget.Switch;
import android.widget.ToggleButton;

public class LevelActivity extends Activity {

	private ImageView iv;
	private Switch switch1;
	private ToggleButton tog;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_level);
		iv = (ImageView) findViewById(R.id.iv);
		switch1 = (Switch) findViewById(R.id.switch1);
		tog = (ToggleButton) findViewById(R.id.tog);
		// 給ToggleButton添加點擊事件
		tog.setOnCheckedChangeListener(new OnCheckedChangeListener() {

			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				if (!isChecked) {
					// 設置ImageView的對應等級
					iv.setImageLevel(30);
				} else {
					iv.setImageLevel(10);
				}
			}
		});
		// 給switch1添加點擊事件
		switch1.setOnCheckedChangeListener(new OnCheckedChangeListener() {

			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				// 進行判斷,被選中是關燈
				if (isChecked) {
					iv.setImageLevel(30);
				} else {

					iv.setImageLevel(10);
				}
			}
		});
	}

	// 開燈,設置ImageView等級
	public void on(View view) {
		iv.setImageLevel(30);
	}

	// 關燈
	public void off(View view) {
		iv.setImageLevel(10);
	}

}
Level運行結果:



二、上面是Level動畫。下面介紹一下Transition動畫,就是設置圖片的漸變過程。

①同樣在drawable文件夾下創建transition.xml文件:這裏把標籤改了,只能包含兩張圖片

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圖片之間的平滑過度  在transition裏面只能包含兩張圖片-->
    <item
        android:drawable="@drawable/lamp_off">
    </item>
    <item
        android:drawable="@drawable/lamp_on">
    </item>

</transition>

②下面是在代碼中的具體實現:

package com.example.text01;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.TransitionDrawable;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;

public class TransitionActivity extends Activity {

	private ImageView iv;
	private TransitionDrawable drawable;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_transition);
		iv = (ImageView) findViewById(R.id.iv_transition);
		drawable = (TransitionDrawable) iv.getDrawable();
	}

	public void on(View view) {

		// 狀態過度時間
		drawable.startTransition(3000);
	}

	public void off(View view) {
		// 反轉過渡:
		// 1、正在過渡中:從first--》second過渡中,從當前時間點向回反轉過渡
		// 2、已經過渡完畢:從second過渡到first
		drawable.reverseTransition(3000);
	}

}
運行結果:



三、接下來是drawable下的shape旋轉,它用來實現的是設置按鈕的形狀,漸變顏色等屬性。

首先在drawable文件夾下新建類型爲shape的xml文件:

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

    <!--
    gradient:顏色變化漸變色
    android:angle=""必須是45的倍數
    -->
    <gradient
        android:angle="90"
        android:endColor="#0f0"
        android:startColor="#f00" />
	<!-- 製作圓角效果 
	通過android:radius=""設置圓角,屬性值越大圓角越圓,普通按鈕最大50dp
	給定的值就是半徑值
	-->
	<corners 
	    android:radius="40dp"/>
	<!-- 用來實現描邊
	android:width=""用於定義線的粗細
	 -->
	 <stroke android:width="2dp"
	     android:color="#f00"/>
	 <!-- 單純的顏色 -->
	 <solid android:color="#f00"/>
</shape>
然後在佈局文件中引用我們定義的shape.xml文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical" >

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:text="按鈕一"/>
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape2"
        android:layout_marginTop="10dp"
        android:text="按鈕二"/>
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector"
        android:layout_marginTop="10dp"
        android:text="按鈕三"/>

</LinearLayout>
第三個按鈕的selector標籤:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="false">
        <shape >
            <gradient android:startColor="#fff"
                android:endColor="#fff"/>
            <corners android:radius="20dp"/>
            <stroke android:width="1dp"
                android:color="#f00"/>
        </shape>
        
    </item>
    <item android:state_pressed="true">
        <shape >
            <gradient android:startColor="#0f0"
                android:endColor="#0f0"/>
            <corners android:radius="20dp"/>
            <stroke android:width="1dp"
                android:color="#f00"/>
        </shape>
        
    </item>

</selector>
運行結果:



四、最後實現的是include,就是在一個佈局中的子類佈局LinearLayout或RelativeLayout引用另外一個佈局文件。

首先我們定義一個activity_item.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView 
        android:id="@+id/iv_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bd"/>

</LinearLayout>
然後是在另一個佈局文件中引用該佈局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="inport"
        android:text="點擊導入佈局" />

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <!-- 通過include標籤將另外一個佈局導入到當前的佈局中 -->

        <include layout="@layout/activity_item" />
    </LinearLayout>

</LinearLayout>
當然我們也可以點擊按鈕通過切換item中的圖片就可以改變引用的圖片:

package com.example.text01;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;

public class IncludeActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_include);
	}
	//通過點擊按鈕改變導入佈局中的View組件
	public void inport(View view){
		//能否獲取一個ImageView對象
		ImageView iv = (ImageView) findViewById(R.id.iv_item);
		iv.setImageResource(R.drawable.lamp_on);
	}

}
運行結果:



五、這裏還有最後一個標籤inset用來設置背景圖片的壓縮方向和壓縮比例,我們可以在佈局文件中的父類標籤引用該標籤。

同樣,在drawable文件夾下新建標籤爲inset的xml文件:



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