界面无小事(一): RecyclerView+CardView了解一下-白红宇

前言

RecyclerView是Google推荐用来替代ListView的. 整体使用感觉和ListView差不多, 但是比ListView是要多不少优点的.
想要使用它们, 先要添加依赖项哦. 版本看着填, 最好和appcompat-v7保持一致.

compile 'com.android.support:cardview-v7:25.3.1'compile 'com.android.support:recyclerview-v7:25.3.1'

RecyclerView使用

将RecyclerView添加到布局.

在代码中找到RecyclerView, 添加布局管理器. 之后还要设置适配器, 我们到适配器那部分再说. 先用最简单的LinearLayoutManager.

RecyclerView rvTest = (RecyclerView) findViewById(R.id.rv_test);rvTest.setLayoutManager(new LinearLayoutManager(this));

RecyclerView提供这些内置布局管理器:
LinearLayoutManager以垂直或水平滚动列表方式显示项目
GridLayoutManager在网格中显示项目
StaggeredGridLayoutManager在分散对齐网格中显示项目

CardView使用

我们将每一个CardView视为RecyclerView的item, 所以就不加布局, 直接上CardView了. 就像ListView的item一样. 这段布局代码的android:foreground="@drawable/card_foreground"部分我们在给CardView加点击特效部分继续细说.

RecyclerView.Adapter实现

RecyclerView.Adapter写起来并不难. 如果你的IDE是AS, 几乎可以依靠AS的提示完成代码. 代码就不分析了, 几乎和写ListView的时候一样. 但是注意, RecyclerView.Adapter这部分还没有完成, 在给RecyclerView.Adapter添加点击事件部分会增加回调代码. 然后要注意onCreateViewHolder的第二个参数viewType, 这里还没有用到.

public class MyRVAdapter extends RecyclerView.Adapter
     
       {    private final String[] mArray;    private final LayoutInflater mLayoutInflater;    private final Context mContext;    public MyRVAdapter(Context context) {        mArray = context.getResources().getStringArray(R.array.testArray);        mLayoutInflater = LayoutInflater.from(context);        mContext = context;    }    @Override    public MyRVAdapter.MyTVHolder onCreateViewHolder(ViewGroup parent, int viewType) {        return new MyTVHolder(mLayoutInflater.inflate(R.layout.rv_item, parent, false));    }    @Override    public void onBindViewHolder(MyRVAdapter.MyTVHolder holder, int position) {        holder.mTextView.setText(mArray[position]);    }    @Override    public int getItemCount() {        return mArray == null ? 0 : mArray.length;    }    public class MyTVHolder extends RecyclerView.ViewHolder {        TextView mTextView;        public MyTVHolder(View itemView) {            super(itemView);            mTextView = (TextView) itemView.findViewById(R.id.tv_test);        }    }}

到此, 已经可以运行看看效果了. 来个效果图吧!


     
         
              
       
        hello java
               
       
        hello android
               
       
        hello recycler view
               
       
        hello card view
               
       
        hello java
               
       
        hello android
               
       
        hello recycler view
               
       
        hello card view
               
       
        hello java
               
       
        hello android
               
       
        hello recycler view
               
       
        hello card view

效果图

给RecyclerView.Adapter添加点击事件

但是和ListView不同, item的点击事件要我们自己写, 当然, 也没有多麻烦. 分成两个部分, 添加接口, 和设置监听.

public interface OnItemClickListener {    void onItemClick(View view, int position);    void onItemLongClick(View view, int position);}private OnItemClickListener mOnItemClickListener;public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) {    this.mOnItemClickListener = mOnItemClickListener;}

@Overridepublic void onBindViewHolder(final MyRVAdapter.MyTVHolder holder, int position) {    holder.mTextView.setText(mArray[position]);    if (mOnItemClickListener != null) {        holder.itemView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                int pos = holder.getLayoutPosition();                mOnItemClickListener.onItemClick(holder.itemView, pos);            }        });        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {            @Override            public boolean onLongClick(View v) {                int pos = holder.getLayoutPosition();                mOnItemClickListener.onItemLongClick(holder.itemView, pos);                return false;            }        });    }}

然后就可以和使用ListView时一样对item添加监听了. 在给CardView添加点击特效部分结束之后会给出完整的效果图.

MyRVAdapter myRVAdapter = new MyRVAdapter(this);myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {    @Override    public void onItemClick(View view, int position) {        Toast.makeText(getApplicationContext(),                "click: " + position, Toast.LENGTH_SHORT).show();    }    @Override    public void onItemLongClick(View view, int position) {        Toast.makeText(getApplicationContext(),                "long click: " + position, Toast.LENGTH_SHORT).show();    }});rvTest.setAdapter(myRVAdapter);

给CardView添加点击特效

不像ListView是有个默认点击特效的, RecyclerView是需要自己来完成的. 但是由于要使用的水波纹特效在5.0才引入, 我们需要分开处理. 先是5.0之后的.

5.0后只要设置波纹颜色就好.

波纹点击

5.0之前就是选择器了, 注定是不好看的. 或者有其他方法可以救一下?

选择器

我再补充一点, 想要不同版本对应不同的点击特效, 要在资源文件目录建文件夹. 比如这里的drawable-v21就代表21及以上使用, 21以下使用drawable.

建包

为CardView添加更多内容

CardView不可能说只能显示文字, 那如何添加图标或者图片呢?我只能说异常简单, 看代码:

再来个效果图:

2018-04-12_20-59-39.gif-468.1kB

最后

基本算是RecyclerView的入门了, 喜欢记得点赞或者关注我, 如果感兴趣还有第二篇哦~~