Button(按鈕)與ImageButton(影像按鈕)
本節引言:
今天給大家介紹的Android基本控件中的兩個按鈕控件,Button普通按鈕和ImageButton圖像按鈕; 其實ImageButton和Button的用法基本上類似,至於圖片相關的則和後面ImageView相同,所以本節 只對Button進行解說,另外Button是TextView的子類,所以TextView上很多屬性也可以套用到Button 上!我們實際開發中對於Button的,無非是對按鈕的幾個狀態做對應的操作,例如:按鈕按下的時候 用一種顏色,彈起又一種顏色,或是按鈕不可用的時候一種顏色這樣!上述實作無非是透過StateListDrawable這種Drawable資源來實現,也就是寫一個drawable的資源文件,就說這麼多, 直接開始本節內容~
1.StateListDrawable簡介:
StateListDrawable是Drawable資源的一種,可以根據不同的狀態,設定不同的圖片效果,關鍵節點< selecotr >,我們只需要講Button的blackground屬性設定為該drawable資源即可輕鬆實現,按下 按鈕時不同的按鈕顏色或背景!
我們可以設定的屬性:
#drawable:引用的Drawable位圖,我們可以把他放到最前面,就表示元件的正常狀態~
state_focused:是否取得焦點
##state_window_focused:是否獲得視窗焦點
state_enabled:控制項是否可用
state_checkable#:控制項可否被勾選,eg:checkbox
state_checked:控制項是否被勾選
state_selected :控制項是否被選擇,針對有滾輪的情況
state_pressed:控制項是否被按下
state_active:控制項是否處於活動狀態,eg:slidingTab
#state_single:控制項包含多個子控制項時,決定是否只顯示一個子控制項
state_first:控制項包含多個子控制項時,決定第一個子控制項是否處於顯示狀態
state_middle:控制項包含多個子控制項時,決定中間一個子控制項是否處於顯示狀態
state_last:控制項包含多個子控制項包含多個子控制項時,確定最後一個子控制項是否處於顯示狀態
2.實現按鈕的按下效果:好的,先準備三個圖片背景,一般我們為了避免按鈕拉伸變形都會使用.9.png作為按鈕的drawable! 先來看下
執行效果圖:
#程式碼實作:
<按鈕
android:text="按鈕"/>
android: layout_width="match_parent"
android:layout_height="64dp"
android:text="按鈕不可用"/>
MainActivity.java:
私有按鈕btnOne,btnTwo;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstance btnOne = (Button) findViewById(R.id.btnOne);
btnTwo = (Button) findViewById(R.id.btnTwo);
btn @Override
public void onClick(View v) {
. getText().toString().equals("按鈕不可用")){
btnTwo.setText("按鈕可用");
}else{
#) # btnOne.setEnabled(true);
btnTwo.setText("按鈕 }
});
}
##}
3.使用顏色值繪製圓角按鈕
很多時候我們不一定會有美工是吧,或者我們不會PS或毀圖秀秀,又或者我們懶,不想自己做圖, 這時候我們可以自己寫程式作為按鈕背景,想要什麼顏色就什麼顏色,下面我們來客製個圓角的 的按鈕背景~,這裡牽涉到另一個drawable資源:ShapeDrawable,這裡不詳細講,後面會詳細介紹每一個 drawable~這裡會用就好,只是EditText修改下Background屬性而已,這裡只貼drawable資源!
先看效果圖:
bbuton_danger_rounded.xml:
<角android:radius="@dimen/bbuton_rounded_corner_rad
##
<描邊描繪/bbutton_danger_disabled_edge" />
<角部 android:radius="@dimen/bbuton_rounded_corner_radius
<角位android:radius= "@dimen/bbuton_rounded_corner_radius"/>
color.xml:
<color name="bbutton_danger_pressed">#ffd2322d</color>
<color name="bbbton_danger_edge_edge;#dlt <顏色名稱=“bbutton_danger_disabled”>#a5d9534f
<顏色名稱=“bbutton_danger_disabled_edge”>#a5d43f3a顏色>
#> <顏色名稱=“text_font_white”>#FFFFFF顏色>
資源>
4.實現Material Design水波效果的Button
如果你的Android手機是5.0以上的系統,相信對下面這種按鈕點擊效果並不會陌生:
實現效果圖:
#快的那個是按下後的效果,慢的是長按後的效果!
實作邏輯:
1.我們繼承ImageButton,當然你可以換成Button或View,這裡筆者想把龜放到中間才繼承ImageButton
2.首先,建立兩個Paint(畫筆)對象,一個繪製底部背景顏色,一個繪製波紋擴散的
3.接著計算最大半徑,開始半徑每隔一段時間遞增一次,直到等於最大半徑,然後重置狀態!
PS:大概的核心,剛學可能對自訂View感到陌生,沒事,這裡了解下即可,以後我們會講,當然 你可以自己扣扣,註解還是蠻詳細的~
實作程式碼:
#自訂ImageButton:MyButton.java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.SystemClock;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.widget.ImageButton;#import android.widget.ImageButton;#import android.widget.ImageButton;
##/**
* 由 coder-pig 於 2015/7/16 0016 創作。 */
public class MyButton extends ImageButton {
private static final int INVALIDATE_DURATION private static final int INVALIDATE_DURATION private static final int INVALIDATE_DURATION private static final int INVALIDATE_DURATION private static final int IN static int DIFFUSE_GAP = 10; //擴散半徑增量
private static int TAP_TIMEOUT; //判斷點擊和長按的時間
private int viewWidth, viewHeight; //控件寬高
private int pointX, pointY; ///11)( //擴散中最大的半徑
private int sha derRadio c private Paint bottomPaint, colorPaint ; //畫筆:背景與水波紋
private boolean isPushButton; eventY; //觸控位置中的X,Y座標
private long downTime = 0; //所依的時間
######################################################## public MyButton(Context context, AttributeSet attrs) {
super(context, attrs);
init # }
/*
* 初始化筆刷
* */
private void initPaint() bottomPaint = new Paint();
colorPaint.setColor (getResources().getColor(R.color.reveal_color));
bottomPaint.setColor(getResources().getColor(R.color.bottom_color) 覆蓋
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {## if (downTime == 0) downTime = SystemClock.elapsedRealtime();
eventX = (int) event.getX();
//計算最大引用:
countMaxRadio();
;
postInvalidateDelayed(INVALIDATE_DURATION);
Event.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
TAP_TIMEOUT){
DIFFUSE_GAP = 30;
postInvalidate();
}else{
clearData();
}
break;
}
return super.onTouchEvent(event);
}
@Override
protected void dispatchDraw(Canvas canvas) {
ushButton) return; //如果按鈕沒有被按下則回傳
//上所按下後的整個背景
canvas.drawRect(pointX, pointY, pointX save();
//繪製擴散圓形背景
canvas.clipRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight);
canvas.restore( );
//到半徑等於最大半徑
if(shaderRadio < maxRadio){
,fopUR_ pointX, pointY, pointX + viewWidth, pointY + viewHeight);## += DIFFUSE_GAP;
}else{
clearData();
* 計算最大半徑的方法
* */
private void countMaxRadio() {
if (eventX < viewWidth / 2) {
maxRadio = viewWidth - eventX;
} else {
}
} else {
maxRadio = viewHeight - eventY;
} else {
}
}
# }
android:layout_width="match_parent"
android:layout_height="64dp • android:background="../style/images/ Bottom_bg"
android:scaleType="center"/>
</RelativeLayout>
# /*
* 重置資料的方法
* */
private void clearData(){
;
isPushButton = false;
shaderRadio = 0;
postInvalidate();
}
@Override
) {
super.onSizeChanged( w, h, oldw, oldh);
this.viewWidth = w;
<b>color.xml:</b></p>
<pre>
<?xml version="1.0" encoding="utf-8"?>
<資源>
<顏色名稱=「reveal_color」>#FFFFFF顏色>
<顏色名稱=「bottom_color」>#3086E4顏色>
<顏色name="bottom_bg">#40BAF88
activity_main.xml:
本節小結:
本節為大家介紹了Button在實際開發中的一些用法,可能有些東西我們還沒學過,這裡 知道下即可,後面學習自然會深入講解,謝謝~