RecyclerView and CardView

Slides:



Advertisements
Similar presentations
Android ADT + Android SDK Eclipse Eclipse 編輯器 JAVA JAVA 開發工具.
Advertisements

第13章 繪圖與多媒體 13-1 顯示圖檔-行動相簿 13-2 音樂播放-音樂播放器 13-3 影片播放-視訊播放器
實驗五:多媒體播放器選單介面.
Part 2 開發Android應用程式的流程
设计模式可以帮助我们改善系统的设计,增强 系统的健壮性、可扩展性,为以后铺平道路。
類別與物件 Class & Object.
Android + Web Service 建國科技大學 資管系 饒瑞佶 2017/3 V1.
ArrayAdapter & Spinner
手持式裝置之隨身照護應用 Android開發環境設定 鐘國家 老師.
手持式裝置之隨身照護應用 Android開發環境設定 鐘國家 老師.
建立Android新專案 建國科技大學 資管系 饒瑞佶 2010/10.
厦门大学数据库实验室 报告人:谢荣东 导师:林子雨 2014年8月30日
實驗四:單位轉換程式.
Chapter 13 Android 實戰演練.
Android + JUnit 單元測試 建國科技大學資管系 饒瑞佶 2012/8/19V4.
實驗十三:顯示目前經緯度位置.
API设计实例分析 通用IO API.
LINQ 建國科技大學 資管系 饒瑞佶.
Ch06 再談選單元件 物件導向系統實務.
JAVA vs. SQL Server 建國科技大學 資管系 饒瑞佶 2013/4 V1.
使用Android控制Arduino 史先强
Android資料庫處理 Android智慧型手機程式設計 程式設計與應用班 建國科技大學 資管系 饒瑞佶 2012/4 V1
第一个Android程序 本讲大纲: 1、创建Android应用程序 2、Android项目结构说明 3、运行Android应用程序
Chapter 6 Advanced UI Design.
Android智慧型手機程式設計實務應用班
Chapter 7 Android應用元件 Android應用元件可以幫助我們獲得系統資源訊息(ActivityManager)、提供系統服務(Service)、搜尋系統服務(SearchManager)、監聽Intent訊息(Broadcast Receiver)以及資料共享(ContentProvider和ContentResolver)。
Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2
Chapter 6 進階UI設計.
第9章 使用意圖啟動活動與內建應用程式 9-1 意圖的基礎 9-2 使用意圖啟動活動
创建型设计模式.
CH7 佈局、按鈕與文字編輯元件.
Android + Service 建國科技大學 資管系 饒瑞佶.
實驗十四:顯示與控制地圖.
王豐緒 銘傳大學資訊工程學系 問題:JAVA 物件檔輸出入.
第2讲 移动应用开发基础知识(二) 宋婕
建立Android新專案 Android智慧型手機程式設計 程式設計與應用班 建國科技大學 資管系 饒瑞佶 2012/4 V1
第6章 建立Android使用介面 6-1 介面元件的基礎 6-2 Android的事件處理 6-3 按鈕元件 6-4 文字元件
SpringerLink 新平台介绍.
PubMed整合显示图书馆电子资源 医科院图书馆电子资源培训讲座.
C/C++/Java 哪些值不是头等程序对象
實驗十一:待辦事項程式 (儲存在手機上).
主编:钟元生 赵圣鲁.
CLICK HERE TO ADD YOUR TITLE
Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1.
Chapter 5 Basic UI Design.
Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10.
實驗九:延續實驗八, 製作一個完整音樂播放器
Location Based Services - LBS
IIS Internet Information Services
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
補間動畫 (Tween Animation) 靜宜大學資管系 楊子青
SpringerLink 新平台介绍.
Inheritance -II.
Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10.
计算机问题求解 – 论题1-5 - 数据与数据结构 2018年10月16日.
30% 30% CLICK HERE TO ADD YOUR TITLE CLICK HERE TO ADD YOUR TITLE
Create and Use the Authorization Objects in ABAP
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
RecyclerView and CardView
第6單元 6-1 類別的繼承 (Class Inheritance) 6-2 抽象類別 (Abstract Class)
Android Speech To Text(STT)
辅导课程十二.
Activity的生命週期: 播放音樂與影片 靜宜大學資管系 楊子青
多國語系 建國科技大學 資管系 饒瑞佶.
讀取網路資料及JSON開放資料 靜宜大學資管系 楊子青
ADD YOUR TITLE CLICK HERE TO ADD YOUR TEXT.
加速感測器 靜宜大學資管系 楊子青.
SQLite資料庫 靜宜大學資管系 楊子青.
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
When using opening and closing presentation slides, use the masterbrand logo at the correct size and in the right position. This slide meets both needs.
Presentation transcript:

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

