ImageView

ImageView

ImageView 继承自 View 组件，它的组要功能是用于显示图片，任何 Drawable 对象都可以使用 ImageView 来显示。
除此之外，ImageView 还派生了 ImageButton、ZoomButton 等组件。

ImageView 支持的 XML 属性及相关方法

XML 属性	相关方法	说明
android:adjustViewBounds	setAdjustViewBounds(boolean)	设置 ImageView 是否调整自己的边界来保持所显示的图片长宽比
android:cropTopPadding	setCropToPadding(boolean)	如果将该属性设为true，该组件将会被裁减到保留该ImageView的padding
android:maxHeight	setMaxHeight(int)	设置ImageView的最大高度
android:maxWidth	setMaxWidth(int)	设置ImageView的最大宽度
android:scaleType	setScaleType(ImageView.ScaleType)	设置所显示的图片如何缩放或移动以适应ImageView的大小
android:src	setImageResource(int)	设置ImageView所显示的Drawable对象的ID

ImageView 所支持的 android:scaleType 属性可指定如下属性值。

1. matrix(ImageView.ScaleType.MATRIX) : 使用 matrix 方式进行缩放。
2. fitXY(ImageView.ScaleType.FIT_XY) : 对图片横向、纵向独立缩放，使得该图片完全适应于该 ImageView，图片的纵横比可能会改变。
3. fitStart(ImageView.ScaleType.FIT_START) : 保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中(图片较长的边长与 ImageView 相应的边长相等) ，缩放完成后将该图片放在 ImageView 的左上角。
4. fitCenter(ImageView.ScaleType.FIT_CENTER) : 保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中(图片较长的边长与 ImageView 相应的边长相等) ，缩放完成后将该图片放在 ImageView 的中央。
5. fitEnd(ImageView.ScaleType.FIT_END) : 保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中(图片较长的边长与 ImageView 相应的边长相等) ，缩放完成后将该图片放在 ImageView 的右下角。
6. center(ImageView.ScaleType.CENTER) : 把图片放在 ImageView 的中间，但不进行任何缩放。
7. centerCrop(ImageView.ScaleType.CROP) : 保持纵横比缩放图片，以使得图片能完全覆盖 ImageView。只要图片的最短边能显示出来即可。
8. centerInside(ImageView.ScaleType.CENTER_INSIDE) : 保持纵横比缩放图片，以使得 ImageView 能完全显示该图片。

为了控制 ImageView 显示的图片，ImageView 提供了如下方法。

1. setImageBitmap(Bitmap bm) : 使用 Bitmap 位图设置该 ImageView 显示的图片。
2. setImageDrawable(Drawable drawable) : 使用 Drawable 对象设置该 ImageView 显示的图片。
3. setImageResource(int resId) : 使用图片资源 ID 设置该 ImageView 显示的图片。
4. setImageURL(Uri uri) : 使用图片的 URI 设置该 ImageView 显示的图片。

实例：图片浏览器

程序清单：main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <LinearLayout  android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center">
        <Button android:id="@+id/plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="增大透明度"/>
        <Button android:id="@+id/minus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="降低透明度"/>
        <Button android:id="@+id/next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下一张"/>
    </LinearLayout>
    <!-- 定义显示图片整体的ImageView -->
    <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="280dp" android:src="@drawable/shuangta" android:scaleType="fitCenter"/>
    <!-- 定义显示图片局部细节的ImageView -->
    <ImageView android:id="@+id/image2" android:layout_width="120dp" android:layout_height="120dp" android:background="#00f" android:layout_margin="10dp"/>
</LinearLayout>

程序清单：MainActivity.java

