关闭

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

标签: androidcardviewPaletteRecyclerVi
715人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:104134次
    • 积分:1665
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:0篇
    • 译文:1篇
    • 评论:38条
    最新评论