CardView

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="http://schemas.android.com/apk/res-auto"         android:layout_width="match_parent"         android:layout_height="wrap_content">   </android.support.v7.widget.CardView>

設定向下相容 因為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.+'

建立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

設定圓角與底色 <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/cv" card_view:cardCornerRadius="4dp" card_view:cardBackgroundColor="#ffff00" android:layout_width="500sp" android:layout_height="wrap_content"> 設定緊密區塊顯示 card_view:cardUseCompatPadding="true"

這個等一下在後面可以結合recyclerview來使用 所以部分物件名稱是配合後面範例 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/cv" card_view:cardCornerRadius="4dp" card_view:cardBackgroundColor="#ffff00" card_view:cardElevation="5dp" card_view:cardUseCompatPadding="true" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="fill_parent" android:background="@color/cardview_light_background" android:layout_height="40dp"> <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="@mipmap/ic_launcher" /> <TextView android:id="@+id/item_title" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/item_icon" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/item_icon" android:textColor="@android:color/darker_gray" android:textSize="22dp" /> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout> 這個等一下在後面可以結合recyclerview來使用 所以部分物件名稱是配合後面範例

RecyclerView

RecyclerView Android Lollipop新導入元件 ListView進階版 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.

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

建立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

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/cardview_dark_background" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="16dp" android:paddingBottom="16dp"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:scrollbars="vertical" /> </RelativeLayout>

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

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:

定義資料class ItemData public class ItemData { private String title; 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) { public void setImageUrl(String imageUrl) { 文字與網路圖檔URL

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

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

資料呈現介面Layout 使用到3rd party元件Picasso @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; } 資料呈現介面Layout @Override 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.imgViewIcon); } // Return the size of your itemsData (invoked by the layout manager) @Override public int getItemCount() { return itemsData.length; } 使用到3rd party元件Picasso compile 'com.squareup.picasso:picasso:2.5.2'

private ItemData[] itemsData; public MyAdapter(ItemData[] itemsData) { this.itemsData = itemsData; } @Override 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 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.imgViewIcon); public int getItemCount() { return itemsData.length;

public static class ViewHolder extends RecyclerView 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) itemLayoutView.findViewById(R.id.item_icon); } @Override public void onClick(View view) { Toast.makeText(view.getContext(), "position = " + getPosition(), Toast.LENGTH_SHORT).show();

加入Picasso.jar(1) http://square.github.io/picasso/

加入Picasso.jar(2)

item_layout.xml (顯示資料的實際layout設定) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/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_height="wrap_content" android:layout_alignBaseline="@+id/item_icon" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/item_icon" android:textColor="@android:color/darker_gray" android:textSize="22dp" /> </RelativeLayout> 圖 文字

<RelativeLayout xmlns:android="http://schemas. android android:layout_width="fill_parent" android:background="@color/cardview_light_background" android:layout_height="40dp"> <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="@mipmap/ic_launcher" /> <TextView android:id="@+id/item_title" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/item_icon" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/item_icon" android:textColor="@android:color/darker_gray" android:textSize="22dp" /> </RelativeLayout>

主程式 圖檔URL陣列 private String[] sources = { "https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg", "http://lorempixel.com/600/250/sports", "http://lorempixel.com/600/200/sports/Dummy-Text", "http://lorempixel.com/600/200/nature", "http://lorempixel.com/600/200/food", }; 需要加入Internet權限 <uses-permission android:name="android.permission.INTERNET"></uses-permission>

@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()); }

MyAdapter中onCreateViewHolder使用item_layout的結果

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

如果要使用資料庫等資料 ItemData[] itemsData = new ItemData[5]; // 5=陣列大小 for (int i = 0; i <= 4; i++) { ItemData aa = new ItemData("xxxxxx", "http://2.bp.blogspot.com/-zgczCEVDO8w/U-CCbDk-jII/AAAAAAAAJNQ/tTDqk12t5gs/s1600/RecyclerView.png"); itemsData[i]=aa; }