Android控件與佈局——基礎控件ImageView

        最近在用原生的控件和佈局繪製一些界面並使用，雖然這些都是Android基本知識，但是有的時候真的感覺力不從心，感覺有必要對Android常用的控件和佈局做一個系統的瞭解。後續一個月甚至更多的時間都會圍繞這個主題展開，畢竟這裏面還是有不少高級控件的，我也會盡量結合應用深入的進行了解。

上一篇：AutoCompleteTextView與MultiAutoCompleteTextView       下一篇：ImageButton

今天是端午放假的第一天，趁着這個機會我會加緊一點把Android View的基本使用系列儘早寫完，因爲後面項目較緊且還有很多其他更重要的比如網絡，IO以及常用的開源框架的使用和學習。好了，下面我們直接進入主題，今天我們主要學習ImageView，還是一樣的套路，直接看官方文檔：

* Displays image resources, for example {@link android.graphics.Bitmap}
* or {@link android.graphics.drawable.Drawable} resources.
* ImageView is also commonly used to {@link #setImageTintMode(PorterDuff.Mode)
* apply tints to an image} and handle {@link #setScaleType(ScaleType) image scaling}.

用於展示一個圖片資源，比如bitmap數據或者Drawable數據資源。我們通常可以對其進行色調和伸縮屬性進行設置

上面官方介紹的很簡單，如果你想學習更多關於Bitmap或者Drawable的知識，可以參考學習入口-->> ；好了，下面我們就看一下其基本使用：

<ImageView
    android:layout_gravity="center"
    android:src="@drawable/image_view_test"
    android:id="@+id/image_view_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

這裏面，我們通過android:src屬性設置ImageView加載的資源，好了，關於它的屬性學習，我們還是參考官方文檔：

* @attr ref android.R.styleable#ImageView_adjustViewBounds：是否保持縱橫比
* @attr ref android.R.styleable#ImageView_src：加載的資源
* @attr ref android.R.styleable#ImageView_maxWidth：最大寬度
* @attr ref android.R.styleable#ImageView_maxHeight：最大高度
* @attr ref android.R.styleable#ImageView_tint：色調
* @attr ref android.R.styleable#ImageView_scaleType：伸縮性
* @attr ref android.R.styleable#ImageView_cropToPadding：是否裁剪到填充

下面我們就結合文檔中給出的幾個屬性展開介紹。

1，adjustViewBounds

（1）設置方式

//方式1：
android:adjustViewBounds="true"
//方式2：
imageView.setAdjustViewBounds(true);

（2）主要作用

控制圖片等比例縮放顯示，分爲以下三種情況：

• 寬高爲固定值，不起作用，圖片的寬高始終爲給定值
• 寬高爲wrap_content，不起作用，圖片的顯示始終是原圖的寬高比
• 寬高屬性一個爲固定值，一個wrap_content屬性，又分兩種情況

a，原圖的對應固定值屬性的一遍的值小於固定值，則顯示原圖

b，原圖的對應固定值屬性的一遍的值大於固定值，則寬高按照等比例縮放

此外，還需要注意，當我們設置了該屬性爲true，則默認會修改scaleType屬性值爲fitCenter。

2，src

（1）設置方式

//方式1：
android:src="@drawable/image_view_test"
//方式2
imageView.setImageDrawable(getDrawable(R.drawable.image_view_test));

（2）主要作用

展示要顯示的可繪製資源（圖片或者xml數據等等）

3，maxWidth和maxHeight

（1）設置方式

//方式1：
  android:maxHeight="100dp"
  android:maxWidth="100dp"
//方式2：
  imageView.setMaxHeight(100);
  imageView.setMaxWidth(100);

（2）主要作用

這個很容易理解，就是設置ImageView的最大寬高值，需要注意的是，它一定要配合adjustViewBounds屬性一起使用，且只有該屬性值爲true的時候才起作用，比如：

  <ImageView
            android:src="@drawable/image_view_test"
            android:id="@+id/image_view_test1"
            android:tint="@android:color/holo_red_dark"
            android:adjustViewBounds="true"
            android:maxHeight="50dp"
            android:maxWidth="50dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

4，tint

（1）設置方式

 android:tint="@android:color/holo_red_dark"

（2）主要作用

爲圖片着色，配合tintMode屬性一起使用，可以通過如下方式獲取和設置當前圖片的tintMode：

  //獲取
  PorterDuff.Mode mode= imageView.getImageTintMode();
  Log.e(TAG, "onCreate: "+mode.name());
  //設置
  imageView.setImageTintMode(PorterDuff.Mode.DST);

其中，在理解這個屬性的時候需要理解這樣一個場景，首先是兩個組成部分：

• src底圖
• tint設置的dst

其中，我們通過src與tint屬性設置這兩個組成部分，在通過在PorterDuff.Mode中定義兩者顯示的方式，比如我們上面設置的PorterDuff.Mode.DST，文檔中是這樣解釋的：

The source pixels are discarded, leaving the destination intact

原圖（src）像素丟棄，顯示目標（tint）像素，需要注意透明部分不變

比如，一張原圖（src）爲如下樣式：

我們在XML中定義一個ImageView如下：

  <ImageView
        android:src="@drawable/image_view_test"
        android:id="@+id/image_view_test"
        android:tint="@android:color/black"
        android:tintMode="screen"
        android:layout_width="400dp"
        android:layout_height="400dp" />

並且設置tintMode爲上面的PorterDuff.Mode.DST，最終顯示的效果圖如下：

更多關於該屬性的知識可以參考下面博主的博客Android ImageView的Tint屬性

5，scaleType

（1）設置方式

//方式1：
android:scaleType="center"
//方式2：
imageView.setScaleType(ImageView.ScaleType.CENTER);

（2）主要作用

該屬性主要定義了ImageView中的Image的縮放，裁剪等類型來適配ImageView的大小尺寸。類型一共有八種，定義在枚舉類ScaleType中（裏面配有中文說明）：

/**
     * Options for scaling the bounds of an image to the bounds of this view.
     */
    public enum ScaleType {
        /**
         * Scale using the image matrix when drawing. The image matrix can be set using
         * {@link ImageView#setImageMatrix(Matrix)}. From XML, use this syntax:
         * <code>android:scaleType="matrix"</code>.
         */
//原圖的大小不變，從ImageView的左上角開始繪製，超出部分剪切處理
        MATRIX      (0),
        /**
         * Scale the image using {@link Matrix.ScaleToFit#FILL}.
         * From XML, use this syntax: <code>android:scaleType="fitXY"</code>.
         */
//圖片按照指定的大小在ImageView中顯示，不保持原比例，填滿ImageView
        FIT_XY      (1),
        /**
         * Scale the image using {@link Matrix.ScaleToFit#START}.
         * From XML, use this syntax: <code>android:scaleType="fitStart"</code>.
         */
//適配高度，原圖按照比例放縮到ImageView的高度，顯示在ImageView的start（前部/上部）
        FIT_START   (2),
        /**
         * Scale the image using {@link Matrix.ScaleToFit#CENTER}.
         * From XML, use this syntax:
         * <code>android:scaleType="fitCenter"</code>.
         */
//適配高度，原圖按照比例放縮到ImageView的高度，顯示在ImageView的center（中部/居中顯示）
        FIT_CENTER  (3),
        /**
         * Scale the image using {@link Matrix.ScaleToFit#END}.
         * From XML, use this syntax: <code>android:scaleType="fitEnd"</code>.
         */
//適配高度，原圖按照比例放縮到ImageView的高度，顯示在ImageVIew的end（後部/尾部/底部）
        FIT_END     (4),
        /**
         * Center the image in the view, but perform no scaling.
         * From XML, use this syntax: <code>android:scaleType="center"</code>.
         */
//保持原圖的大小，顯示在ImageView的中心。當原圖的size大於ImageView的size時，裁剪多餘部分
        CENTER      (5),
        /**
         * Scale the image uniformly (maintain the image's aspect ratio) so
         * that both dimensions (width and height) of the image will be equal
         * to or larger than the corresponding dimension of the view
         * (minus padding). The image is then centered in the view.
         * From XML, use this syntax: <code>android:scaleType="centerCrop"</code>.
         *
         */
//如果原圖size大於ImageView的size，則與center_inside一樣，按比例縮小，居中顯示在ImageView
//上。如果原圖size小於ImageView的size，則按比例拉昇原圖的寬和高，填充ImageView居中顯示
        CENTER_CROP (6),
        /**
         * Scale the image uniformly (maintain the image's aspect ratio) so
         * that both dimensions (width and height) of the image will be equal
         * to or less than the corresponding dimension of the view
         * (minus padding). The image is then centered in the view.
         * From XML, use this syntax: <code>android:scaleType="centerInside"</code>.
         */
//如果原圖大小大於ImageView的size，就按照比例縮小原圖的寬高，居中顯示
//在ImageView中。如果原圖size小於ImageView的size，則不做處理居中顯示圖片
        CENTER_INSIDE (7);

        ScaleType(int ni) {
            nativeInt = ni;
        }
        final int nativeInt;
    }

對此，我們先給出初步說明，然後給出一張效果圖來應證一下：

上述示例中ImageView的寬高爲200px，原圖尺寸爲300*241

6，cropToPadding

（1）設置方式

//方式1： 
android:cropToPadding="true"
//方式2： 
imageView.setCropToPadding(true);

（2）主要作用

該屬性主要配合scaleType屬性和padding相關屬性對ImageView進行顯示處理，具體參見下圖：

可見：

• 通過padding相關屬性可以調整圖片到ImageView邊距
• 當使用scaleType屬性之後，padding相關屬性不起作用
• 添加cropToPadding屬性並置爲true時，padding相關屬性再次起作用

好了，到這裏，關於ImageView的介紹就到這裏了，其實在平時的開發工作中，我們基本上都是通過第三方開源框架來通過ImageView加載線上線下的圖片資源數據進行顯示。所以關於圖片加載的框架有很多，比如我們常常使用的Glide，Picasso，Fresco以及Android Universal ImageLoader等等。我們除了要了解ImageView 基本知識外，還需要了解一下這些常用框架的基本使用。本篇就不展開了。

注：歡迎掃碼關注