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

相关推荐
传奇开心果3 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
android·flutter
哲鲤3 小时前
AOSP思绎|Android 多媒体:一段视频为什么需要这么多服务
android
阿杰m3 小时前
Android源码第三章:Handler、Looper 与 MessageQueue——一条消息如何入队、唤醒并执行
android
海雅达手持终端PDA7 小时前
巡线、深井、爆管抢修与极寒水网的硬件矩阵怎么配?海雅达水务巡检终端PDA选型指南
android·物联网·5g·集成测试·能源·政务
恋猫de小郭9 小时前
Flutter 开始支持 Jetpack Compose Platform View
android·前端·flutter
三少爷的鞋21 小时前
Android 架构七条铁律:架构师真正设计的不是代码,而是秩序
android
xiangxiongfly9151 天前
Android GsonFactory总结
android·gson·gsonfactory
WythePlus1 天前
Android 14 SELinux策略深度解析
android·安全策略·selinux策略
俩个逗号。。1 天前
Kotlin flow 详解
android·开发语言·kotlin
橙光成长1 天前
android-ad-cleaner:android免 Root 批量关闭系统开屏与营销推送
android·1024程序员节