1 Skeleton
1.阅览
2.使用说明
Android Studio 中使用需要dependencies中添加：
dependencies {
implementation ‘com.ethanhua:skeleton:1.1.2’
implementation ‘io.supercharge:shimmerlayout:2.1.0’
}
Skeleton库有两种主要用法，一种是和RecycleView 搭配使用，另外一种是直接作用于View。
主要函数说明：
bind函数：
public class Skeleton {
//用于RecycleView，配合RecyclerViewSkeletonScreen
public static RecyclerViewSkeletonScreen.Builder bind(RecyclerView recyclerView) {
return new RecyclerViewSkeletonScreen.Builder(recyclerView);
}
//用于普通view，配合ViewSkeletonScreen
public static ViewSkeletonScreen.Builder bind(View view) {
return new ViewSkeletonScreen.Builder(view);
}
}
2.1RecyclerViewSkeletonScreen 作用于RecycleView
skeletonScreen = Skeleton.bind(mRecycleView)
.adapter(mAdapterDemo)
.shimmer(true)
.angle(20)
.frozen(false)
.duration(3300)
.color(R.color.shimmer_color)
// .count(10)
.load(R.layout.skeletonlayout2)
.show(); //default count is 10
bind //绑定RecycleView,不要给RecycleView设置
adapteradapter //设置Skeleton消失时要RecycleView设置的 adapter，内部会自动绑定
load //预览加载的RecycleView item 布局文件
shimmer(true) // 是否显示shimmer动画，默认显示
count(10) // 设置recycleView 默认预览加载条目数，默认10
color(color) // shimmer 动画颜色，默认 #a2878787
angle(20) //shimmer 动画角度，默认 20度
duration(1000) // shimmer动画持续时间 ，默认1000ms;
frozen(true) // skeleton 显示时是否RecycleView 不可操作，默认不可操作
hide // 关闭Skeleton，就会自动绑定Adapter，显示真正数据
2.2ViewSkeletonScreen作用于View
skeletonScreen = Skeleton.bind(mRootView)
.load(R.layout.skeleton_view_layout)
.shimmer(true)
.angle(20)
.duration(1000)
.color(R.color.shimmer_color)
.show();
bind //绑定view
load //预览加载的View 布局，会替换绑定view内的view
shimmer(true) // 是否显示shimmer动画，默认显示
color(color) // shimmer 动画颜色，默认 #a2878787
angle(20) //shimmer 动画角度，默认 20度
duration(1000) // shimmer动画持续时间 ，默认1000ms;
hide // 关闭Skeleton 加载预览，显示真正View
3.示例代码
3.1RecycleView 骨架加载预
layout_main.xml:
MainActivity.java:
public class Main54Activity extends AppCompatActivity {
private RecyclerView mRecycleView;
private ArrayList mData;
private AdapterDemo mAdapterDemo;
private RecyclerViewSkeletonScreen skeletonScreen;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecycleView = findViewById(R.id.recycleview);
LinearLayoutManager layoutManager = new LinearLayoutManager(this );
mRecycleView.setLayoutManager(layoutManager);
layoutManager.setOrientation(OrientationHelper. VERTICAL);
initData();
}
private void initData() {
mData = new ArrayList<>();
mData.add("111111111111111111111111111111111111111111");
mData.add("222222222222222222222222222222222222222222");
mData.add("333333333333333333333333333333333333333333");
mData.add("444444444444444444444444444444444444444444");
mData.add("555555555555555555555555555555555555555555");
mData.add("666666666666666666666666666666666666666666");
mAdapterDemo = new AdapterDemo(mData,Main54Activity.this);
skeletonScreen = Skeleton.bind(mRecycleView)
.adapter(mAdapterDemo)
.shimmer(true)
.angle(20)
.frozen(false)
.duration(3300)
.color(R.color.shimmer_color)
// .count(10)
.load(R.layout.layout_skeleton)
.show(); //default count is 10
mRecycleView.postDelayed(new Runnable() {
@Override
public void run() {
skeletonScreen.hide();
}
}, 3300);
}
}
Adapter:
public class AdapterDemo extends RecyclerView.Adapter {
private ArrayList mData;
private Context mContext;
public AdapterDemo(ArrayList mData, Context mContext) {
this.mData = mData;
this.mContext = mContext;
}
@NonNull
@Override
public AdapterDemoViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_skeleton_layout, viewGroup, false);
return new AdapterDemoViewHolder(v);
}
@Override
public void onBindViewHolder(@NonNull AdapterDemoViewHolder adapterDemoViewHolder, int i) {
String data = mData.get(i);
adapterDemoViewHolder.imageView.setImageResource(R.mipmap.ic_launcher);
adapterDemoViewHolder.textView.setText(data);
}
@Override
public int getItemCount() {
return mData.size();
}
public class AdapterDemoViewHolder extends RecyclerView.ViewHolder {
private ImageView imageView;
private TextView textView;
public AdapterDemoViewHolder(@NonNull View itemView) {
super(itemView);
imageView = itemView.findViewById(R.id.imageview);
textView = itemView.findViewById(R.id.textview);
}
}
}
item_skeleton_layout.xml:
layout_skeleton.xml:
3.1骨架加载预览 View 相关
layout_main.xml:
Activity.java:
public class Main55Activity extends AppCompatActivity {
private ConstraintLayout mRootView;
private ViewSkeletonScreen skeletonScreen;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRootView = findViewById(R.id.rootview);
skeletonScreen = Skeleton.bind(mRootView)
.load(R.layout.skeleton_view_layout)
.shimmer(true)
.angle(20)
.duration(1000)
.color(R.color.shimmer_color)
.show();
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
skeletonScreen.hide();
}
},3000);
}
}
skeleton_view_layout.xml:
2 Spruce
添加依赖
dependencies {
compile 'com.willowtreeapps.spruce:spruce-android:1.0.1'
}
使用：
Animator spruceAnimator = new Spruce
.SpruceBuilder(parentViewGroup)
.sortWith(new DefaultSort(/*interObjectDelay=*/50L))
.animateWith(animators)
.start();
https://github.com/willowtreeapps/spruce-android
public class RecyclerFragment extends Fragment {
public static RecyclerFragment newInstance() {
return new RecyclerFragment();
}
private RecyclerView recyclerView;
private Animator spruceAnimator;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, @Nullable Bundle savedInstanceState) {
recyclerView = container.findViewById(R.id.recycler);
recyclerView.setHasFixedSize(true);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext()) {
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
super.onLayoutChildren(recycler, state);
initSpruce();
}
};
// Mock data objects
List placeHolderList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
placeHolderList.add(new ExampleData());
}
recyclerView.setAdapter(new RecyclerAdapter(placeHolderList));
recyclerView.setLayoutManager(linearLayoutManager);
return inflater.inflate(R.layout.recycler_fragment, container, false);
}
@Override
public void onResume() {
super.onResume();
if (spruceAnimator != null) {
spruceAnimator.start();
}
}
private void initSpruce() {
spruceAnimator = new Spruce.SpruceBuilder(recyclerView)
.sortWith(new DefaultSort(100))
.animateWith(DefaultAnimations.shrinkAnimator(recyclerView, 800),
ObjectAnimator.ofFloat(recyclerView, "translationX", -recyclerView.getWidth(), 0f).setDuration(800))
.start();
}
private class RecyclerAdapter extends RecyclerView.Adapter {
List placeholderList;
class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
RelativeLayout placeholderView;
ViewHolder(View itemView) {
super(itemView);
placeholderView = (RelativeLayout) itemView.findViewById(R.id.placeholder_view);
placeholderView.setOnClickListener(this);
}
@Override
public void onClick(View v) {
initSpruce();
}
}
RecyclerAdapter(List placeholderList) {
this.placeholderList = placeholderList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
RelativeLayout view = (RelativeLayout) LayoutInflater.from(parent.getContext())
.inflate(R.layout.view_placeholder, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return placeholderList.size();
}
}
}
recycler_fragment.xml:
view_placeholder.xml:
也可直接在Activity中引用：
public class RecyclerActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recycler_fragment);
FragmentManager fm = getSupportFragmentManager();
Fragment recyclerFragment = fm.findFragmentById(R.id.recycler_fragment);
if (recyclerFragment == null) {
recyclerFragment = RecyclerFragment.newInstance();
fm.beginTransaction()
.replace(R.id.recycler_fragment, recyclerFragment)
.commit();
}
Toolbar toolBar = (Toolbar) findViewById(R.id.recycler_tool_bar);
setSupportActionBar(toolBar);
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle(R.string.recycler_name);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
}
颜色：
#3BB894
#2e7d32
#8BC34A
#4bc495
#FFFFFF
#000000
#DDDDDD
#939393
#F8F8F9
#D9E1E2
#DBE9F9