Android筆記(14)：UI元件 ImageView ＆ ImageButton 圖框及圖形按鈕

Photo by Luca on Unsplash

圖片的運用，在手機/平板的應用程式中也很常見，不論是選單上的圖示，或是使用圖片當成背景圖，都是圖片應用的範例，這一篇來學習如何處理圖片，以及使用 2 個圖片按鈕來更換 ImageView 的圖片。

[ImageView]

ImageView 主要的功能是顯示圖片或資源中的檔案，如 Bitmap 或 Drawable 目錄內的圖片檔，除了顯示還可以簡單處理圖片縮放。ImageView 元件顯示圖片時，通常會將要顯示的圖片放在 res\drawable 或者 res\ mipmap 目錄中。如要使用 ImageVIew，可在 Layout 佈局檔中使用 <imageview> 標記來設定，語法格式如下：

<ImageView
   android:屬性 = "值"> 
</ImageView>

ImageView 繼承自 View 元件，可以直接使用 View 支援的屬性和方法，其他常用的屬性如下：

XML屬性	描述
src	設定 ImageView 顯示的 res/Drawable 物件ID，使用 android:src="@drawable/id" 存取。
scaleType	設定顯示的圖片縮放或移動以適應 ImageView 的大小，請參考下方說明。
adjustViewBounds	設定 ImageView 元件是否調整邊界來保持顯示圖片的長寬比。
maxHeight	設定 ImageView 元件的最大高度，在 adjustViewBounds 屬性值為 true 才有作用。
maxWidth	設定 ImageView 元件的最大寬度，在 adjustViewBounds 屬性值為 true 才有作用。
tint	為圖片著色的設定，其屬性值可以是 #rgb、#argb、#rrggbb 或 #aarrggbb 表示的顏色值。

屬性 scaleType 可以設定為以下參數:

參數值	描述
matrix	使用 matrix 方式進行縮放。
fitXY	對圖片橫向、縱向獨立縮放，讓圖片可以放在 ImageView內，圖片的長寬比可能會改變。
fitStart	保持長寬比縮放圖片，直到圖片可完全顯示在 ImageView 中，縮放後圖片對齊 ImageView 左上角。
fitCenter	保持長寬比縮放圖片，直到圖片可完全顯示在 ImageView 中，縮放後圖片對齊 ImageView 中間。
fitEnd	保持長寬比縮放圖片，直到該圖片能完全顯示在 ImageView 中，縮縮放後圖片對齊 ImageView 右下角。
center	將圖片放在 ImageView 中間，不進行任何縮放。
centerCrop	保持長寬比縮放圖片，使圖片能完全覆蓋 ImageView。
centerInside	保持長寬比縮放圖片，使 ImageBView 能完全顯示該圖片。

當圖片大於 ImageView 的長寬時，圖片呈現的畫面如下：

ImageView 有兩個可以設置圖片的屬性：src 和 background，background 用來設定背景，src 則為設定 ImageView 內容。在 background 填入的圖片會根據ImageView 給定的寬度來進行拉伸，而 src 填入的圖片，則是按照圖片大小直接填充，並不會進行拉伸。

除了在 Layout 佈局檔設定 XML 的 src 圖片來源外，還可以在 java 中設定圖片，常用的函數如下：

ImageView.方法	描述
setlmageBitmap(Bitmap bm)	使用 Bitmap 位圖設定 ImageView 顯示的圖片。
setlmageDrawable(Drawable drawable)	使用 drawable 對象設定 ImageView 顯示的圖片。
setlmageResource(int resld)	使用圖片資源ID 設定 ImageView 顯示的圖片。
setlmageURI(Uri uri)	使用圖片的URI 設定 ImageView 顯示的圖片。

[ImageButton]

ImageButton 圖片按鈕繼承自 ImageView，而 ImageView 繼承自 View 類別。ImageButton 與 Button 的使用方法大致相同，差別在於設定圖片的幾個屬性，例如用於設定要顯示來源圖片的 android:src 屬性。ImageButton 使用<ImageButton> 標記定義，在佈局檔中添加圖片按鈕的基本語法格式如下：

