Android UI篇之ImageView（三）ImageView 使用详解 1. src与background区别

ImageView

基本使用

1.layout  
<ImageView
    android:id="@+id/image"
    android:background="@drawable/selecter_image_state"
    android:clickable="true"
    android:focusable="true"
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:padding="4dp"
    app:tint="#FFFFFF"
    app:srcCompat="@drawable/image_circle" />

2.background
// selecter_image_state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image_state_selected" android:state_pressed="true" />
    <item android:drawable="@drawable/image_state_selected" android:state_selected="true" />
    <item android:drawable="@drawable/image_state_normal" android:state_selected="false"/>
</selector> 

// image_state_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:color="#77D5E5"
        android:width="2dp"/>

    <solid android:color="@android:color/transparent"/>
</shape>

// image_state_normal.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/transparent"/>
</shape>

3.srcCompat
// image_circle.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M12,12m-12,0a12,12 0,1 1,24 0a12,12 0,1 1,-24 0"
      android:fillColor="#FFF"
      android:fillType="evenOdd"/>
</vector>

属性详解

src与background区别

src：内容，按图片大小填充，不会拉伸
background：背景，会根据控件宽高拉伸

属性介绍

android:maxHeight：最大高度
android:maxWidth：最大宽度
android:adjustViewBounds：控件是否调整自己边界来保持所显示图片的宽高比，需与android:maxHeight、android:maxWidth一起使用，否则无效，且android:layout_width、android:layout_height需为wrap_content
android:scaleType：设置所显示图片如何缩放或移动以适应控件大小

matrix；不改变图片大小，左上角显示，超出裁剪

fitXY：横向、纵向独立缩放，以填满控件

fitStart：保持横纵比缩放，并将图片显示在控件左上角

fitCenter：保持横纵比缩放，并将图片显示在控件中间

fitEnd：保持横纵比缩放，并将图片显示在控件右下角

center：显示在控件中间，不缩放，图片超出控件大小则裁剪

centerCrop：保持横纵比在中间缩放，以使图片完全覆盖控件

centerInside：保持横纵比缩放，以使控件完全显示图片

方法介绍

透明度

android:alpha -> 0f~1f

setAlpha(alpha： Float) -> 0f~1f

setAlpha(alpha: Int) -> 0~255

setImageAlpha(alpha: Int)

图片设置

setImageBitmap(bitmap: Bitmap)

setImageDrawable(drawable: Drawable)

图片颜色

方式一

<ImageView
    app:tint="@color/color_000000"
    app:srcCompat="@drawable/stroke_bar"/>

mBinding.iv.imageTintList = ColorStateList.valueOf(resources.getColor(context, R.color.color_000000))

方式二

val stroke = ResTool.getDrawable(context, R.drawable.stroke_bar)
if (stroke != null) {
    DrawableCompat.setTint(stroke, color)
    mBinding.iv.setImageDrawable(stroke)
}

方式三

<ImageView
    app:srcCompat="@drawable/stroke_bar"/>

val color = ResTool.getColor(context, R.color.color_000000)
mBinding.iv.setColorFilter(color)

增加旋转动画

private val rotateAnimation = RotateAnimation(0f, 360f,
    Animation.RELATIVE_TO_SELF, 0.5f,
    Animation.RELATIVE_TO_SELF, 0.5f).apply {
    interpolator = LinearInterpolator()
    duration = 2000
    repeatCount = -1
    fillAfter = true
    startOffset = 10
}
iv.animation = rotateAnimation
iv.clearAnimation()

特殊效果

private void hideImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();

    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, radius, 0);

    anim.addListener(new AnimatorListenerAdapter() {

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mImageView.setVisibility( View.INVISIBLE );
        }
    });

    anim.start();
}

private void revealImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();

    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, 0, radius);

    anim.setDuration( 1000 );
    anim.addListener( new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
            mImageView.setVisibility( View.VISIBLE );
        }
    });

    anim.start();
}

水波纹效果

<ImageView
    android:id="@+id/iv_ripple"
    style="@style/RippleStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/svg_xxx"
    android:background="@drawable/ripple_background" />

# ripple_background.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/color_1a000000">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/color_ffffff"/>
        </shape>
    </item>
</ripple>

# style.xml
<style name="RippleStyle">
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
    <item name="android:scaleType">center</item>
    <item name="android:tint">@color/btn_tint</item>
</style>

# color/btn_tint.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_1f86eb" android:state_pressed="true" />
    <item android:color="@color/color_bcbcbc" android:state_enabled="false" />
    <item android:color="@color/color_1f86eb" android:state_selected="true" />
    <item android:color="@color/color_6a6a6a" />
</selector>