[关闭]
@coder-pig 2015-07-18T07:40:55.000000Z 字数 8380 阅读 1075

Android基础入门教程——2.3.4 ImageView(图像视图)

Android基础入门教程


本节引言:

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

  1. ImageView的src属性和blackground的区别;
  2. adjustViewBounds设置图像缩放时是否按长宽比
  3. scaleType设置缩放类型
  4. 最简单的绘制圆形的ImageView

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

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

常识:
①background通常指的都是背景,而src指的是内容!!
②当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸
而使用background填入图片,则是会根据ImageView给定的宽度来进行拉伸

1)写代码验证区别:

写个简单的布局测试下:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/LinearLayout1"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical"
  7. tools:context="com.jay.example.imageviewdemo.MainActivity" >
  8. <ImageView
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:background="@drawable/pen" />
  12. <ImageView
  13. android:layout_width="200dp"
  14. android:layout_height="wrap_content"
  15. android:background="@drawable/pen" />
  16. <ImageView
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:src="@drawable/pen" />
  20. <ImageView
  21. android:layout_width="200dp"
  22. android:layout_height="wrap_content"
  23. android:src="@drawable/pen" />
  24. </LinearLayout>

效果图如下:

结果分析:

宽高都是wrap_content那就一样,是原图大小,但是,当我们固定了宽或者高的话,
差别就显而易见了,blackground完全填充了整个ImageView,而src依旧是那么大,
而且他居中了哦,这就涉及到了ImageView的另一个属性scaleType了!
另外还有一点,这里我们说了只设置width或者height哦!加入我们同时设置了
width和height的话,blackground依旧填充,但是,src的大小可能发生改变哦!
比如,我们测试下下面这段代码:

  1. <ImageView
  2. android:layout_width="100dp"
  3. android:layout_height="50dp"
  4. android:src="@drawable/pen" />

运行效果图:

PS:scaleType下面会讲~


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

在前面的效果图中的第二个Imageview中我们可以看到图片已经被拉伸变形了,
正方形变成了长方形,对于和我一样有轻微强迫症的人来说,显然是不可接受的,
有没有办法去设置呢?答案肯定是有的,笔者暂时知道的有以下两种方式:

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

pen_bg.xml:

  1. <bitmap
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@id/pen_bg"
  4. android:gravity="top"
  5. android:src="@drawable/pen"
  6. android:tileMode="disabled" >
  7. </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设置了蓝色背景!

实现代码:

  1. <ImageView
  2. android:layout_width="150dp"
  3. android:layout_height="wrap_content"
  4. android:src="@drawable/pig"
  5. android:background="#6699FF" />

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


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

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


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

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

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

代码示例:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. tools:context=".MainActivity">
  7. <!-- 正常的图片 -->
  8. <ImageView
  9. android:id="@+id/imageView1"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_margin="5px"
  13. android:src="@mipmap/meinv" />
  14. <!-- 限制了最大宽度与高度,并且设置了调整边界来保持所显示图像的长宽比-->
  15. <ImageView
  16. android:id="@+id/imageView2"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_margin="5px"
  20. android:adjustViewBounds="true"
  21. android:maxHeight="200px"
  22. android:maxWidth="200px"
  23. android:src="@mipmap/meinv" />
  24. </LinearLayout>

运行效果图:

结果分析:
大的那个图片是没有任何处理的图片,尺寸是:541*374;而下面的那个的话我们通过maxWidth和maxHeight
限制ImageView最大宽度与高度为200px,就是最多只能显示200*200的图片,我们又设置了一个
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为例,其他两个类似:

示例代码:

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

运行效果图:


2)centerCrop与centerInside

centerCrop:按横纵比缩放,直接完全覆盖整个ImageView
centerInside:按横纵比缩放,使得ImageView能够完全显示这个图片

示例代码:

  1. <ImageView
  2. android:layout_width="300px"
  3. android:layout_height="300px"
  4. android:layout_margin="5px"
  5. android:scaleType="centerCrop"
  6. android:src="@mipmap/meinv" />
  7. <ImageView
  8. android:layout_width="300px"
  9. android:layout_height="300px"
  10. android:layout_margin="5px"
  11. android:scaleType="centerInside"
  12. android:src="@mipmap/meinv" />

运行效果图:


3)fitXY

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

