Skelly 开源项目使用教程

Skelly 开源项目使用教程

skelly A tiny library for displaying skeletons while the content itself is loading 项目地址: https://gitcode.com/gh_mirrors/sk/skelly

1. 项目介绍

Skelly 是一个用于在内容加载时显示骨架屏的微型库。骨架屏是一种在页面内容加载完成前，显示一个占位符的 UI 技术，以提升用户体验。Skelly 库完全同步了整个应用程序中的所有骨架屏，无论屏幕上同时显示多少个骨架屏。

主要特性

• 自定义颜色：可以设置渐变动画的开始和结束颜色。
• 圆角半径：可以自定义骨架屏的圆角半径。
• 多平台支持：支持在 XML 布局和源代码中进行配置。

2. 项目快速启动

安装依赖

首先，在你的 build.gradle 文件中添加 Skelly 库的依赖：

dependencies {
    implementation 'com.dpforge:skelly:1.0.1'
}

在布局文件中使用

在 XML 布局文件中添加 SkeletonView：

<com.dpforge.skelly.SkeletonView
    android:id="@+id/skeleton"
    android:layout_width="match_parent"
    android:layout_height="48dp" />

在代码中使用

你也可以在代码中动态设置 SkeletonView 的属性：

SkeletonView skeletonView = findViewById(R.id.skeleton);
skeletonView.setStartColor(0xFFCCCCCC);
skeletonView.setEndColor(0xFF444444);
skeletonView.setCornerRadius(24);

3. 应用案例和最佳实践

案例1：列表加载

在加载列表数据时，使用骨架屏可以提升用户体验。例如，在 RecyclerView 中使用 SkeletonView：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:listitem="@layout/item_skeleton" />

案例2：页面加载

在页面加载时，使用骨架屏可以避免页面空白，提升用户体验。例如，在 Activity 中使用 SkeletonView：

SkeletonView skeletonView = findViewById(R.id.skeleton);
skeletonView.startSkeleton();

// 数据加载完成后
skeletonView.stopSkeleton();

最佳实践

• 颜色选择：选择与页面背景相匹配的颜色，以确保骨架屏与页面整体风格一致。
• 圆角半径：根据页面设计调整圆角半径，以确保骨架屏的视觉效果与页面其他元素一致。

4. 典型生态项目

1. Android 骨架屏库

Skelly 是一个专注于 Android 平台的骨架屏库，适用于需要提升加载体验的 Android 应用。

2. 其他平台骨架屏库

• React Native：react-native-skeleton-placeholder
• Vue.js：vue-content-loader

这些库提供了跨平台的骨架屏解决方案，适用于不同技术栈的项目。

---

通过以上步骤，你可以快速上手并使用 Skelly 库来提升你的 Android 应用的用户体验。

skelly A tiny library for displaying skeletons while the content itself is loading 项目地址: https://gitcode.com/gh_mirrors/sk/skelly