最近的一些個人小作品經常要用到一些控制開始或者暫停的圖片按鈕(類似音樂播放軟體控制音樂播放或暫停的按鈕),現放出來給大家分享下。 主要功能:點擊一次就更換為另一種狀態,再點擊一次就更換回原來的狀態。 首先,我們需要一個layout文件 control_button.xml 一個簡單的LinearLa ...
最近的一些個人小作品經常要用到一些控制開始或者暫停的圖片按鈕(類似音樂播放軟體控制音樂播放或暫停的按鈕),現放出來給大家分享下。
主要功能:點擊一次就更換為另一種狀態,再點擊一次就更換回原來的狀態。
首先,我們需要一個layout文件
control_button.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" > </LinearLayout>
一個簡單的LinearLayout佈局文件,當然,如果你要RelativeLayout也行,這個因個人愛好而設置,對後面的功能實現不會產生多大的影響。
接著,定義一個resourse文件,用來定義一些Button的屬性。
ChangeButton.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ChangeButton"> <attr name="start" format="reference" /> <attr name="stop" format="reference" /> </declare-styleable> </resources>
給Button定義兩個屬性,一個是表示開始的狀態,另一個表示結束的狀態。
接下來就是最關鍵的部分了(自我認為挺關鍵的)
創建一個類繼承LinearLayout(這個看你的layout文件是用哪種佈局,因為我上面使用LinearLayout,所以就繼承LinearLayout)
ChangeButton.java
package view; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.LinearLayout; public class ChangeButton extends LinearLayout { /** * 命名空間 */ private static String NAMESPACE = "http://schemas.android.com/apk/res/com.cmb.music"; /** * 存放第一張圖片在R文件中的Int值,預設為0 */ private int startImage = 0; /** * 存放第二張圖片在R文件中的Int值,預設為0 */ private int stopImage = 0; /** * 判斷處於哪個狀態,預設為false */ private boolean isStart = false; /** * 構造函數1 * @param context */ public ChangeButton(Context context) { super(context); initView(); } /** * 構造函數2 * @param context */ public ChangeButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(); } /** * 構造函數2 * @param context */ public ChangeButton(Context context, AttributeSet attrs) { super(context, attrs); // 獲取圖片的Int值 startImage = attrs.getAttributeResourceValue(NAMESPACE, "start", R.drawable.start); stopImage = attrs.getAttributeResourceValue(NAMESPACE, "stop", R.drawable.stop); initView(); } public boolean isStart(){ return isStart; } /** * 初始化函數 */ private void initView(){ View.inflate(getContext(), R.layout.item_control_button, this); this.setClickable(true); if(stopImage == 0){ return ; }else{ setIsStart(isStart); } } /** * 通過傳進一個boolean值,設置按鈕的狀態 * @param isStart 設置開始或者暫停的狀態 */ public void setIsStart(boolean isStart){ this.isStart = isStart; if(isStart){ this.setBackgroundResource(startImage); } else{ this.setBackgroundResource(stopImage); } } }
關於命名空間,就是http://schemas.android.com/apk/res/+包名,不懂得請先看看xml裡面關於命名空間的相關資料,這裡就不再說明。
startImage,stopImage,正如註釋所講的就是狀態圖片在R文件中的int值,用於接收用戶自己定義的兩張圖片。
對於三個構造函數,
第一個構造函數是在該組件沒有屬性沒有樣式時調用的,這裡我們不用到。
第二個構造函數是當該組件在聲明時調用了樣式時調用的,這裡我們也用不到。
第三個構造函數是在該組件在聲明時只有屬性時調用的,我們主要用到的就是這個函數。
在第三個構造函數中,用我們前面定義的startImage和stopImage接收start和stop屬性。
寫完這個類,我們的按鈕就基本完成了,將它放入main_layout.xml文件中試試。
main_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:cmb="http://schemas.android.com/apk/res/com.example.changebutton" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.changebutton.MainActivity" > <com.example.changebutton.ChangeButton android:id="@+id/btn_control" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerInParent="true" cmb:start="@drawable/start_selector" cmb:stop="@drawable/stop_selector" > </com.example.changebutton.ChangeButton> </RelativeLayout>
不要忘了命名空間哦,這個很重要。
接下來,在MainActivity.java文件裡面配置一下
MainActivity.java
package com.example.changebutton;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
public class MainActivity extends ActionBarActivity {
ChangeButton mChangeButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mChangeButton = (ChangeButton) findViewById(R.id.btn_control);
mChangeButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mChangeButton.setIsStart(!mChangeButton.isStart());
}
});
}
}
按鈕完成,現在可以測測看了。
總結:第一次寫博客,心裡有點小緊張,有錯誤的地方希望大家能幫我指出。
附上源代碼:http://pan.baidu.com/s/1cdW84A