示例代码:

  1. <ImageView
  2. android:layout_width="300px"
  3. android:layout_height="300px"
  4. android:layout_margin="5px"
  5. android:scaleType="centerCrop"
  6. android:src="@mipmap/meinv" />

运行效果图:

好吧,明显扁了=-=~


4)matrix

从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理

示例代码:

  1. <ImageView
  2. android:layout_width="300px"
  3. android:layout_height="300px"
  4. android:layout_margin="5px"
  5. android:scaleType="matrix"
  6. android:src="@mipmap/meinv" />

运行效果图:


5)center

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

示例代码:

  1. <ImageView
  2. android:layout_width="300px"
  3. android:layout_height="300px"
  4. android:layout_margin="5px"
  5. android:scaleType="center"
  6. android:src="@mipmap/meinv" />

运行效果图:


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

相信大家对圆形或者圆角的ImageView不陌生吧,现在很多的APP都很喜欢圆形的头像是吧~
这里就简单的写个圆形的ImageView吧,当然这只是一个示例,再不考虑性能与抗锯齿的情况下!!!
可以说是写来玩玩,实际项目的话可以考虑用Github上牛人写的控件,比如下面这两个:
git怎么玩前面已经教过大家了~把项目clone下来把相关文件复制到自己的项目即可~
RoundedImageView
CircleImageView

代码示例:

运行效果图:

实现代码:

自定义ImageView:RoundImageView.java

  1. package com.jay.demo.imageviewdemo;
  2. import android.content.Context;
  3. import android.graphics.Bitmap;
  4. import android.graphics.Canvas;
  5. import android.graphics.Paint;
  6. import android.graphics.PaintFlagsDrawFilter;
  7. import android.graphics.Path;
  8. import android.graphics.Rect;
  9. import android.graphics.Region;
  10. import android.util.AttributeSet;
  11. import android.widget.ImageView;
  12. /**
  13. * Created by coder-pig on 2015/7/18 0018.
  14. */
  15. public class RoundImageView extends ImageView {
  16. private Bitmap mBitmap;
  17. private Rect mRect = new Rect();
  18. private PaintFlagsDrawFilter pdf = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG);
  19. private Paint mPaint = new Paint();
  20. private Path mPath=new Path();
  21. public RoundImageView(Context context, AttributeSet attrs) {
  22. super(context, attrs);
  23. init();
  24. }
  25. //传入一个Bitmap对象
  26. public void setBitmap(Bitmap bitmap) {
  27. this.mBitmap = bitmap;
  28. }
  29. private void init() {
  30. mPaint.setStyle(Paint.Style.STROKE);
  31. mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
  32. mPaint.setAntiAlias(true);// 抗锯尺
  33. }
  34. @Override
  35. protected void onDraw(Canvas canvas) {
  36. super.onDraw(canvas);
  37. if(mBitmap == null)
  38. {
  39. return;
  40. }
  41. mRect.set(0,0,getWidth(),getHeight());
  42. canvas.save();
  43. canvas.setDrawFilter(pdf);
  44. mPath.addCircle(getWidth() / 2, getWidth() / 2, getHeight() / 2, Path.Direction.CCW);
  45. canvas.clipPath(mPath, Region.Op.REPLACE);
  46. canvas.drawBitmap(mBitmap, null, mRect, mPaint);
  47. canvas.restore();
  48. }
  49. }

布局代码:activity_main.xml:

  1. <com.jay.demo.imageviewdemo.RoundImageView
  2. android:id="@+id/img_round"
  3. android:layout_width="200dp"
  4. android:layout_height="200dp"
  5. android:layout_margin="5px"/>

MainActivity.java:

  1. package com.jay.demo.imageviewdemo;
  2. import android.graphics.Bitmap;
  3. import android.graphics.BitmapFactory;
  4. import android.os.Bundle;
  5. import android.support.v7.app.AppCompatActivity;
  6. public class MainActivity extends AppCompatActivity {
  7. private RoundImageView img_round;
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_main);
  12. img_round = (RoundImageView) findViewById(R.id.img_round);
  13. Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.meinv);
  14. img_round.setBitmap(bitmap);
  15. }
  16. }

本节小结:

本节讲解了ImageView(图像视图),内容看上很多,不过都是一些详述性的东西,知道即可~
最后的自定义圆形ImageView也是,只是写来玩玩的,实际项目中还是建议使用那两个第三方的自定义控件吧~


添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注