Android骨架图

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

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

相关推荐
用户26190498561575 分钟前
JUnit4 完整配置流程
android
用户26190498561579 分钟前
JaCoCo 完整配置流程
android
QING6181 小时前
Android面试 —— 八股文之app启动流程
android·面试·app
海鸥-w1 小时前
python(fastapi) 实现更新,新增,删除接口
android·python·fastapi
le1616161 小时前
Android Compose Modifier修饰符
android·compose·modifier
黄林晴1 小时前
Android17新规:内存超限直接杀App,没有崩溃日志怎么排查?
android
Yeyu1 小时前
Binder 阻塞检测:跨进程通信的性能陷阱与监控方案
android·性能优化
●VON1 小时前
鸿蒙Flutter实战:日期选择器与截止日期高亮提醒
android·flutter·华为·harmonyos·鸿蒙
流星白龙2 小时前
【MySQL高阶】20.InnoDB 磁盘文件
android·mysql·adb
●VON2 小时前
鸿蒙Flutter实战:Material 3种子色亮暗双主题系统
android·flutter·harmonyos