站長留言

  • ✅ 本站維護及更新歷史紀錄，詳情請參考公告
  • ✅ 有任何意見、想法，歡迎留言給Spicy知道喔
  • ✅ 固定於每周一至周五更新Blogger文章，周末不定期
程式Android 安卓

【APP/Android】如何用 RecyclerView, CardView 來製作清單和卡片元件

SpicyBoyd
tags: APP Android

RecyclerView 專案連結

RecyclerView 專案：連結

Common 簡介

  • RecyclerView
    5.0版本之後，google提供了一個新的方法-RecyclerView，這個新的元件可以有效實現ListView, GridView與Gallery這3種元件的效果

  • CardView
    繼承自FrameLayout，是一種卡片視圖，主要是以卡片的形式顯示內容卡片布局可以設置陰影和圓角，可以做為ListView 和 RecyclerView的item使用

  • CardView, RecyclerView 因為都不屬於 android.widget 套件，
    所以必須使用完整路徑名稱，例如：<android.support.v7.widget.RecyclerView />

  • RecylerView 中可以放各種 item：ListView, GridView, CardView…

Code 程式碼

步驟1：在 gradle (app) 進行 import

  • 將 RecyclerView 和 CardView 的 lib 引入
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'

步驟2：在 activity_main.xml 加入 RecyclerView

  • activity_main 最外層的 Layout：<LinearLayout>, <RelativeLayout> 都可
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    tools:context="egber.recyclerview.MainActivity">  

    <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content" /> 

</LinearLayout>

步驟3：設定 CardView 的樣式，以加到 RecyclerView 上

  1. new 一個 Layout XML file
  2. 自行決定要在CardView中加入什麼元件
  3. 這邊的範例是：1張圖片 (ImageView), 2段文字 (TextView)
  4. 重點提醒：
  • 程式碼：
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="6dp"
    android:padding="6dp"
    app:cardBackgroundColor="#ffdddddd"
    app:cardCornerRadius="28dp"
    app:cardElevation="6dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageId"
            android:layout_width="120dp"
            android:layout_height="160dp"
            android:layout_marginStart="16dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:layout_marginStart="20dp" />

            <TextView
                android:id="@+id/textName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:layout_marginStart="24dp" />
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

步驟4：設定要放入 CardView 的資料結構，new 一個 Java class

  • 資料結構就是步驟3，提到的 1張圖片, 2段文字
    • id：第1段文字，type：int，之後會轉型成String
    • image：圖片
    • name：第2段文字
public class Member {
    private int id;
    private int image;
    private String name;

    public Member() {
        super();
    }

    public Member(int id, int image, String name) {
        super();
        this.id = id;
        this.image = image;
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getName() {
        return name;
    }

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

步驟5：在 MainActivity.java 初始化要放入 CardView 的資料

  • 將步驟4設定的 CardView 的資料結構 Member.java 當成List的泛型
  • 依序設定好要在每一個 CardView 上顯示的資料
@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);

    List<Member> memberList = new ArrayList<>();   
    memberList.add(new Member(1, R.drawable.baishatunbeach1, "白沙屯海灘1"));  
    memberList.add(new Member(2, R.drawable.baishatunbeach2, "白沙屯海灘2"));  
    memberList.add(new Member(3, R.drawable.baishatunbeach3, "白沙屯海灘3"));  
    memberList.add(new Member(4, R.drawable.baishatunbeach4, "白沙屯海灘4"));  
    memberList.add(new Member(5, R.drawable.baishatunbeach5, "白沙屯海灘5"));  
    memberList.add(new Member(6, R.drawable.baishatunspot3, "白沙屯3"));  
    memberList.add(new Member(7, R.drawable.houlongthecape1, "後龍1"));  
    memberList.add(new Member(8, R.drawable.houlongthecape2, "後龍2"));  
    memberList.add(new Member(9, R.drawable.houlongthecape3, "後龍3"));  
    memberList.add(new Member(10, R.drawable.longgangspot4, "龍港4"));  
    memberList.add(new Member(11, R.drawable.longgangspot4_1, "龍港4.1"));  
    memberList.add(new Member(12, R.drawable.longgangspot4_2, "龍港4.2"));
}

步驟6：設定 CardView 要在 RecyclerView 上呈現的樣式

LayoutManager

  1. LayoutManager是RecyclerView下的一個抽象類項
  2. 用來設置RecyclerView的顯示方式，它有3種類別
    • LinearLayoutManager：線性，橫向、縱向，來畫出類似 ListView 的功能
    • GridLayoutManager：網格，效果如同GridView
    • StaggeredGridLayoutManager：瀑布流式的ListView

Code 程式碼

  1. StaggeredGridLayoutManager(int spanCount, int orientation)
    • spanCount：垂直時，平分成幾個columns；水平時，平分成幾個rows
    • orientation：VERTICAL or HORIZONTAL
  2. 下面這段程式碼，應寫在步驟5的onCreate()方法中，接在後面繼續寫
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);  
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
// MemberAdapter 會在步驟7建立
recyclerView.setAdapter(new MemberAdapter(this, memberList));

