关闭

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

标签: androidcardviewPaletteRecyclerVi
817人阅读 评论(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
查看评论

Android5.0之RecyclerView、CardView、Palette简述(后面逐步发详细的)

1. Android 5.0,Lollipop(棒棒糖)          Android5.0最明显的变化是采用了全新的设计语言,被称之为“MaterialDesign”。界面加入了五彩缤纷的颜色、流畅的动画效...
  • hjhrq1991
  • hjhrq1991
  • 2014-10-25 10:50
  • 1752

Android开发丶MaterialDesign实战のCardViewRecyclerView实现炫酷列表页

在RecyclerView的基础上,使用MaterialDesign控件CardView实现炫酷的列表栏 实现效果:   实现步骤 1.在build.gradle里面添加依赖 recyclerView cardView 2.在主界面的XML文件中设置RecyclerView控件 andr...
  • u014078990
  • u014078990
  • 2017-09-04 11:50
  • 162

RecyclerView和CardView的使用以及注意

转载请注明出处 作者:AboutJoke ( http://blog.csdn.net/u013200308 ) 原文链接:http://blog.csdn.net/u013200308/article/details/51168922 距离RecyclerView和CardView的出现...
  • u013200308
  • u013200308
  • 2016-04-25 18:20
  • 1308

Android开发之RecyclerView实现流式布局

RecyclerView的流式布局
  • u012954720
  • u012954720
  • 2016-11-19 23:16
  • 3607

RecyclerView与CardView的使用

RecyclerView与CardView的使用,两者皆是为了扩展listView而存在的,其效果可以实现四种样式,横向listView,纵向listView,瀑布listView,网格ListView。具体的导入与实现步骤其查看博文。
  • liyuanjinglyj
  • liyuanjinglyj
  • 2015-12-26 20:48
  • 10734

Android中使用RecyclerView和CardView实现瀑布流效果(StaggeredGrid)

在Android 5.0 中引入了Material Design的设计理念,并加入了RecyclerView和CardView两个控件。本文就讲解如何使用者两个控件来实现瀑布流效果(StaggeredGrid)。先上效果图RecyclerViewRecyclerView 是一个更加高级和灵活的Lis...
  • L664675249
  • L664675249
  • 2015-11-16 17:33
  • 2246

Android学习笔记030之RecyclerView和CardView实现拖拽和滑动

Android学习笔记030之RecyclerView和CardView实现拖拽和滑动
  • solo_talk
  • solo_talk
  • 2016-07-18 11:39
  • 1507

Material Design: RecyclerView配合CardView创建卡片列表

详解Android中利用RecyclerView及CardView来创建卡片列表
  • qq_23889793
  • qq_23889793
  • 2017-09-16 16:33
  • 266

RecyclerView 流式布局

RecyclerView 流式布局的一个demo,从网上下载的,我稍微改了一下,随手记下来备用.
  • moyinghui
  • moyinghui
  • 2016-10-08 17:32
  • 791

coordinatorLayout 的一个小效果

Design Support Library中 有个CoordiantorLayout类,效果挺不错的。先看看下面的效果:        布局代码:     <android.support.design.widget.Coordin...
  • z_Arze
  • z_Arze
  • 2016-03-15 23:42
  • 629
    个人资料
    • 访问:126158次
    • 积分:1735
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:0篇
    • 译文:1篇
    • 评论:32条
    最新评论