ImageView及其子類

本文介紹ImageView及其子類的原理、用法。

1、設置content或background，drawable或bitmap。

<ImageView 
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

ImageView imageView = (ImageView) getWindow().findViewById(R.id.imageView);
//		imageView.setImageResource(R.drawable.early);
//設置Bitmap
//		imageView.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.early, null));
Bitmap bitmap = Bitmap.createBitmap(500, 500, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();paint.setTextSize(30f*dm.density);
canvas.drawText("hello", 100f, 100f-paint.ascent(), paint);
//設置Drawable
imageView.setImageDrawable(new BitmapDrawable(getResources(), bitmap));

//		imageView.setBackgroundResource(R.drawable.early);
//背景設置Drawable
imageView.setBackground(getResources().getDrawable(R.drawable.ic_launcher));

圖片資源也可以是selector和animation-list的形式

res/drawable/animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <!-- 1、大小以大圖爲準
     2、串行執行-->
    <item android:drawable="@mipmap/beauty_600_240" android:duration="1000"/>
    <item android:drawable="@mipmap/ic_launcher" android:duration="1000"/>
</animation-list>

res/drawable/selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--類似單選按鈕或if-else-->
    <item android:state_pressed="true" android:drawable="@mipmap/ic_launcher"/>
    <item android:drawable="@mipmap/beauty_600_240"/>
</selector>

2、將Bitmap形狀變爲圓形

android.widget.ImageView是android.view.View的直接子類，ImageButton是ImageView的直接子類

holder.imgView.setImageBitmap(toRoundBitmap(BitmapFactory.decodeResource(parent.getResources(), R.drawable.icon)));

public Bitmap toRoundBitmap(Bitmap bitmap) {
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    float roundPx;
    float left,top,right,bottom,dst_left,dst_top,dst_right,dst_bottom;
    if (width <= height) {
        roundPx = width / 2;
        top = 0;
        bottom = width;
        left = 0;
        right = width;
        height = width;
        dst_left = 0;
        dst_top = 0;
        dst_right = width;
        dst_bottom = width;
    } else {
        roundPx = height / 2;
        float clip = (width - height) / 2;
        left = clip;
        right = width - clip;
        top = 0;
        bottom = height;
        width = height;
        dst_left = 0;
        dst_top = 0;
        dst_right = height;
        dst_bottom = height;
    }

    Bitmap output = Bitmap.createBitmap(width,
            height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect src = new Rect((int)left, (int)top, (int)right, (int)bottom);
    final Rect dst = new Rect((int)dst_left, (int)dst_top, (int)dst_right, (int)dst_bottom);
    final RectF rectF = new RectF(dst);

    paint.setAntiAlias(true);

    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, src, dst, paint);
    return output;
}

3、指定大小獲取圖片

<ImageView
    android:id="@+id/imageView"
    android:layout_width="150dp"
    android:layout_height="100dp"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp"
    android:background="@android:color/holo_red_light"/>

從手機rom讀取文件權限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

先獲取本地圖片實際大小，然後根據需要獲取指定大小的圖片，減少內存佔用

ImageView imageView = (ImageView) findViewById(R.id.imageView);
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "Jack_the_Giant_Slayer_poster.jpg");//1000*1479
Log.d(TAG, "file.getPath()="+file.getPath());
BitmapFactory.decodeFile(file.getPath(), options);
int width = options.outWidth;
int height = options.outHeight;
Log.d(TAG, "width="+width+", height="+height);
if(1f*width/height>1.5f){
    //按寬度縮放
}else {
    //按高度縮放
    float density = getResources().getDisplayMetrics().density;
    float scale = height/(100*density);
    Log.d(TAG, "density="+density+", scale="+scale);
    options.inSampleSize = (int) scale;//7按4處理
    options.inJustDecodeBounds = false;
    Bitmap bitmap = BitmapFactory.decodeFile(file.getPath(), options);
    Log.d(TAG, "bitmap.getWidth()="+bitmap.getWidth()+", bitmap.getHeight()="+bitmap.getHeight());
    imageView.setImageBitmap(bitmap);
}

4、圖片顯示風格scaleType

ImageView.ScaleType

MATRIX貌似左上角顯示，不縮放；CENTER居中顯示，不縮放

/**
 * 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>.
     */
    MATRIX      (0),
    /**
     * Scale the image using {@link Matrix.ScaleToFit#FILL}.
     * From XML, use this syntax: <code>android:scaleType="fitXY"</code>.
     */
    FIT_XY      (1),
    /**
     * Scale the image using {@link Matrix.ScaleToFit#START}.
     * From XML, use this syntax: <code>android:scaleType="fitStart"</code>.
     */
    FIT_START   (2),
    /**
     * Scale the image using {@link Matrix.ScaleToFit#CENTER}.
     * From XML, use this syntax:
     * <code>android:scaleType="fitCenter"</code>.
     */
    FIT_CENTER  (3),
    /**
     * Scale the image using {@link Matrix.ScaleToFit#END}.
     * From XML, use this syntax: <code>android:scaleType="fitEnd"</code>.
     */
    FIT_END     (4),
    /**
     * Center the image in the view, but perform no scaling.
     * From XML, use this syntax: <code>android:scaleType="center"</code>.
     */
    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>.
     */
    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>.
     */
    CENTER_INSIDE (7);

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

Matrix.ScaleToFit

/** Controlls how the src rect should align into the dst rect for
 setRectToRect().
 */
public enum ScaleToFit {
    /**
     * Scale in X and Y independently, so that src matches dst exactly.
     * This may change the aspect ratio of the src.
     */
    FILL    (0),
    /**
     * Compute a scale that will maintain the original src aspect ratio,
     * but will also ensure that src fits entirely inside dst. At least one
     * axis (X or Y) will fit exactly. START aligns the result to the
     * left and top edges of dst.
     */
    START   (1),
    /**
     * Compute a scale that will maintain the original src aspect ratio,
     * but will also ensure that src fits entirely inside dst. At least one
     * axis (X or Y) will fit exactly. The result is centered inside dst.
     */
    CENTER  (2),
    /**
     * Compute a scale that will maintain the original src aspect ratio,
     * but will also ensure that src fits entirely inside dst. At least one
     * axis (X or Y) will fit exactly. END aligns the result to the
     * right and bottom edges of dst.
     */
    END     (3);

    // the native values must match those in SkMatrix.h
    ScaleToFit(int nativeInt) {
        this.nativeInt = nativeInt;
    }
    final int nativeInt;
}