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