RecyclerView、CardView和Palette打造炫酷流式布局效果

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+'

• 主布局

   .support.v7.widget.RecyclerView
       android:id="@+id/recyclerview"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   .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

源码下载 戳这里访问密码 01db