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

相关推荐
limuyang27 小时前
PDF Viewer KMP(基于 chrome 的 PDFium 内核)
android·kotlin
心平气和量大福大10 小时前
android-控件-搜索框SearchView
android·gitee
2601_9621771310 小时前
【MySQL篇】聚合查询,联合查询
android·java·mysql
壮哥_icon10 小时前
【Android】批量 VectorDrawable 动态分别修改 fillColor 和 strokeColor 的踩坑与终极解决方案
android
齐天qaq12 小时前
Android 系统 APK 分区与权限
android
心平气和量大福大12 小时前
android-控件-多选框CheckBox
android·gitee
pengyu14 小时前
【Kotlin 协程修仙录 · 大乘境 · 初阶】 | 跳出三界:协程在 KMP 与后端开发中的跨平台之道
android·kotlin
XiaoLeisj14 小时前
Android Memory Profiler:堆内存指标、内存抖动与泄漏定位
android·性能优化·内存抖动·内存泄露·memory profiler
未来猫咪花14 小时前
Everything is ViewModel:让状态管理回到对象世界
android·flutter·ios