RecyclerView and CardVew

Transcription

1 RecyclerView and CardView 建國科技大學資管系饒瑞佶 2017/10 V1

2 CardView

3 CardView A CardView is a ViewGroup. Like any other ViewGroup, it can be added to youractivity or Fragment using a layout XML file. To create an empty CardView, you would have to add the following code to your layout XML as shown in the following snippet CardView 是一個物件容器, 後續可以配合 RecyclerView 做資料顯示 <android.support.v7.widget.cardview xmlns:card_view=" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.v7.widget.cardview>

4 設定向下相容 因為 RecyclerView 與 CardView 是 Android Lollipop(5.0) 才導入 所以需要設定向下相容 build.gradle(app) 中的 dependencies 段落加入下面設定, 然後 Sync: compile 'com.android.support:cardview-v7:21.0.+' compile 'com.android.support:recyclerview-v7:21.0.+'

5 建立 CardView Layout 可以設定圓角與陰影 create a LinearLayout and place a CardView inside it. The CardView contain the following: a TextView to display the name of the person an ImageView to display the person's photo

6 設定圓角與底色 <android.support.v7.widget.cardview xmlns:card_view=" card_view:cardcornerradius="4dp" card_view:cardbackgroundcolor="#ffff00" android:layout_width="500sp" android:layout_height="wrap_content"> 設定緊密區塊顯示 card_view:cardusecompatpadding="true"

7 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.cardview xmlns:card_view=" card_view:cardcornerradius="4dp" card_view:cardbackgroundcolor="#ffff00" card_view:cardelevation="5dp" card_view:cardusecompatpadding="true" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="8dp" android:textsize="22dp" /> </RelativeLayout> </android.support.v7.widget.cardview> </LinearLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="40dp"> <ImageView android:layout_width="64dp" android:layout_height="64dp" android:layout_alignparentleft="true" android:layout_marginbottom="1dp" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="1dp" android:contentdescription="icon" /> 這個等一下在後面可以結合 recyclerview 來使用所以部分物件名稱是配合後面範例

8 RecyclerView

9 Android Lollipop 新導入元件 ListView 進階版 RecyclerView To use the RecyclerView widget, you have to specify an adapter and a layout manager. To create an adapter, extend the RecyclerView.Adapter class. The details of the implementation depend on the specifics of your dataset and the type of views. A layout manager positions item views inside a RecyclerView and determines when to reuse item views that are no longer visible to the user.

10 LayoutManager LayoutManager 屬於 RecyclerView 的內部元件之一, 其目的用來決定 RecyclerView 當一個 view 不再顯示給使用者, 要怎麼重新使用這些 view 資源 無論是要重覆使用 (reuse) 或資源回收 (recycle) 一個 view, LayoutManager 都會從數據集 (Dataset) 去讀取岀需要的資料, 並且取代原 view 來顯示給使用者 然用這種方式去更換 view 能避免創建一些不需要的 view 也能增進使用 findviewbyid 找資源的效能

11 建立 RecyclerView define it in a layout as follows: <android.support.v7.widget.recyclerview android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/> activity_my.xml

12 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="16dp" android:paddingright="16dp" android:paddingtop="16dp" android:paddingbottom="16dp"> <android.support.v7.widget.recyclerview android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" /> </RelativeLayout>

13 Using a LayoutManager Unlike a ListView, a RecyclerView needs a LayoutManager to manage the positioning of its items. You could define your own LayoutManager by extending the RecyclerView.LayoutManager class. However, in most cases, you could simply use one of the predefined LayoutManager subclasses: LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager

14 Defining the Data Just like a ListView, a RecyclerView needs an adapter to access its data. But before we create an adapter, let us create data that we can work with. Create a simple class to represent a person and then write a method to initialize a List of Person objects:

15 定義資料 class ItemData public class ItemData { private String title; 文字與網路圖檔 URL private String imageurl; public ItemData(String title, String imageurl){ this.title = title; this.imageurl = imageurl; public String gettitle() { return title; public String getimageurl() { return imageurl; public void settitle(string title) { this.title = title; public void setimageurl(string imageurl) { this.imageurl = imageurl;

16 Creating an Adapter adapter follows the view holder design pattern, which means that it you to define a custom class that extends RecyclerView.ViewHolder.

17 Adapter View holdder 資料 建構子 綁定資料 建立 ViewHolder 下一頁 綁定 recyclerview 與 Click 事件

18 @Override public ViewHolder oncreateviewholder(viewgroup viewgroup, int i) { // 建立一個要呈現的畫面, 來自 R.layout.item_layout View itemlayoutview = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout, null); // 建立 ViewHolder ViewHolder viewholder = new ViewHolder(itemLayoutView); return viewholder; 資料呈現介面 public void onbindviewholder(viewholder viewholder, int position) { // 將資料填入 view viewholder.txtviewtitle.settext(itemsdata[position].gettitle()); // 圖片 Picasso.with(viewHolder.imgViewIcon.getContext()).cancelRequest(viewHolder.imgViewIcon); Picasso.with(viewHolder.imgViewIcon.getContext()).load(itemsData[position].getImageUrl()).into(viewHolder.imgVie wicon); 使用到 3rd party 元件 Picasso compile 'com.squareup.picasso:picasso:2.5.2' // Return the size of your itemsdata (invoked by the layout public int getitemcount() { return itemsdata.length;

19 private ItemData[] itemsdata; public MyAdapter(ItemData[] itemsdata) { this.itemsdata = public ViewHolder oncreateviewholder(viewgroup viewgroup, int viewtype) { // 建立一個要呈現的畫面, 來自 R.layout.item_layout View itemlayoutview = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_layout, null); // 建立 ViewHolder ViewHolder viewholder = new ViewHolder(itemLayoutView); return public void onbindviewholder(viewholder viewholder, int position) { // 將資料填入 view viewholder.txtviewtitle.settext(itemsdata[position].gettitle()); // 圖片 Picasso.with(viewHolder.imgViewIcon.getContext()).cancelRequest(viewHolder.imgViewIcon); public int getitemcount() { return itemsdata.length;

20 public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public TextView txtviewtitle; public ImageView imgviewicon; public ViewHolder(View itemlayoutview) { super(itemlayoutview); itemlayoutview.setonclicklistener(this); txtviewtitle = (TextView) itemlayoutview.findviewbyid(r.id.item_title); imgviewicon = (ImageView) public void onclick(view view) { Toast.makeText(view.getContext(), "position = " + getposition(), Toast.LENGTH_SHORT).show();

21 加入 Picasso.jar(1)

22 加入 Picasso.jar(2)

23 item_layout.xml ( 顯示資料的實際 layout 設定 ) <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/border2_combine"> <!-- icon --> <ImageView android:id="@+id/item_icon" android:layout_width="64dp" android:layout_height="64dp" android:layout_alignparentleft="true" 圖 android:layout_marginbottom="1dp" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="1dp" android:contentdescription="icon" android:src="@drawable/ic_launcher" /> <!-- title --> <TextView android:id="@+id/item_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignbaseline="@+id/item_icon" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="8dp" android:layout_torightof="@+id/item_icon" android:textcolor="@android:color/darker_gray" android:textsize="22dp" /> </RelativeLayout> 文字

24 <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="40dp"> <ImageView android:layout_width="64dp" android:layout_height="64dp" android:layout_alignparentleft="true" android:layout_marginbottom="1dp" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="1dp" android:contentdescription="icon" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginleft="8dp" android:layout_marginright="8dp" android:layout_margintop="8dp" android:textsize="22dp" /> </RelativeLayout>

25 主程式 圖檔 URL 陣列 private String[] sources = { " " " " " ; 需要加入 Internet 權限 <uses-permission android:name="android.permission.internet"></uses-permission>

26 @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_my); // 取得 recyclerview RecyclerView recyclerview = (RecyclerView) findviewbyid(r.id.recycler_view);// 建立資料 ItemData itemsdata[] = { new ItemData("Delete", sources[0]), new ItemData("Cloud", sources[1]), new ItemData("Favorite", sources[2]), new ItemData("Like", sources[3]), new ItemData("Rating", sources[4]), ; // 設定 layoutmanger recyclerview.setlayoutmanager(new LinearLayoutManager(this));// 設定 adapter MyAdapter madapter = new MyAdapter(itemsData);// 綁定 recyclerview 與 adapter recyclerview.setadapter(madapter);// 設定預設動畫效果 DefaultAnimator recyclerview.setitemanimator(new DefaultItemAnimator());

27 MyAdapter 中 oncreateviewholder 使用 item_layout 的結果

28 如果 MyAdapter 中 oncreateviewholder 改用前面 p7 的 CardView 結果

29 如果要使用資料庫等資料 ItemData[] itemsdata = new ItemData[5]; // 5= 陣列大小 for (int i = 0; i <= 4; i++) { ItemData aa = new ItemData("xxxxxx", " zgczcevdo8w/u-ccbdk-jii/aaaaaaaajnq/ttdqk12t5gs/s1600/recyclerview.png"); itemsdata[i]=aa;