步驟7：實作 RecyclerView.Adapter 和 RecyclerView.ViewHolder

Adapter

  1. android.support.v7.widget.RecyclerView.Adapter<VH extends android.support.v7.widget.RecyclerView.ViewHolder>
  2. RecyclerView 有自己的Adapter，RecyclerView.Adapter是一個抽象類別
  3. 利用 extends 實作抽象類別並且也要將它的3個抽象方法全部加以實作
    • getItemCount()：提供RecyclerView選項的總數
    • onCreateViewHolder()：當現有的ViewHolder不夠用時，要求Adapter產生一個新的
    • onBindViewHolder()：重用之前產生的ViewHolder，把特定位置的資料連結上去，準備顯示
  4. 簡言之，運作方式：負責向上呈報數目 >> 不夠用的時候產生新的 >> 需要重用就幫忙上色

ViewHolder

  1. RecyclerView.Adapter implementations should subclass ViewHolder
  2. 抽象類別：RecyclerView.ViewHolder
  3. Adapter 需要一個 ViewHolder
  4. 只要實作它的 constructor 就好，保存起來的view會放在itemView裡面

Code 程式碼

  • onBindViewHolder()方法中有實作一個setOnClickListener()，
    功能是當點擊image時，會彈出image的訊息視窗
private class MemberAdapter extends RecyclerView.Adapter<MemberAdapter.ViewHolder> {
    private Context context;
    private List<Member> memberList;

    MemberAdapter(Context context, List<Member> memberList) {
        this.context = context;
        this.memberList = memberList;
    }

    @Override
    public MemberAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.recyclerview_cardview_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MemberAdapter.ViewHolder holder, int position) {
        final Member member = memberList.get(position);
        holder.imageId.setImageResource(member.getImage());
        holder.textId.setText(String.valueOf(member.getId()));
        holder.textName.setText(member.getName());
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImageView imageView = new ImageView(context);
                imageView.setImageResource(member.getImage());
                Toast toast = new Toast(context);
                toast.setView(imageView);
                toast.setDuration(Toast.LENGTH_SHORT);
                toast.show();
            }
        });
    }

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

    //Adapter 需要一個 ViewHolder，只要實作它的 constructor 就好，保存起來的view會放在itemView裡面
    class ViewHolder extends RecyclerView.ViewHolder{
        ImageView imageId;
        TextView textId, textName;
        ViewHolder(View itemView) {
            super(itemView);
            imageId = (ImageView) itemView.findViewById(R.id.imageId);
            textId = (TextView) itemView.findViewById(R.id.textId);
            textName = (TextView) itemView.findViewById(R.id.textName);
        }
    }
}

Reference 參考資料

  1. Android RecyclerView, Android CardView Example Tutorial：https://www.journaldev.com/10024/android-recyclerview-android-cardview-example-tutorial
  2. RecyclerView (Adding multiple type of views)：
    http://apprevelations.blogspot.tw/2015/09/recyclerview-in-androidadding-multiple.html
  3. Combining grid view and list view on a screen by using RecyclerViews Android：http://www.devexchanges.info/2016/11/combining-grid-view-and-list-view-in.html
  4. 如何使用RecyclerView-操作LayoutManager：http://givemepass.blogspot.tw/2016/09/recyclerview-layoutmanager.html
  5. 使用RecyclerView：
    http://julianchu.net/2016/03/13-recyclerview.html
  6. 淺談Android RecyclerView：
    https://medium.com/@evanhou/淺談android-recyclerview-375f9c0eea58
  7. 如何使用RecylerView-搭配CardView：http://givemepass.blogspot.tw/2015/11/recylerviewcardview.html
  8. StaggeredGridLayoutManager changing item size on scroll：
    https://stackoverflow.com/questions/49367517/staggeredgridlayoutmanager-changing-item-size-on-scroll
Tags: ,

4 則留言:

  1. SpicyBoyd2018年3月28日 晚上7:21

    測試

    回覆刪除
  2. 匿名2019年6月13日 下午4:53

    你好，我最近有參考你的文章，但是在add的地方原本都沒什麼bug，突然顯示說Member is abstract; cannot be instantiated，想請教你一下這個狀況該怎麼解決???

    回覆刪除
    回覆
    1. SpicyBoyd2019年8月8日 晚上9:13

      https://stackoverflow.com/questions/8519943/class-room-is-abstract-cannot-be-instantiated

      刪除
  3. Unknown2021年11月15日 下午3:40

    Git hub的連結遺失了 QQ

    回覆刪除

訂閱： 張貼留言 (Atom)
本網站建議使用電腦或平板瀏覽
Copyright 2017-, SpicyBoyd 部落格. All rights Reserved. | Designed by Colorlib