Android ImgView屬性圖文詳解

更新時(shí)間：2018年04月21日 09:31:24 作者：小群子0618

ImageView是用于界面上顯示圖片的控件。這篇文章主要介紹了Android ImgView屬性圖文詳解，需要的朋友參考下

ImageView是用于界面上顯示圖片的控件。

屬性

1、為ImageView設(shè)置圖片

①android:src="@drawable/img1"；

src設(shè)置圖片，默認(rèn)圖片等比例放縮，以最適應(yīng)的大小顯示。

②android:background="@drawable/img1"

background是組件通用屬性，不僅可以設(shè)置組件的背景顏色，也可以用圖片做背景。

【提示】

①以圖片做背景，那么圖片將適應(yīng)組件的大小。

②但如果控件是寬高為wrap_content，則和src的效果相同。

③如果src和background屬性同時(shí)設(shè)置，src設(shè)置的圖片將在上方，background設(shè)置的圖片將在上方。src圖片不一定完全遮蓋下面的圖片，根據(jù)src的放縮模式而定。

④資源文件名稱(chēng)由小寫(xiě)字母、數(shù)字、下劃線組成。（注意：不能用大寫(xiě)字母）

③案例

【準(zhǔn)備】對(duì)應(yīng)的圖片資源可以放再 res/drawable文件夾下，這是兩張圖片沒(méi)有進(jìn)行任何縮放的效果

【代碼】

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  android:background="#ccc">
  <ImageView
    android:id="@+id/iv"
    android:layout_width="200dp"
    android:layout_height="300dp"
    android:background="@drawable/img1" />
  <ImageView
    android:id="@+id/iv2"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/img2"
   app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

【效果】

【提示】

【提示】①這里為了更好地說(shuō)明background和src的區(qū)別，我們將ImageView設(shè)置具體的寬度。

②其他一些margin和constraintEnd等屬性只是用來(lái)調(diào)整位置。具體根據(jù)你的父容器而定。

③左圖是background的效果，右圖是在src的效果，并未其添加了圖片作為背景，便于觀察ImageView的位置和大小。

2、放縮屬性

ScaleType[code]android:scaleType="fitXY"

【提示】ScaleType屬性要結(jié)合src屬性一起使用，對(duì)background設(shè)置的圖片沒(méi)有效果

【代碼】

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  android:background="#ccc">
  <ImageView
    android:id="@+id/iv"
    android:layout_width="360dp"
    android:layout_height="500dp"
    android:src="@drawable/img1"
    android:background="#f00"
    android:scaleType="fitCenter"/>
</android.support.constraint.ConstraintLayout>

【屬性值】

以下只修改ScaleType的屬性值

①fixCenter：這是圖片默認(rèn)的屬性值，表示會(huì)填充控件，不會(huì)讓圖片變形。

②fixXY：表示圖片填充控件，允許圖片拉伸，會(huì)根據(jù)ImageView的大小而適配。和background的效果相同。

③centerCrop：以填滿整個(gè)ImageView為目的，將ImageView的中心對(duì)準(zhǔn)ImageView的中心，等比例放大原圖，直到填滿ImageView為止（ImageView的寬高都要填滿），原圖超出部分做裁剪處理。

【效果】

④center：保持原圖大小，顯示在ImageView的中心。當(dāng)原圖大小小于ImageView大小時(shí)，旁邊部分將空白，如左圖。反之，原圖將將做裁剪處理，如右圖（這里將ImageView的大小修改成比原圖小的值）

【效果】

⑤matrix：不改變?cè)瓐D的大小，從ImageView的左上角開(kāi)始繪制原圖。原圖超過(guò)部分將作裁剪。

【提示】用Matrix對(duì)ImageView作放大和縮小的效果是，ImageView的ScaleType必須設(shè)置為matrix

⑥fitEnd：把原圖按比例放縮到ImageView的寬度，顯示在下方的位置。左圖

⑦fitStart：把原圖按比例放縮到ImageView的寬度，顯示在上方的位置。右圖

⑧centerInside：以原圖完全顯示為目的，將圖片的內(nèi)容完整居中顯示，通過(guò)按比例縮小的原圖寬高等于或者小于ImageView的寬高。如果原圖小于ImageView的寬高，則原圖不做處理，居中顯示在ImageView上（如左圖）。反之，和fixCenter效果相同。以短的一邊為基準(zhǔn)等比例放縮圖片，完整的顯示在ImageView的中間（如右圖）。