UI组件：ImageView及其子类

来源：互联网发布：通天绳解密知乎编辑：程序博客网时间：2024/05/22 16:41

ImageView继承自View。

ImageView派生出了ImageButton、ZoomButton等组件，ImageView的XML属性和方法，ImageButton、ZoomButton基本上也可以应用这些属性和方法。

ImageView的基本用法

ImageView常见XML属性及相关方法

XML属性相关方法说明 android:maxHeight setMaxHeight(int) 设置ImageView的最大高度 android:maxWidth setMaxWidth(int) 设置ImageView的最大宽度 android:scaleType setScaleType(ImageView.ScaleType) 设置所现实的图片如何缩放或移动以适应ImageView的大小 android:src setImageResource(int) 设置ImageView所显示的Drawable对象的ID

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

setImageBitmap(Bitmap bm) : 使用Bitmap位图设置该ImageView显示的图片。

setImageDrawable(Drawable drawable) : 使用Drawable对象设置该ImageView显示的图片。

setImageResource(int resId) : 使用图片资源ID设置该ImageView显示的图片。

setImageURI(Uri uri) : 使用图片的URI设置该ImageView显示的图片。

图片浏览器的实例

本例中定义了两个ImageVIew，一个用于查看图片整体，一个用户来查看局部的细节。
布局文件代码如下：

<?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"    android:gravity="center_horizontal"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <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/image"        android:layout_width="match_parent"        android:layout_height="240dp"        android:src="@drawable/picture1"        android:layout_marginTop="10dp"        android:scaleType="fitCenter"/>    <!--定义显示图片局部的ImageView-->    <ImageView        android:id="@+id/scale_image"        android:layout_width="120dp"        android:layout_height="120dp"        android:background="#c2c0c0"        android:layout_marginTop="10dp"/></LinearLayout>

主程序代码如下：

package com.example.administrator.imageviewinfo;import android.graphics.Bitmap;import android.graphics.drawable.BitmapDrawable;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.MotionEvent;import android.view.View;import android.widget.Button;import android.widget.ImageView;public class MainActivity extends AppCompatActivity implements View.OnClickListener{    //定义一个访问图片的数组    private int[] images = {R.drawable.picture1,            R.drawable.picture2,            R.drawable.picture3,            R.drawable.picture4};    //定义默认显示的图片    private int currentImage = 2;    //定义图片的其实透明度    private float alpha = 1;    private Button minus;    private Button plus;    private Button next;    private ImageView image;    private ImageView scaleImage;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        minus = (Button) findViewById(R.id.minus);        plus = (Button) findViewById(R.id.plus);        next = (Button) findViewById(R.id.next);        image = (ImageView) findViewById(R.id.image);        scaleImage = (ImageView) findViewById(R.id.scale_image);        plus.setOnClickListener(this);        minus.setOnClickListener(this);        next.setOnClickListener(this);        image.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                BitmapDrawable bitmapDrawable = (BitmapDrawable) image.getDrawable();                //获取第一个图片显示框中的位图                Bitmap bitmap = bitmapDrawable.getBitmap();                //bitmap图片实际大小与第一个ImageView的缩放比例                double scale = bitmap.getWidth()/320.0;                //获取需要显示的图片的开始点                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;                }                //显示图片的指定区域                scaleImage.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));                scaleImage.setAlpha(alpha);                return false;            }        });    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.minus :                alpha -= 0.1;                changeImageAlpha();                break;            case R.id.plus :                alpha += 0.1;                changeImageAlpha();                break;            case R.id.next :                //控制显示下一张图片                image.setImageResource(images[++currentImage%images.length]);                break;        }    }    private void changeImageAlpha(){        if (alpha >= 1){            alpha = 1;        }        if (alpha<= 0){            alpha = 0;        }        //改变图片的透明度        image.setAlpha(alpha);    }}

当触碰到第一张图片时，将会从源位图的触碰点截获源位图，并将截获的部分显示在第二个ImageView中。此时用到了Bitmap，它是一个代表位图的类，调用它的createBitmap()静态方法即可截取位图的指定部位。
程序效果如下图所示：

ImageButton及其子类的用法

ImageButton是ImageView的子类，它与Button之间的区别在于，Button显示的是文本，而ImageButton显示的是图片。

ImageButton的android:text 属性没用，即使指定了文字，图片按钮上也不会显示。

ZoomButton是ImageButton的子类，它可以代表“放大”和“缩小”两个按钮。只要为ZoomButton的android：src分别指定btn_minus,btn_pluns,即可实现放大和缩小按钮。

Android还提供了一个ZoomControls组件，该组件相当于同时组合了放大和缩小两个按钮，并允许为这两个按钮指定事件监听器。

下面定义了这三种按钮，代码如下所示：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"    android:gravity="center_horizontal"    android:orientation="vertical"    tools:context="com.example.administrator.imageviewinfo.Main2Activity">    <ImageButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/button"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:orientation="horizontal">        <ZoomButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@android:drawable/btn_minus"/>        <ZoomButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@android:drawable/btn_plus"/>    </LinearLayout>    <ZoomControls        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></LinearLayout>

界面效果如下图所示：
这里写图片描述

QuickContactBadge的用法

QuickContactBadge继承自ImageView，也可以用android:src属性指定它显示的图片。
QuickContactBadge额外的功能是：该图片可以关联到手机中指定联系人，当用户单击该图片时，系统会打开相应联系人的联系方式界面。
有如下方法可以调用，实现与特定人的关联：

assignContactFromEmail(String emailAddress, boolean lazyLookup) ：将该图片关联到指定E-mail 地址对应的联系人。

assignContactFromPhone(String phoneNumber, boolean lazyLookup) : 将该图片关联到指定电话号码对应的联系人。

assignContactUri(Uri contactUri) : 将该图片关联到指定Uri对应的联系人。

下面的演示演示了如何使用QuickContactBadge关联特定联系人。
布局文件代码如下所示：

<?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"    android:orientation="horizontal">    <QuickContactBadge        android:id="@+id/badge"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_margin="10dp"        android:src="@drawable/person"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="13dp"        android:textSize="15sp"        android:text="我的偶像"/></LinearLayout>

接下来在Activity文件中让QuickContactBadge与特定联系人建立联系，代码如下：

package com.example.administrator.imageviewinfo;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.QuickContactBadge;public class QuickContactBadgeActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_quick_contact_badge);        QuickContactBadge badge = (QuickContactBadge) findViewById(R.id.badge);        //将QuickContactBadge组件与特定电话号码对应的联系人建立联系        badge.assignContactFromPhone("15161189403",false);    }}

界面效果如下图所示：

当点击左上角的QuickContactBadge组件时，如果手机中存储有电话号码为15161189403的联系人时，将会打开该联系人。
单击后，效果如下所示：

0 0