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

相关推荐
通玄1 小时前
Jetpack Compose 入门系列(十):Paging 3 分页加载
android
hunterandroid1 小时前
DataStore 工程化实践:迁移、并发更新与异常恢复
android·前端
程序员-珍3 小时前
报错下载android sdk失败
android·java
齊家治國平天下4 小时前
AAOS 电源管理深度解析:休眠/唤醒/功耗优化
android·车载系统·aaos·aosp·电源管理·休眠唤醒·carpowermanager
Xzaveir5 小时前
企业号码展示不可观测怎么办:状态机、拨测事件与异常回放
android·人工智能
2501_916007475 小时前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
黄林晴5 小时前
Nearby Connections 重大变更:不再自动开启 Wi-Fi / 蓝牙,适配指南
android
恋猫de小郭6 小时前
Flutter 全新真 3D 实现,用 flutter_scene 能开发一个「我的世界」
android·前端·flutter
HLC++19 小时前
Linux的进程间通信
android·linux·服务器
爱笑鱼1 天前
Binder(二):AIDL 生成的 Proxy、Stub 和 Parcel 到底在做什么?
android