Android实现骨架屏占位加载效果(一)

4,212 阅读1分钟

Android骨架屏,支持单独View、RecyclerView、ListView、GridView、ViewPager。相比其他框架有更加统一的api,以及内存优化。

效果图

View效果

RecyclerView效果

ListView效果

ViewPager效果

20210427_180111_57

Gradle引用

dependencies {
    implementation 'io.github.wslaimin:piccolo:1.0.0'
}

使用

PiccoloLayout标记View

<com.lm.piccolo.view.PiccoloLayout
    android:id="@+id/Piccolo_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    app:mask="com.lm.piccolo.drawable.ImageShiningDrawable">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/ic_launcher_background"/>
</com.lm.piccolo.view.PiccoloLayout>

PiccoloLayout支持的属性:

app:mask属性支持drawable、color、自定义Drawable类型

app:shining属性骨架图是否开启动画

app:shining_paddingLeft属性图距骨架离View左边距

app:shining_paddingRight属性骨架图距离View右边距

app:shining_paddingTop属性骨架图距离View上边距

app:shining_paddingBottom属性骨架图距离View下边距

单独使用

PiccoloLayout piccoloImage=findViewById(R.id.Piccolo_image);
ConductorForView conductor=Piccolo.createForView(piccoloImage).visible(true);
conductor.play();

ConductorForView提供以下方法:

mask(Drawable mask)设置骨架图Drawable对象
shining(boolean shining)骨架图是否开启动画
paddingLeft(int padding)图距骨架离View左边距
paddingTop(int padding)骨架图距离View上边距
paddingRight(int padding)骨架图距离View右边距
paddingBottom(int padding)骨架图距离View下边距
visible(boolean visible)骨架图是否可见
play()应用上面方法设置属性

在Adapter中使用

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
ConductorForAdapter ConductorForAdapter = Piccolo.createForList(recyclerView);
int[] data=new int[]{R.layout.item, R.layout.item_another, R.layout.item, R.layout.item_another, R.layout.item, R.layout.item_another, R.layout.item, R.layout.item_another};
ConductorForAdapter.items(data)
              	.visible(true)
                .adapter(new Adapter())
                .play();

ConductorForAdapter提供以下方法:

items(ViewSpec[] items)骨架图View配置
items(int[] items)骨架图View id
adapter(RecyclerView.Adapter<?> adapter)骨架图不可见时RecyclerView的adapter
adapter(PagerAdapter adapter)骨架图不可见时ViewPager的adapter
adapter(BaseAdapter adapter)骨架图不可见时ListView或GridView的adapter
visible(boolean visible)骨架图是否可见
play()应用上面方法设置属性

支持RecyclerView、ListView、GridView、ViewPager。

github地址

piccolo

Communication

等你来Android泡泡群冒泡哦!

QQ: 905487701