【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执行结果：