Android控件與佈局——基礎控件ImageButton

        最近在用原生的控件和佈局繪製一些界面並使用，雖然這些都是Android基本知識，但是有的時候真的感覺力不從心，感覺有必要對Android常用的控件和佈局做一個系統的瞭解。後續一個月甚至更多的時間都會圍繞這個主題展開，畢竟這裏面還是有不少高級控件的，我也會盡量結合應用深入的進行了解。

上一篇：ImageView    下一篇：VideoView

在上一篇中，我們對ImageView做了簡單的介紹，本篇我們的主題是它的一個子類ImageButton，首先我們來看一個關於它的文檔介紹

* <p>
* Displays a button with an image (instead of text) that can be pressed 
* or clicked by the user. By default, an ImageButton looks like a regular 
* {@link android.widget.Button}, with the standard button background
* that changes color during different button states. The image on the surface
* of the button is defined either by the {@code android:src} attribute in the
* {@code <ImageButton>} XML element or by the
* {@link #setImageResource(int)} method.</p>

通過一個用戶可按壓和點擊的Image來展示一個Button，默認情況下，一個ImageButton是一個隨着狀態變化顏色也隨之變化的長方形。我們可以通過android:src屬性或者setImageResource（）接口對展示圖片資源進行設置。

上面對該API做了一個概括的介紹，我們可以把它理解爲“替換文本爲圖片的Button” ，Okay，我們接着往下看

* <p>To remove the standard button background image, define your own 
* background image or set the background color to be transparent.</p>
* <p>To indicate the different button states (focused, selected, etc.), you can
* define a different image for each state. E.g., a blue image by default, an
* orange one for when focused, and a yellow one for when pressed. An easy way to
* do this is with an XML drawable "selector." 

你可以編輯自己的Drawable文件根據不同的狀態來顯示不同的圖片，和Button一樣的

這個控件擴展的功能很少，該類完整代碼也就100行左右，基本上都是繼承ImageView屬性與功能，下面我們就來看看實際的使用效果。

可見，默認情況下其背景和Button是一樣，當我們的圖片不能完全覆蓋ImageButton佈局時，建議通過對其背景進行透明設置即可。下面我們就來編輯我們的drawable文件實現一個開關圖標切換的效果

這和很多播放器的暫停和開始有點像，只不過現在基本上都是做成動畫了，通過以下幾步，實現也是非常簡單

• 第一步：編輯兩個drawable文件，分別表示ImageButton的開和關兩種狀態顯示的圖片資源文件
• 第二步：在Drawable（XML）中通過<selector>標籤定義（ImageButton）不同狀態下顯示的圖片
• 第三步：自己定義一個狀態變量用於控制狀態切換即可

主要的邏輯代碼：

package aoto.com.commonwidgetandlayout.basic_widget.ImageButton;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;

import aoto.com.commonwidgetandlayout.R;

/**
 * @author why
 * @date 2019-7-4 11:42:48
 */
public class ImageButtonActivity extends AppCompatActivity {

    boolean isOpen=true;
    ImageButton imageButton;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_button);
        imageButton=findViewById(R.id.test_image_button);
        textView=findViewById(R.id.opener_label);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isOpen){
                    imageButton.setImageResource(R.drawable.image_button_test_stop);
                    isOpen=false;
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            textView.setText("狀態：關");
                            textView.setTextColor(Color.RED);
                        }
                    });
                }
                else {
                    imageButton.setImageResource(R.drawable.image_button_test_start);
                    isOpen=true;
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            textView.setText("狀態：開");
                            textView.setTextColor(Color.BLACK);
                        }
                    });
                }
            }
        });
    }
}

其實，上面的效果我們通過Button也是完全可以實現的，下面我們就來看一下兩者的區別：

• Button可以顯示文本，圖片以及文本和圖片同時顯示；但是對於ImageButton，只能顯示圖片

• ImageButton可以設置前景圖和背景圖，實現一個疊加的效果，比如：

        <ImageButton
            android:background="@drawable/bear_photo_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageButton
            android:layout_marginLeft="20dp"
            android:src="@drawable/bear_face"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageButton
            android:layout_marginLeft="20dp"
            android:background="@drawable/bear_photo_back"
            android:src="@drawable/bear_face"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

 

• ImageButton上的圖像可以按照比例進行拉伸，而Button上的大圖會拉伸變形 

關於ImageButton就介紹到這裏了，如果對你有幫助，可以掃碼關注一波。

注：歡迎掃碼關注