乐趣区

关于android:Android入门教程-ImageView-图片显示

jiezi

为了让 App 界面更好看活泼，咱们能够放上图片。显示图片是“刚需”。不论是书籍，报纸，网站，都有显示图片的需要。毕竟“无图无假相”。在 Android 利用开发中，咱们通常应用 ImageView 来显示图片。

ImageView 的次要属性

ImageView 的应用

ImageView 常常用来显示图片。例如间接显示 drawable 里的图片资源。ImageView 显示的是 Drawable 对象。

src 与 backGround 的区别

在 layout xml 中，咱们先来看一下 src 与 backGround 的区别。

  • backGround 是 View（ImageView 是 View 的子类）的背景，会把图片拉大铺满整个 View。
  • src 是 ImageView 的属性，承受要展现的图片资源。

为不便后续表述，先给 ImageView 指定一个 style，对立大小。再设置一个默认背景色彩。

<style name="IvDemo1">
    <item name="android:layout_width">100dp</item>
    <item name="android:layout_height">80dp</item>
    <item name="android:background">#929292</item>
    <item name="android:layout_marginTop">4dp</item>
</style>

在 drawable 目录中减少一张图片。图片的宽长比和 style 设置的不一样。不便咱们查看图片成果。

在示例 xml 中，展现 src 与 backGround 的区别。

<ImageView
    style="@style/IvDemo1"
    android:background="@drawable/pic_2_robots" />

<ImageView
    style="@style/IvDemo1"
    android:layout_marginStart="20dp"
    android:src="@drawable/pic_2_robots" />

成果：

右边是设置为了 background，能够看到图片被拉伸铺满了整个 ImageView。而且图片有一点变形。那是因为图片的宽长比和 ImageView 的宽长比不统一。

左边设置了 src，能够看到图片并没有铺满。左边图片的显示方式，就是咱们接下来要介绍的 scaleType。

scaleType，图片显示方式

设置了 src 后，再设置 scaleType，能确定图片的显示成果。

 <ImageView
    style="@style/IvDemo1"
    android:scaleType="fitXY"
    android:src="@drawable/pic_2_robots" />

实际上，src 除了用 drawable 里的资源，也能够用 mipmap。

<ImageView
    style="@style/IvDemo1"
    android:layout_marginStart="20dp"
    android:scaleType="center"
    android:src="@mipmap/ic_launcher" />

scaleType 取值:

  • fitStart
  • fitCenter
  • fitEnd
  • fitXY
  • center
  • centerCrop
  • centerInside
  • matrix

带有“fit”字样的，会显示图片的全部内容。fitStart，fitCenter，fitEnd 图片会按原比例显示。图片会往指定的方向聚拢。fitXY 会拉伸图片，铺满整个 ImageView。

center，centerCrop，centerInside 都是尽可能显示图片的两头局部。

  • center 不缩放图片，如果图片比 ImageView 大，则会显示图片两头的局部。
  • centerCrop，尽可能多的显示图片的两头局部。
  • centerInside，把图片放到两头去显示，不会尝试铺满 ImageView。

matrix 把图片铺在 ImageView 左上角，并且不缩放图片。

设置图片透明度，alpha

设置 alpha 值，能扭转整个 ImageView 的透明度。

 <ImageView
    style="@style/IvDemo1"
    android:layout_marginStart="20dp"
    android:alpha="0.9"
    android:scaleType="fitCenter"
    android:src="@drawable/pic_2_robots" />

例子：

ImageView 视频教程参考

退出移动版