Android骨架图

mingxulli2023-11-27 22:40

用法：在图片上实现动画效果

kotlin 复制代码

<FrameLayout
                    android:id="@+id/image_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/ivBlank"
                        android:layout_width="match_parent"
                        android:layout_height="260dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/wm_after_meeting_blank" />

                    <com.xx.view.SkeletonView
                        android:id="@+id/skeleton_view"
                        android:layout_width="match_parent"
                        android:layout_height="260dp" />

                </FrameLayout>

实现：

kotlin 复制代码

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View

/**
 * Author: xx
 * Description:骨架图效果
 * Date: 2023/9/25 15:14
 */
class SkeletonView : View {

    private val edgeColor = Color.parseColor("#00FFFFFF")
    private val centerColor = Color.parseColor("#20FFFFFF")
    private val mColors = intArrayOf(edgeColor, centerColor, edgeColor)
    private val mPaint = Paint()
    private val mLinearGradient: LinearGradient
    private var mViewWidth = 0
    private var mViewHeight = 0
    private var mTranslate = 0f
    private val shimerWidth = 160

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    init {
        mLinearGradient = LinearGradient(
            0f,
            0f,
            shimerWidth.toFloat(),
            shimerWidth.toFloat(),
            mColors,
            floatArrayOf(0f, 0.5f, 1.0f),
            Shader.TileMode.CLAMP
        )
        mPaint.shader = mLinearGradient
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        mViewWidth = measuredWidth
        mViewHeight = measuredHeight
        if (mViewWidth > 0 && mViewHeight > 0) {
            mTranslate += mViewWidth / 10
            if (mTranslate > mViewWidth + shimerWidth) {
                mTranslate = -shimerWidth.toFloat()
            }
        }

        mLinearGradient.setLocalMatrix(
            Matrix().apply {
                setTranslate(mTranslate, mTranslate)
            }
        )

        canvas.drawRect(0f, 0f, mViewWidth.toFloat(), mViewHeight.toFloat(), mPaint)

        postInvalidateDelayed(100)
    }
}

颜色宽度速度都可以调，不需要引入三方sdk