写点什么

ImageView(图像视图)

作者:向阳逐梦
  • 2023-01-08
    四川
  • 本文字数:5206 字

    阅读完需:约 17 分钟

本节介绍的 UI 基础控件是:ImageView(图像视图),就是用来显示图像的一个 View 或者说控件! 本节讲解的内容如下:

  1. ImageView 的 src 属性和 blackground 的区别;

  2. adjustViewBounds 设置图像缩放时是否按长宽比

  3. scaleType 设置缩放类型

  4. 最简单的绘制圆形的 ImageView

1.src 属性和 background 属性的区别

在 API 文档中我们发现 ImageView 有两个可以设置图片的属性,分别是:src background

常识:

①background 通常指的都是背景,而 src 指的是内容!!

②当使用 src 填入图片时,是按照图片大小直接填充,并不会进行拉伸

而使用 background 填入图片,则是会根据 ImageView 给定的宽度来进行拉伸

1)写代码验证区别

写个简单的布局测试下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/LinearLayout1"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical"      tools:context="com.jay.example.imageviewdemo.MainActivity" >        <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:background="@drawable/pen" />        <ImageView          android:layout_width="200dp"          android:layout_height="wrap_content"          android:background="@drawable/pen" />        <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:src="@drawable/pen" />        <ImageView          android:layout_width="200dp"          android:layout_height="wrap_content"          android:src="@drawable/pen" />    </LinearLayout> 
复制代码

效果图如下:

结果分析:

宽高都是 wrap_content 那就一样,是原图大小,但是,当我们固定了宽或者高的话, 差别就显而易见了,blackground 完全填充了整个 ImageView,而 src 依旧是那么大, 而且他居中了哦,这就涉及到了 ImageView 的另一个属性 scaleType 了! 另外还有一点,这里我们说了只设置 width 或者 height 哦!

加入我们同时设置了 width 和 height 的话,blackground 依旧填充,但是,src 的大小可能发生改变哦! 比如,我们测试下下面这段代码:

<ImageView          android:layout_width="100dp"          android:layout_height="50dp"          android:src="@drawable/pen" />
复制代码

运行效果图:

2)解决 blackground 拉伸导致图片变形的方法

在前面的效果图中的第二个 Imageview 中我们可以看到图片已经被拉伸变形了, 正方形变成了长方形。

  • 这个适用于动态加载 ImageView 的,代码也简单,只要在添加 View 的时候,把大小写写死就可以了。

LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(48, 48);            layout.addView(ibtnPen, layoutParam); 
复制代码
  • 除了动态加载 view,更多的时候,我们还是会通过 xml 布局的方式引入 ImageView 的 解决方法也不难,就是通过 drawable 的 Bitmap 资源文件来完成,然后 blackground 属性设置为该文件即可! 这个 xml 文件在 drawable 文件夹下创建,这个文件夹是要自己创建的哦!!

pen_bg.xml:

<bitmap      xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@id/pen_bg"      android:gravity="top"      android:src="@drawable/pen"      android:tileMode="disabled" >  </bitmap>
复制代码

上述代码并不难理解,估计大家最迷惑的是 titleMode 属性吧,这个属性是平铺,就是我们 windows 设置 背景时候的平铺,多个小图标铺满整个屏幕捏!记得了吧!不记得自己可以试试!disabled 就是把他给禁止了!

就是上面这串简单的代码,至于调用方法如下:

动态: ibtnPen.setBacklgroundResource(R.drawable.penbg);

静态: android:background = "@drawable/penbg"

3)设置透明度的问题

说完前面两个区别,接着再说下 setAlpha 属性咯!这个很简单,这个属性,只有 src 时才是有效果的!!

4)两者结合妙用

网上的一张图:

一看去是一个简单的 GridView,每个 item 都是一个 ImageView,但是细心的你可能发现了, 上面的 ICON 都不是规则的,而是圆形,圆角矩形等等,于是乎这里用到了 src + background 了! 要实现上述的效果,你只需要两个操作: 找一张透明的 png 图片 + 设置一个黑色的背景 (当然你也可以设置 png 的透明度来实现,不过结果可能和预想的有出入哦!) 我们写个简单例子:

如图,呆萌呆萌的小猪就这样显示到 ImageView 上了,哈哈,blackground 设置了蓝色背景!

实现代码:

<ImageView      android:layout_width="150dp"      android:layout_height="wrap_content"      android:src="@drawable/pig"      android:background="#6699FF" /> 
复制代码

PS: 当然你也可以用 selctor 实现点击效果,设置不同的情况设置不同的图片,以实现点击或者触摸效果!

5)Java 代码中设置 blackground 和 src 属性

前景(对应 src 属性):setImageDrawable( );

背景(对应 background 属性):setBackgroundDrawable( );

2.adjustViewBounds 设置缩放是否保存原图长宽比

ImageView 为我们提供了 adjustViewBounds 属性,用于设置缩放时是否保持原图长宽比! 单独设置不起作用,需要配合 maxWidth maxHeight 属性一起使用!而后面这两个属性 也是需要 adjustViewBounds 为 true 才会生效的。


  • android:maxHeight:设置 ImageView 的最大高度

  • android:maxWidth:设置 ImageView 的最大宽度

代码示例:

