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

原创 2016年08月30日 22:38:53

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

重装系统遇上reboot and select proper boot device ...问题解决方案

“reboot and select proper boot device or insert boot media in selected boot device and press a key”今...

Android 炫酷的流式布局 仿小米搜索

Android 流式布局 仿小米搜索弹出的流式布局

为RecyclerView量身打造一款流式布局

说真的自从对RecyclerView的LayoutManager有新的认识后,完全不用担心很多的复杂布局了。而且对ViewGroup测量过程也不用担心了,因为里面有LayoutManager帮我们实现...

RecyclerView+CardView+Palette Demo

  • 2015-01-28 11:36
  • 1.22MB
  • 下载

RecyclerView流式布局

  • 2017-08-25 14:33
  • 22.42MB
  • 下载

Android5.x 新控件之RecyclerView,CardView,Palette的使用

自Android5.0发布以来,谷歌推出全新的Material Desigen设计风格,时过一年多了,在国内也看到很多应用在慢 慢适应MD设计风格。其中比较好的app就是网易新闻客户端了,其设计...

Android5.x 新控件之RecyclerView,CardView,Palette的使用

『转载注明出处:http://blog.csdn.net/feiduclear_up/article/details/46439005 CSDN废墟的树』自Android5.0发布以来,谷歌推出全新...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)