所謂的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文件: