android 自定義Button 及Animation的基本使用

在android開發中常用元件的使用是必不可少的，但是常用元件用來用去也就那麼幾種，滿足不了開發者對應用界面的要求，更滿足不了消費者對商業應用美觀，大方，時尚的要求，是以說學會自定義各種元件十分必要。

本例簡單的自定義了一個Button并結合了四個簡單animation進行展示，當點選Start按鈕時，四個Button會按照不同的Animation進行運動：

下面我們先看看怎麼實作自定義Button：

首先是布局檔案，就是一個AbsoluteLayoutli裡面有五個Button，其中四個是一列的自定義的Button，另一個是系統自帶的Button用于啟動綁定到四個Button上面的Animation。

這是單個自定義Button的聲明：

<Button
        android:id="@+id/bt1"
        android:layout_x="0dp"
        android:layout_y="100dp"
        android:text="@string/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bt_define" />
           

咋一看其實并沒什麼不一樣，好像就比平常多了一個background，其實關鍵是在這個background上面

這需要在res檔案夾裡建立一個drawable檔案件，再在drawable檔案夾裡建立一個bt_define.xml檔案：

裡面的内容如下：

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

    <item android:drawable="@drawable/bt" android:state_enabled="true" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/bt_bg" android:state_enabled="true" android:state_pressed="true"/>
    <item android:drawable="@drawable/bt_bg" android:state_checked="true" android:state_enabled="true"/>
    <item android:drawable="@drawable/bt"/>

</selector>
           

這相當與一個聲明檔案，就是當這Button正常顯示時背景就是bt,但當它被按下，或者擷取焦點的時候就背景就變成了bt_bg，這樣給以使用者才有被按下的感覺。如果單單隻有一個圖檔作為Button的background時，是沒有按下的效果的這是bt

這是bt_bg

，這隻是一個簡單的定義而已，還有更複雜，更有趣的需要自己去探索了

好了接着再簡單地綁定animation吧 

還是首先在res檔案夾裡建一個anim的檔案夾，再在裡面建幾個xml檔案：

分别為淡入淡出效果的，移動效果的，旋轉效果的和縮放效果的

具體代碼如下：

淡入淡出

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

    <alpha
        android:duration="3000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />

</set>
           

旋轉效果

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

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360" />

</set>
           

縮放效果

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

    <scale
        android:duration="3000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />

</set>
           

移動效果

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

    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="100"
        android:toYDelta="0" />

</set>
           

這是使用的xml的形式進行Animation的設定，還可以在java代碼中直接寫出，而且一個檔案可以有多種效果，多種結合方式，更多設定選項還有各子的意義這裡就不一一列舉出來，自己在網站上都能找到，最後是Activity的代碼：

package sina.CreAmazing.muti_button;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class MutiButtonActivity extends Activity {
    /** Called when the activity is first created. */
	
	private Button btStart;
	private Button bt1;
	private Button bt2;
	private Button bt3;
	private Button bt4;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        findViews();
        btStart.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				startAnimation();
			}
		});
    }

	

	private void findViews() {
		// TODO Auto-generated method stub
		btStart = (Button) findViewById(R.id.bt_start);
		bt1 = (Button) findViewById(R.id.bt1);
		bt2 = (Button) findViewById(R.id.bt2);
		bt3 = (Button) findViewById(R.id.bt3);
		bt4 = (Button) findViewById(R.id.bt4);
	}
    
	
	
	private void startAnimation(){
		bt1.startAnimation(AnimationUtils.loadAnimation(this, R.anim.bt_alpha));
		bt2.startAnimation(AnimationUtils.loadAnimation(this, R.anim.bt_rotate));
		bt3.startAnimation(AnimationUtils.loadAnimation(this, R.anim.bt_scale));
		bt4.startAnimation(AnimationUtils.loadAnimation(this, R.anim.bt_translate));
	}
}
           

其實隻要巧妙的利用Animation就能為應用作出很多很酷效果，在下一篇将會講到。。。

項目源代碼如下：

http://115.com/file/c24t5f8r#AnimationButton.rar