<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:orientation="vertical"    tools:context=".MainActivity">
<!-- 正常的图片 --> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5px" android:src="@mipmap/meinv" /> <!-- 限制了最大宽度与高度,并且设置了调整边界来保持所显示图像的长宽比--> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5px" android:adjustViewBounds="true" android:maxHeight="200px" android:maxWidth="200px" android:src="@mipmap/meinv" />
</LinearLayout>
复制代码

结果分析: 大的那个图片是没有任何处理的图片,尺寸是:541374;而下面的那个的话我们通过 maxWidth 和 maxHeight 限制 ImageView 最大宽度与高度为 200px,就是最多只能显示 200200 的图片,我们又设置了一个 adjustViewBounds = "true"调整我们的边界来保持图片的长宽比,此时的 ImageView 宽高为是 128*200。

3.scaleType 设置缩放类型

android:scaleType 用于设置显示的图片如何缩放或者移动以适应 ImageView 的大小 Java 代码中可以通过 imageView.setScaleType(ImageView.ScaleType.CENTER);来设置~ 可选值如下:


  • fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应 ImageView,但是图片的横纵比可能会发生改变

  • fitStart:保持纵横比缩放图片,知道较长的边与 Image 的编程相等,缩放完成后将图片放在 ImageView 的左上角

  • fitCenter:同上,缩放后放于中间;

  • fitEnd:同上,缩放后放于右下角;

  • center:保持原图的大小,显示在 ImageView 的中心。当原图的 size 大于 ImageView 的 size,超过部分裁剪处理。

  • centerCrop:保持横纵比缩放图片,知道完全覆盖 ImageView,可能会出现图片的显示不完全

  • centerInside:保持横纵比缩放图片,直到 ImageView 能够完全地显示图片

  • matrix:默认值,不改变原图的大小,从 ImageView 的左上角开始绘制原图, 原图超过 ImageView 的部分作裁剪处理

接下来我们一组组的来对比:

1)1.fitEnd,fitStart,fitCenter

这里以 fitEnd 为例,其他两个类似:

示例代码:

<!-- 保持图片的横纵比缩放,知道该图片能够显示在ImageView组件上,并将缩放好的图片显示在imageView的右下角 -->    <ImageView        android:id="@+id/imageView3"        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="fitEnd"        android:src="@mipmap/meinv" />
复制代码

运行效果图:

2)centerCrop 与 centerInside

  • centerCrop:按横纵比缩放,直接完全覆盖整个 ImageView

  • centerInside:按横纵比缩放,使得 ImageView 能够完全显示这个图片

示例代码:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="centerCrop"        android:src="@mipmap/meinv" />
<ImageView android:layout_width="300px" android:layout_height="300px" android:layout_margin="5px" android:scaleType="centerInside" android:src="@mipmap/meinv" />
复制代码

运行效果图:

3)fitXY

不按比例缩放图片,目标是把图片塞满整个 View

示例代码:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="fixXY"        android:src="@mipmap/meinv" />
复制代码

4.最简单的绘制圆形的 ImageView

相信大家对圆形或者圆角的 ImageView 不陌生吧,现在很多的 APP 都很喜欢圆形的头像是吧~

这里就简单的写个圆形的 ImageView 吧,当然这只是一个示例,再不考虑性能与抗锯齿的情况下!!!

代码示例:

运行效果图:

实现代码:

自定义 ImageView:**RoundImageView.java

package com.jay.demo.imageviewdemo;
import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PaintFlagsDrawFilter;import android.graphics.Path;import android.graphics.Rect;import android.graphics.Region;import android.util.AttributeSet;import android.widget.ImageView;
/** * Created by coder-pig on 2015/7/18 0018. */public class RoundImageView extends ImageView {
private Bitmap mBitmap; private Rect mRect = new Rect(); private PaintFlagsDrawFilter pdf = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG); private Paint mPaint = new Paint(); private Path mPath=new Path(); public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); }

//传入一个Bitmap对象 public void setBitmap(Bitmap bitmap) { this.mBitmap = bitmap; }

private void init() { mPaint.setStyle(Paint.Style.STROKE); mPaint.setFlags(Paint.ANTI_ALIAS_FLAG); mPaint.setAntiAlias(true);// 抗锯尺 }

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(mBitmap == null) { return; } mRect.set(0,0,getWidth(),getHeight()); canvas.save(); canvas.setDrawFilter(pdf); mPath.addCircle(getWidth() / 2, getWidth() / 2, getHeight() / 2, Path.Direction.CCW); canvas.clipPath(mPath, Region.Op.REPLACE); canvas.drawBitmap(mBitmap, null, mRect, mPaint); canvas.restore(); }}
复制代码

布局代码:activity_main.xml:

<com.jay.demo.imageviewdemo.RoundImageView        android:id="@+id/img_round"        android:layout_width="200dp"        android:layout_height="200dp"        android:layout_margin="5px"/>
复制代码

MainActivity.java:

package com.jay.demo.imageviewdemo;
import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private RoundImageView img_round;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); img_round = (RoundImageView) findViewById(R.id.img_round); Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.meinv); img_round.setBitmap(bitmap); }}
复制代码


发布于: 2023-01-08阅读数: 23
用户头像

向阳逐梦

关注

人生享受编程,编程造就人生! 2022-06-01 加入

某公司芯片测试工程师,嵌入式开发工程师,InfoQ签约作者,阿里云星级博主,华为云·云享专家。座右铭:向着太阳,追逐梦想!

评论

发布
暂无评论
ImageView(图像视图)_imageView_向阳逐梦_InfoQ写作社区