在增加 ImageButton 時，若沒有設定 background 屬性時，看到的圖片會顯示在一個灰色的按鈕上，也就是說所 ImageButton圖片按鈕會帶有一個灰色立體的邊框。這時如果按下圖片按鈕，會因使用者的動作而改變，一旦設定了android:background 屬性後，就不會因使用者的動作而改變。如果要能因使用者的動作而改變，需要使用StateListDrawable 方法，之後再來瞭解 ImageButton 進階的用法。

[程式範例]

(1)新建一個模組 Module，進入 res/layout 目錄下點選佈局檔 activity_main.xml。將預設的內容刪除，建立 1 個 ImageView 存放要顯示的照片，2 個 ImageButton 作為「上一頁」、「下一頁」的按鈕，以下是整個 XML 的內容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="600sp"
        android:layout_alignParentLeft="true"
        android:scaleType="fitCenter"
        android:src="@drawable/photo15" />

    <ImageButton
        android:id="@+id/btnPrev"
        android:layout_width="80sp"
        android:layout_height="30sp"
        android:scaleType="fitCenter"
        android:layout_below="@+id/iv"
        android:layout_marginLeft="100sp"
        android:layout_marginTop="20sp"
        android:src="@drawable/prev"
        android:background="#FBAA1D" />

    <ImageButton
        android:id="@+id/btnNext"
        android:layout_width="80sp"
        android:layout_height="30sp"
        android:scaleType="fitCenter"
        android:layout_below="@+id/iv"
        android:layout_marginLeft="40sp"
        android:layout_marginTop="20sp"
        android:layout_toRightOf="@id/btnPrev"
        android:src="@drawable/next"
        android:background="#FBAA1D" />

</RelativeLayout>

(2)在 MainActivity.java 的 onCreate() 方法之前先將 drawable 的圖片存到 photoID 陣列內，並建立幾個翻頁的變數，在 onCreate() 方法內，先建立與佈局檔的物件，用 findValueById 連結元件，和普通按鈕一樣，需要為 ImageButton 建立上一頁和下一頁兩個 onClick 的事件監聽器(setOnClickListener)，然後重寫兩個 onCreate() 事件，將指標 idx 增加或減少，再使用 setImageResource 將陣列中的圖片放到 ImageView 中。程式碼如下：

    
package com.example.myimageview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;

public class iv_MainActivity extends AppCompatActivity {

    // 將所有圖片儲存至陣列中
    int[] photoId={R.drawable.photo15,R.drawable.photo16,R.drawable.photo17,
            R.drawable.photo18,R.drawable.photo19,R.drawable.photo20,
            R.drawable.photo21,R.drawable.photo22,R.drawable.photo23   };
    private ImageButton btnPrev,btnNext;
    private ImageView iv;
    int idx = 0;   // 第幾張圖片變數
    int count = photoId.length;   // 共有多少張圖片

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_iv_main);

        // 取得 Layout 佈局檔中的介件
        btnPrev = (ImageButton) findViewById(R.id.btnPrev);
        btnNext = (ImageButton)findViewById(R.id.btnNext);
        iv = (ImageView)findViewById(R.id.iv);

        // 設定 ImageButton 元件 onClick 事件監聽器
        btnPrev.setOnClickListener(btnPrevListener);
        btnNext.setOnClickListener(btnNextListener);
    }

    //  btnPrev 按鈕的 onClick() 方法
    private ImageButton.OnClickListener btnPrevListener=new ImageButton.OnClickListener(){
        public void onClick(View v){
            idx--;
            if (idx < 0)
                idx = count-1;
            iv.setImageResource(photoId[idx]);    //設定 ImageView 資源
            setTitle((idx+1) + "/" + count);
        }
    };

    //  btnNext 按鈕的 onClick() 方法
    private ImageButton.OnClickListener btnNextListener=new ImageButton.OnClickListener(){
        public void onClick(View v){
            idx++;
            if (idx == count)
                idx = 0;
            iv.setImageResource(photoId[idx]);   //設定 ImageView 資源
            setTitle((idx+1) + "/" + count);
        }
    };
}

程式執行的結果如下：

[參考資料]

• Developer : ImageView
• Developer : ImageButton
• 碁峰出版社: Android 初學特訓班(第三版)