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! 先來看下

執行效果圖:

1.gif

#程式碼實作:

<? ">
    
        

##佈局文件:
activity_main. xml

<按鈕
        android:id="@+id/btnOne"
        android:layout_width="match_par android:background=".. /style/images/btn_bg1"
        android:text="按鈕"/>
    
    
       android: layout_width="match_parent"
        android:layout_height="64dp"
        android:text="按鈕不可用"/>

MainActivity.java

公共類別MainActivity擴充了Activity{

    私有按鈕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資源!

先看效果圖:

2.gif

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





## dimens.xml:

5dp

#

4.實現Material Design水波效果的Button

如果你的Android手機是5.0以上的系統,相信對下面這種按鈕點擊效果並不會陌生:

實現效果圖:

3.gif

#快的那個是按下後的效果,慢的是長按後的效果!

實作邏輯:

1.我們繼承ImageButton,當然你可以換成Button或View,這裡筆者想把龜放到中間才繼承ImageButton

2.首先,建立兩個Paint(畫筆)對象,一個繪製底部背景顏色,一個繪製波紋擴散的

3.接著計算最大半徑,開始半徑每隔一段時間遞增一次,直到等於最大半徑,然後重置狀態!

PS:大概的核心,剛學可能對自訂View感到陌生,沒事,這裡了解下即可,以後我們會講,當然 你可以自己扣扣,註解還是蠻詳細的~

實作程式碼:

#自訂ImageButton:MyButton.java


package demo.com.jay.buttondemo;

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 {
              }
        }
#    }



    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

            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:

原始碼下載(AS工程的哦):ButtonDemo.zip

本節小結:

本節為大家介紹了Button在實際開發中的一些用法,可能有些東西我們還沒學過,這裡 知道下即可,後面學習自然會深入講解,謝謝~