Android 使用RecycleView和CardView

这里写图片描述

第一步,添加依赖:

compile 'com.android.support:cardview-v7:24.+'
compile 'com.android.support:recyclerview-v7:24.+'

第二步,CardView

CardView (继承于FrameLayout) 用来做 item 的,在res/layout/ 目录下添加一个xml文件,代表item的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/cv_item"
        android:layout_width="match_parent"

        // 如果最外围的不是固定长度而是 wrap content,那么子元素的 alignParentBottom 就是把布局顶到屏幕底部
        android:layout_height="220dp"

        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="15dp"
        app:cardElevation="4dp"

        // 以下这两个属性使得避免卡片的阴影效果被遮挡
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"

        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/rl_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/iv_pic"
                    android:scaleType="centerCrop"
                    android:layout_width="match_parent"
                    android:layout_height="150dp" />

                <TextView
                    android:textColor="#ffffff"
                    android:id="@+id/tv_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/iv_pic"
                    android:gravity="center"
                    android:text="Hero Name"
                    android:textAppearance="?android:attr/textAppearanceLarge" />
            </RelativeLayout>

            <TextView
                android:id="@+id/tv_des"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentBottom="true"
                android:layout_below="@+id/rl_header"
                android:layout_centerHorizontal="true"
                android:padding="10dp"
                android:text="介绍" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>


</RelativeLayout>

第三步,定义数据集

定义数据类 Hero

public class Hero {
        // 名字,介绍,图片
        private String name;
        private String des;
        private int photoId;

        // 构造函数
        public Hero(String name, String des,int picId) {
            this.des = des;
            this.name = name;
            photoId = picId;
        }

        public int getPhotoId() {
            return photoId;
        }

        public void setPhotoId(int photoId) {
            this.photoId = photoId;
        }

        public String getDes() {

            return des;
        }

        public void setDes(String des) {
            this.des = des;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }

然后,在 values/strings.xml 中添加相关的数据

我添加3组字符串的数据在里面

<resources>
    <string name="app_name">RecycleDemo</string>
    <string name="hero_name_0">Hock</string>
    <string name="hero_name_1">Iron Man</string>
    <string name="hero_name_2">Spider Man</string>
    <string name="hero_des_0">一个无敌的男人</string>
    <string name="hero_des_1">一个坚硬的男人</string>
    <string name="hero_des_2">一个灵活的男人</string>
</resources>

第四步,创建RecycleView对象

在MainActivity.java中创建 RecycleView 对象

    // 1. 声明一个对象,一个适配器 和 一个数据结构
    RecyclerView recyclerView;
    RecycleAdapter adapter;
    List<Hero> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 2. 获取对象
        recyclerView = (RecyclerView) findViewById(R.id.rv_hero);
        // 3. 设定 布局管理,如果设定为 gridLayoutManger 则为 Grid 布局
        LinearLayoutManager llm = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(llm);
        // 4. 初始化数据
        list = new ArrayList<>();
        initData();
        // 5. 实例化一个adapter,并建立关联
        adapter = new RecycleAdapter(list,this);
        recyclerView.setAdapter(adapter);
    }

RecycleView 一个特点/优势就是可以 (必须) 指定 layoutmanager,指定不同的manager就可以表现出不同的样式


第五步,实现RecycleAdapter

继承于RecycleView.Adapter

继承时要指定 一个ViewHolder类

public class RecycleAdapter extends RecyclerView.Adapter<RecycleAdapter.HeroViewHolder> {

    // 数据
    private List<MainActivity.Hero> heroList;
    // 上下文环境
    private Context context;
    // 构造函数
    public RecycleAdapter(List<MainActivity.Hero> heroList, Context context) {
        this.heroList = heroList;
        this.context = context;
    }

    // 这个方法返回viewholder,创建一个viewholder
    @Override
    public HeroViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 关联相关样式
        View v = LayoutInflater.from(context).inflate(R.layout.item,parent,false);
        HeroViewHolder heroViewHolder = new HeroViewHolder(v);
        return heroViewHolder;
    }

    @Override
    public void onBindViewHolder(HeroViewHolder holder, int position) {
        holder.imageView.setImageResource(heroList.get(position).getPhotoId());
        holder.name.setText(heroList.get(position).getName());
        holder.descrip.setText(heroList.get(position).getDes());
        // 点击事件也可以写在这里
    }

    @Override
    public int getItemCount() {
        return heroList.size();
    }

    // RecycleView的特点之一,必须是自定义viewholder
    class HeroViewHolder extends RecyclerView.ViewHolder{

        CardView cardView; // 这个是为了之后可以添加点击事件
        ImageView imageView;
        TextView name;
        TextView descrip;

        public HeroViewHolder(View itemView) {
            super(itemView);
            // 和平时写viewholder是一样的
            cardView = (CardView) itemView.findViewById(R.id.cv_item);
            imageView = (ImageView) itemView.findViewById(R.id.iv_pic);
            name = (TextView) itemView.findViewById(R.id.tv_name);
            descrip = (TextView) itemView.findViewById(R.id.tv_des);
        }
    }
}

RecycleView的特点,就是 必须要 自定义一个 Viewholder 继承与 Recycle.ViewHolder,使用Viewholder 是 优化list 的常用方式

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值