RecyclerView、CardView和Palette都是android5.0新特性。下面这个小案例就是通过RecyclerView的StaggeredGridLayoutManager实现流式布局,CardView实现圆角, Palette拾取不同的图片的颜色值设置给CardView做背景色。
###效果展示
首先了解一下要用的三个控件:
-
RecyclerView和ListView不同的是系统提供3个不同的布局管理器(LayoutManager)来协调布局,没有自带的条目点击事件,提供了自己的适配器RecyclerView.Adapter
a.LinearLayoutManager:线性布局
b.GridLayoutManager: 网格布局
c.StaggeredGridLayoutManager: 瀑布流布局 -
CardView其实就是一个继承与FramLayout的自定义VIew,可以用了实现圆角卡片的效果;CardLayout拥有高度和阴影,以及轮廓裁剪,圆角等功能
1.设置圆角:card_view:cardCornerRadius=“10dp”
2.设置高度:card_view:cardElevation=“10dp”
3.设置内边距:card_view:contentPadding=“10dp”
4.设置背景色:card_view:cardBackgroundColor=“color/colorPrimary” -
Palette识别颜色通过下面的方法拾取不同的颜色值
1.最活跃的颜色:palette.getVibrantColor(0)
2.最暗的活跃色: palette.getDarkVibrantColor()
3.最亮的活跃色: palette.getLightVibrantColor()
4.最柔和的颜色:palette.getMutedColor(0)
5.最暗的柔和色:palette.getDarkMutedColor(0)
6.最亮的柔和色:palette.getLightMutedColor(0)
###接下来就是编码了
- 首先引入依赖库
compile 'com.android.support:recyclerview-v7:23+'
compile 'com.android.support:cardview-v7:23+'
compile 'com.android.support:palette-v7:23+'
- 主布局
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
- 初始化布局和控件
RecyclerView mRecyclerView = ((RecyclerView) findViewById(R.id.recyclerview));
mRecyclerView.setAdapter(new StaggeredAdapter(mContext));
//设置布局管理器 3表示每行显示3列,
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
- 主要的功能还是在这个adapter中进行操作的,图片的复用以及,颜色值得拾取。这里加载的是本地资源,重在实现效果;如果加载网络图片的话就要考虑性能和效率的问题了。
/**
* Created by rongtao on 2016/3/21.
*/
public class StaggeredAdapter extends RecyclerView.Adapter<StaggeredAdapter.MyViewHolder> {
private LayoutInflater mLayoutInflater;
private Context mContext;
private int[] images = new int[]{
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e,
R.drawable.f,
R.drawable.g,
R.drawable.h,
R.drawable.i,
R.drawable.j
};
public StaggeredAdapter(Context context) {
super();
this.mContext = context;
mLayoutInflater = LayoutInflater.from(mContext);
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mLayoutInflater.inflate(R.layout.list_item, null);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
holder.iv_Image.setImageResource(images[position % 10]);
//获取当前imageView中的Drawable
Drawable drawable = holder.iv_Image.getDrawable();
if (drawable instanceof BitmapDrawable) {
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
//从 BitmapDrawable拾取颜色值
Palette.from(bitmapDrawable.getBitmap())
.generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//拾取不到颜色时的默认值
holder.cardView.setCardBackgroundColor(palette.getVibrantColor(Color.YELLOW));
}
});
}
}
@Override
public int getItemCount() {
return images.length * 2;
}
class MyViewHolder extends RecyclerView.ViewHolder {
ImageView iv_Image;
CardView cardView;
public MyViewHolder(View itemView) {
super(itemView);
cardView = (CardView) itemView.findViewById(R.id.cardview);
iv_Image = (ImageView) itemView.findViewById(R.id.iv_image);
}
}
}
自定义RecycleViewLayoutManager源码 访问密码 1fa2