package org.yonga.ui;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends Activity {
    // 定义一个访问图片的数组
    int[] images = new int[]{
            R.drawable.lijiang,R.drawable.qiao,R.drawable.shuangta,R.drawable.shui,R.drawable.xiangbi,};
    // 定义默认显示的图片
    int currentImg = 2;
    // 定义图片的初始透明度
    private int alpha = 255;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final Button plus = (Button) findViewById(R.id.plus);
        final Button minus = (Button) findViewById(R.id.minus);
        final ImageView image1 = (ImageView) findViewById(R.id.image1);
        final ImageView image2 = (ImageView) findViewById(R.id.image2);
        final Button next = (Button) findViewById(R.id.next);
        // 定义查看下一张图片的监听器
        next.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                // 控制ImageView显示下一张图片
                image1.setImageResource(
                        images[++currentImg % images.length]);
            }
        });
        // 定义改变图片透明度的方法
        View.OnClickListener listener = new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (v == plus)
                {
                    alpha += 20;
                }
                if (v == minus)
                {
                    alpha -= 20;
                }
                if (alpha >= 255)
                {
                    alpha = 255;
                }
                if (alpha <= 0)
                {
                    alpha = 0;
                }
                // 改变图片的透明度
                image1.setImageAlpha(alpha);
            }
        };
        // 为两个按钮添加监听器
        plus.setOnClickListener(listener);
        minus.setOnClickListener(listener);
        image1.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View view,MotionEvent event)
            {
                BitmapDrawable bitmapDrawable = (BitmapDrawable) image1
                        .getDrawable();
                // 获取第一个图片显示框中的位图
                Bitmap bitmap = bitmapDrawable.getBitmap();
                System.out.println(bitmap.getWidth());
                System.out.println(image1.getWidth());
                // bitmap图片实际大小与第一个ImageView的缩放比例
                double scale = 1.0 * bitmap.getHeight() / image1.getHeight();
                // 获取需要显示的图片的开始点
                int x = (int) (event.getX() * scale);
                int y = (int) (event.getY() * scale);
                if (x + 120 > bitmap.getWidth())
                {
                    x = bitmap.getWidth() - 120;
                }
                if (y + 120 > bitmap.getHeight())
                {
                    y = bitmap.getHeight() - 120;
                }
                // 显示图片的指定区域
                image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
                image2.setImageAlpha(alpha);
                return false;
            }
        });
    }
}

ImageView 派生了如下两个子类。

1. ImageButton：图片按钮。
2. QuickContactBadge：显示关联到特定联系人的图片。
Button 与 ImageButton 的区别在于，Button 生成的按钮上显示文字，而 ImageButton 上则显示图片。需要指出的是，为 ImageButton 按钮指定 android:text 属性没用(ImageButton 本质上是 ImageView )，即使指定了该属性，图片按钮上也不会显示任何文字。
如果考拉使用 ImageButton，图片按钮可以指定 android:src 属性，该属性既可使用精致的图片，也可使用自定义的 Drawable 对象，这样即可开发出随用户动作改变图片的按钮。
ImageButton 派生了一个 ZoomButton，ZoomButton 可以代表“放大”、“缩小”两个按钮。ZoomButton 的行为基本类似于 ImageButton，只是 Android 默认提供了 btn_minus、btn_plus 两个 Drawable 资源，只要为ZoomButton 的 android:src 属性分别指定 btn_minus、btn_plus，即可实现“缩小”、“放大”按钮。
实际上 Android 还提供了一个 ZoomControls 组件，该组件详单与同事组合了“放大”、“缩小”两个按钮，并允许分别为两个按钮绑定不同的事件监听器。

程序清单：main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <!-- 普通图片按钮 -->
    <ImageButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/blue" />
    <!-- 按下时显示不同图片的按钮 -->
    <ImageButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_selector" />
    <LinearLayout  android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10sp" android:layout_gravity="center_horizontal">
        <!-- 分别定义2个ZoomButton，并分别使用btn_minus和btn_plus图片 -->
        <ZoomButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_zoom_down" android:src="@android:drawable/btn_minus" />
        <ZoomButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_zoom_up" android:src="@android:drawable/btn_plus" />
    </LinearLayout>
    <!-- 定义ZoomControls组件 -->
    <ZoomControls android:id="@+id/zoomControls1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"/>
</LinearLayout>

实例：使用 QuickContactBadge 关联联系人

为了让 QuickContactBadge 与特定联系人关联，可以调用如下方法。
1. assignContactFromEmail(String emailAddapp\src\main\ress,boolean lazyLookup)：将该图片关联到指定 E-mail 地址对应的联系人。
2. assignContactFromPhone(String phoneNumber,boolean lazyLookup)：将该图片关联到指定电话号码对应的联系人。
3. assignContactFromUri(Uri contactUri)：将该图片关联到特定 Uri 对应的联系人。

程序清单：main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    <QuickContactBadge  android:id="@+id/badge" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher"/>
    <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:text="我的偶像"/>
</LinearLayout>

程序清单：MainActivity.java

package org.yonga.ui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.QuickContactBadge;


public class MainActivity extends Activity {
    QuickContactBadge badge;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // 获取QuickContactBadge组件
        badge = (QuickContactBadge) findViewById(R.id.badge);
        // 将QuickContactBadge组件与特定电话号码对应的联系人建立关联
        badge.assignContactFromPhone("020-88888888",false);
    }
}

【android_温故知新】第 3 组 UI 组件：ImageView 及其子类

ImageView

ImageView 支持的 XML 属性及相关方法

ImageView 所支持的 android:scaleType 属性可指定如下属性值。

实例：图片浏览器

ImageView 派生了如下两个子类。

实例：使用 QuickContactBadge 关联联系人

猜你在找的XML相关文章