【Android 開發】：UI控件之顯示圖檔控件 ImageView 的使用方法

ImageView主要是用來顯示圖檔的控件，可以對圖檔進行放大、縮小和旋轉的功能。

詳情請參考：http://developer.android.com/reference/android/widget/ImageView.html

實戰案例一：

ImageView控件的基本用法

程式布局檔案：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="scaleType: center 為縮放,放在ImageView的中心" />

    <ImageView
        android:id="@+id/imgaeview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F00"
        android:scaleType="center"
        android:src="@drawable/background" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="scaleType: fitCenter 按照比例來縮放" />

    <ImageView
        android:id="@+id/imageview2"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#FFF"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/background" />

</LinearLayout>
           

[注意 1]：

android:layout_width="wrap_content"
    android:layout_height="wrap_content"
           

這種圖檔的高度和寬度使用内容包裹屬性，則它的寬度和高度是由圖檔本身的寬度和高度來決定的

android:layout_width="300dp"
        android:layout_height="200dp"
           

第二種 采用固定比例，則圖檔在ImageView的顯示過程中是按這個比例來顯示的了

[注意 2]：

android:scaleType屬性指定ImageView控件顯示圖檔的方式

center：表示圖像以不縮放的方式顯示在ImageView控件的中心，

fitCenter：表示圖像按照比例縮放至合适的位置，并在ImageView控件的中心

程式主要代碼：

package com.android.imageviewbase;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class ImageViewBase extends Activity {
    private ImageView imageView;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();

        /*
         * 設定第一個圖檔的大小 setLayoutParams()表示設定整個布局 表示設定目前的這個布局的是來自線性布局的
         * 寬度200，高度100的區域.
         */

        imageView.setLayoutParams(new LinearLayout.LayoutParams(200, 100));
        setTitle("height" + imageView.getLayoutParams().height + "-- width --"
                + imageView.getLayoutParams().width);

    }

    private void initComponent() {
        imageView = (ImageView) findViewById(R.id.imgaeview);
    }
}
           

程式Demo執行結果：

[說明]：可見第一種效果是因為在程式中按長200，寬100 裁剪縮放後的 ImageView 的位置。第二種效果是直接按指定比例長300dp，寬200dp縮放

對比一下下面這個例子的使用方法：

1. 布局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="scaleType: center 為縮放,放在ImageView的中心" />

    <ImageView
        android:id="@+id/imgaeview"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#F00"
        android:scaleType="center"
        android:src="@drawable/background" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="scaleType: fitCenter 按照比例來縮放" />

    <ImageView
        android:id="@+id/imageview2"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#FFF"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/background" />

</LinearLayout>
           

2. 程式主要代碼：

package com.android.imageviewbase;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class ImageViewBase extends Activity {
    private ImageView imageView;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();

        /*
         * 設定第一個圖檔的大小 setLayoutParams()表示設定整個布局 表示設定目前的這個布局的是來自線性布局的
         * 寬度200，高度100的區域.
         */

//        imageView.setLayoutParams(new LinearLayout.LayoutParams(300, 200));
//        setTitle("height" + imageView.getLayoutParams().height + "-- width --"
//                + imageView.getLayoutParams().width);

    }

    private void initComponent() {
        imageView = (ImageView) findViewById(R.id.imgaeview);
    }
}
           

程式Demo執行結果：