• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Widget简单组件 图片视图(ImageView)

互联网 diligentman 10个月前 (03-30) 40次浏览

ImageView

ImageView继承自View组件,主要用于显示图像资源(例如图片等), ImageView还可以定义所显示的尺寸等。此外, ImageView还派生了ImageButton, ZoomButton等组件。Image View所支持的XML属性和方法如下表所示。

ImageView的XML属性及方法

XML属性 对应方法 功能描述
android:adjust ViewBounds setAdjust ViewBounds( boolean) 是否保持宽高比。需要与maxWidth 、 MaxHeight一起使用,单独使用没有效果
android :cropToPadding setCropToPadding( boolean) 截取指定区域是否使用空白代替。单独设置无效果,需要与scrollY一起使用
android: maxHeight setMaxHeight(int) 设置View的最大高度,单独使用无效,需要与setAdjustViewBounds()方法一起使用。如果想设置图片固定大小,又想保持图片宽高比,需要如下设置:设置setAdjust ViewBounds 为true;设置max Width和 MaxHeight属性;设置layout_ width和 layout_height均为wrap_content
android :max Width setMax Width(int) 设置View的最大宽度。用法同android :maxHeight
android :src setImageResource(int) 设置Image View所显示的 Drawable对象
android :scaleType setScaleType ( Image View.ScaleType) 设置所显示的图片如何缩放或移动以适应Image View的大小

ImageView的android : scaleType属性可以指定如下属性值

  • matrix:用矩阵来绘图。
  • fitXY:拉伸图片(不按比例)以填充View的宽高。
  • fitStart:按比例拉伸图片,图片拉伸后的高度为View的高度,且显示在 View 的左边。
  • fitCenter:按比例拉伸图片,图片拉伸后的高度为View 的高度,且显示在View 的中间。
  • fitEnd:按比例拉伸图片,图片拉伸后的高度为View 的高度,且显示在View 的右边。
  • center:按原图大小显示图片,当图片宽高大于 View的宽高时,截图图片中间部分显示。
  • centerCrop:按比例放大原图,直至等于View某边的宽高。
  • centerInside:当原图宽高等于View的宽高时,按原图大小居中显示﹔反之将原图缩放至 View的宽高居中显示。

此外.为了控制ImageView所显示的图片,该组件提供了如下方法

  • sctlmageBitmap(Bitmap):使用Bitmap位图来设置ImageView所显示的图片。
  • setImageDrawable( Drawable):使用Drawable对象来设置ImageView所显示的图片。
  • setImageResource(int):使用图片资源ID来设置ImageView所显示的图片。
  • setImagURI(Uri):使用图片的URI来设置ImageView所显示的图片。

代码演示

下面通过一个简单示例演示 ImageView的使用。通过单击“下一页/上一页”按钮,实现图片的切换

Widget简单组件 图片视图(ImageView)

Widget简单组件 图片视图(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:layout_gravity="center_horizontal"
    android:orientation="vertical"
    >
    <!-- 图片及文字 1 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:src="@drawable/one" />
        <TextView
            android:id="@+id/photoTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="佐佐木希" />
    </LinearLayout>
    <!-- 分页 2 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/backImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="140dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/back"/>
        <ImageButton
            android:id="@+id/forwardImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/forward" />
    </LinearLayout>
</LinearLayout>

代码解释如下:标号1处定义了一个 ImageView组件,用来显示图片,通过设置android; scaleType= " fitCenter"属性,使用拉伸后图片的高度作为View的高度,且在View的中间显示,同时还定义了一个TextView组件用来显示图片的名字;标号2处定义了两个ImageButton组件,分别用于显示“上一页”和“下一页”的图片。

下面在Activity 中演示图片分页效果:当用户分别单击“上一页/下一页”按钮时,在屏幕上会显示相应的图片

Widget简单组件 图片视图(ImageView)

Widget简单组件 图片视图(ImageView)
对应的Activity 代码实现如下所示

package com.qst.demo2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class ImageViewDemoActivity extends AppCompatActivity {
    //定义变量 1
    //图片对应的ImageView
    ImageView flagImageView;
    TextView flagTxt;
    ImageButton backImgeBtn;   //上一页
    ImageButton forwardImageBtn; //下一页
    //图片数组   2
    int [] flag = {R.drawable.one, R.drawable.two, R.drawable.three};
    String[] flagNames = {"佐佐木希", "胡歌", "霉霉"};
    //当前页 默认第一页
    int currentPage = 0;
    @Override //重写方法
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); //调用父类onCreate创建Activity
        setContentView(R.layout.imageview_demo); //设置布局
        //初始化组件 3
        flagImageView = (ImageView) findViewById(R.id.photoImageView);
        flagTxt = (TextView) findViewById(R.id.photoTxt);
        //上一页,下一页
        backImgeBtn = (ImageButton) findViewById(R.id.backImageBtn);
        forwardImageBtn = (ImageButton) findViewById(R.id.forwardImageBtn);
        //注册监听器
        backImgeBtn.setOnClickListener(onClickListener);
        forwardImageBtn.setOnClickListener(onClickListener);
    }
    //定义单击事件监听器 4
    private View.OnClickListener onClickListener = new View.OnClickListener() { //创建对象
        @Override   //重写接口方法
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.backImageBtn:
                    if (currentPage == 0) {
                        Toast.makeText(ImageViewDemoActivity.this,
                                "第一页,前面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    //上翻一页
                    currentPage--;
                    //设置图片
                    flagImageView.setImageResource(flag[currentPage]);
                    //设置图片名字
                    flagTxt.setText(flagNames[currentPage]);
                    break;
                case R.id.forwardImageBtn:
                    if (currentPage == (flag.length-1)) {
                        Toast.makeText(ImageViewDemoActivity.this,
                                "最后一页,后面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    currentPage++;   //下翻一页
                    flagImageView.setImageResource(flag[currentPage]);  //设置图片
                    flagTxt.setText(flagNames[currentPage]);  //设置图片名字
                    break;
                default:
                    break;
            }
        }
    };
}

代码解释如下:标号1处分别声明了ImageView类型和ImageButton类型的属性变量;标号2处定义了两个数组并进行初始化,分别表示图片资源和图片名称﹔标号3处用于初始化标号1处所声明的属性变量,并对backImageBtn和forwardImageBtn对象设置监听器,来监听各自的单击事件﹔标号4处定义了一个OnClickListener类型的监听器,用于处理按钮单击事件,当单击按钮时根据所单击的按钮不同来显示不同的图片和图片名称。

在AndroidMainfest.xml清单文件中声明Activity
Widget简单组件 图片视图(ImageView)Widget简单组件 图片视图(ImageView)

运行Activity代码后,效果如下图
Widget简单组件 图片视图(ImageView)
Widget简单组件 图片视图(ImageView)


程序员灯塔
转载请注明原文链接:Widget简单组件 图片视图(ImageView)
喜欢 (0)