Trong phiên bản Android 5.0 (Android L, API 21) có giới thiệu một widget mới có tên là CardView. Về cơ bản thì CardView giống như FrameLayout như có bo trò bốn góc (round corner) và có hiệu ứng Shadow. Và CardView thường được sử dụng làm container cho các row trong ListView và ReyclerView.
Giới thiệu
Trong phiên bản Android 5.0 (Android L, API 21) có giới thiệu một widget mới có tên là CardView. Về cơ bản thì CardView giống như FrameLayout như có bo trò bốn góc (round corner) và có hiệu ứng Shadow. Và CardView thường được sử dụng làm container cho các row trong ListView và ReyclerView.
CardView trong Android
Mặc định trong Android SDK không có sẵn widget này giống như Button hay TextView mà chúng ta phải import dependences để Android Studio tự install widget này cho chúng ta. Và để làm được điều đó các bạn làm như sau.
Vào File > Project Structure… Và chọn module app, sau đó click vào Tab Dependencies.
Tại đây các bạn nhấn vào button có dấu + và chọn mục Libray Dependencies
Sau đó nhấn OK để kết thúc.
Nếu các bạn import thư viện theo cách này thì Android Studio sẽ import thư viện mới nhất (ở trên là lib này sử dụng cho API 25 hay Android 7.0 Nougat).
Hoặc cách nhanh hơn là các bạn mở file build.gradle (Module app) và paste dòng dưới đây vào trong dependencies
1 |
compile 'com.android.support:cardview-v7:24.2.1' |
Vậy là bây giờ chúng ta có thể sử dụng CardView giống như Button hay TextView
Ví dụ sử dụng RecyclerView với CardView
Để ví dụ cách sử dụng CardView mình sẽ làm một demo có sử dụng RecyclerView với CardView để hiển thị danh sách các bài hát Karaoke.
Cũng giống như CardView thì đối với RecyclerView chúng ta cũng phải cài đặt thư viện trong dependencies với dòng dưới đây
1 |
compile 'com.android.support:recyclerview-v7:24.2.1' |
Và đây là toàn bộ file build.gradle của mình
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.2" defaultConfig { applicationId "com.eitguide.cardviewdemo" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:cardview-v7:24.2.1' compile 'com.android.support:recyclerview-v7:24.2.1' } |
Mình thực hiện lại ví dụ đã làm trong bài Sử dụng RecyclerView nhưng ở bài viết này mình sẽ thiết kế row có sử dụng CardView
Bước 1: Tạo model để chứa data
Class Song đại diện cho 1 bài hát gồm các thông tin:
- mCode: Mã số bài hát
- mTitle: Tên bài hát
- mLyric: Lyric của bài hát.
- mAstist: Tên ca sĩ
File Song.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
package com.eitguide.cardviewdemo; /** * Created by nguyennghia on 11/15/16. */ public class Song { private String mCode; private String mTitle; private String mLyric; private String mArtist; public Song() { } public Song(String code, String title, String lyric, String artist) { this.mCode = code; this.mTitle = title; this.mLyric = lyric; this.mArtist = artist; } public String getCode() { return mCode; } public String getTitle() { return mTitle; } public String getLyric() { return mLyric; } public String getArtist() { return mArtist; } public void setCode(String code) { this.mCode = code; } public void setTitle(String title) { this.mTitle = title; } public void setLyric(String lyric) { this.mLyric = lyric; } public void setArtist(String artist) { this.mArtist = artist; } } |
Bước 2: Thêm RecyclerView vào main_activity.xml
File main_activity.java
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.eitguide.cardviewdemo.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/rv_songs" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> |
Bước 3: Tạo giao diện cho một row
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" card_view:cardCornerRadius="8dp" card_view:cardElevation="8dp"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="3dp" android:paddingLeft="6dp" android:paddingRight="6dp" android:paddingTop="3dp"> <FrameLayout android:id="@+id/fl_code" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_centerVertical="true"> <TextView android:id="@+id/tv_code" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#19b395" android:textSize="18dp" /> </FrameLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:layout_toRightOf="@+id/fl_code" android:orientation="vertical"> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:textColor="#2c3e50" android:textSize="16dp" android:textStyle="bold" /> <TextView android:id="@+id/tv_lyric" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:textColor="#34495e" android:textSize="14dp" /> <TextView android:id="@+id/tv_artist" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#7f8c8d" android:textSize="14dp" /> </LinearLayout> </RelativeLayout> </android.support.v7.widget.CardView> |
Thay vì sử dụng các ViewGroup khác thì ở đây mình sử dụng CardView. Một số thuộc tính sử dụng với CardView mình sẽ nói ở phần dưới.
Bước 4: Tạo Custom Adapter và bind dữ liệu cho từng row trong Adapter
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
package com.eitguide.cardviewdemo; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.List; /** * Created by nguyennghia on 11/15/16. */ public class SongAdapter extends RecyclerView.Adapter<SongAdapter.SongViewHolder> { private static final String TAG = "SongAdapter"; private List<Song> mSongs; private Context mContext; private LayoutInflater mLayoutInflater; public SongAdapter(Context context, List<Song> datas) { mContext = context; mSongs = datas; mLayoutInflater = LayoutInflater.from(context); } @Override public SongViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { //inflate view from row_item_song.xml View itemView = mLayoutInflater.inflate(R.layout.row_item_song, parent, false); return new SongViewHolder(itemView); } @Override public void onBindViewHolder(SongViewHolder holder, int position) { //get song in mSong via position Song song = mSongs.get(position); //bind data to viewholder holder.tvCode.setText(song.getCode()); holder.tvTitle.setText(song.getTitle()); holder.tvLyric.setText(song.getLyric()); holder.tvArtist.setText(song.getArtist()); } @Override public int getItemCount() { return mSongs.size(); } class SongViewHolder extends RecyclerView.ViewHolder { private TextView tvCode; private TextView tvTitle; private TextView tvLyric; private TextView tvArtist; public SongViewHolder(View itemView) { super(itemView); tvCode = (TextView) itemView.findViewById(R.id.tv_code); tvTitle = (TextView) itemView.findViewById(R.id.tv_title); tvLyric = (TextView) itemView.findViewById(R.id.tv_lyric); tvArtist = (TextView) itemView.findViewById(R.id.tv_artist); } } } |
Bước 5: Setup RecyclerView trong MainActivity.java
Không giống như ListView chúng ta chỉ cần set Adapter cho ListView là đủ nhưng đối với RecyclerView chúng ta phải set 2 thành phần bắt buộc dưới đây:
+ set adapter cho RecyclerView sử dụng phương thức setAdapter
+ set layout manager để chỉ ra chúng ta muốn layout các item như thế nào (vertical, horizotal, grid, staggered grid) bằng cách sử dụng phương thức setLayoutManager.
Source file MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
package com.eitguide.cardviewdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private RecyclerView rvSongs; private SongAdapter mSongAdapter; private List<Song> mSongs; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); rvSongs = (RecyclerView)findViewById(R.id.rv_songs); //create song data mSongs = new ArrayList<>(); mSongs.add(new Song("60696", "NẾU EM CÒN TỒN TẠI", "Khi anh bắt đầu một tình yêu Là lúc anh tự thay", "Trịnh Đình Quang")); mSongs.add(new Song("60701", "NGỐC", "Có rất nhiều những câu chuyện Em dấu riêng mình em biết", "Khắc Việt")); mSongs.add(new Song("60650", "HÃY TIN ANH LẦN NỮA", "Dẫu cho ta đã sai khi ở bên nhau Cô yêu thương", "Thiên Dũng")); mSongs.add(new Song("60610", "CHUỖI NGÀY VẮNG EM", "Từ khi em bước ra đi cõi lòng anh ngập tràng bao", "Duy Cường")); mSongs.add(new Song("60656", "KHI NGƯỜI MÌNH YÊU KHÓC", "Nước mắt em đang rơi trên những ngón tay Nước mắt em", "Phạm Mạnh Quỳnh")); mSongs.add(new Song("60685", "MỞ", "Anh mơ gặp em anh mơ được ôm anh mơ được gần", "Trịnh Thăng Bình")); mSongs.add(new Song("60752", "TÌNH YÊU CHẮP VÁ", "Muốn đi xa nơi yêu thương mình từng có Để không nghe", "Mr. Siro")); mSongs.add(new Song("60608", "CHỜ NGÀY MƯA TAN", "Một ngày mưa và em khuất xa nơi anh bóng dáng cứ", "Trung Đức")); mSongs.add(new Song("60603", "CÂU HỎI EM CHƯA TRẢ LỜI", "Cần nơi em một lời giải thích thật lòng Đừng lặng im", "Yuki Huy Nam")); mSongs.add(new Song("60720", "QUA ĐI LẶNG LẼ", "Đôi khi đến với nhau yêu thương chẳng được lâu nhưng khi", "Phan Mạnh Quỳnh")); mSongs.add(new Song("60856", "QUÊN ANH LÀ ĐIỀU EM KHÔNG THỂ - REMIX", "Cần thêm bao lâu để em quên đi niềm đâu Cần thêm", "Thiện Ngôn")); mSongAdapter = new SongAdapter(this, mSongs); rvSongs.setAdapter(mSongAdapter); //RecyclerView scroll vertical LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false); rvSongs.setLayoutManager(linearLayoutManager); } } |
Chạy thử ứng dụng và xem kết quả
Chúng ta thấy sử dụng CardView trong thiết kế rất đẹp đúng không nào. Và tiếp theo mình sẽ đề cập đến các thuộc tính mà chúng ta thường sử dụng với CarView
Một số thuộc tính thường dùng với CardView
Nhìn qua đoạn mã thiết kế row ở trên
1 2 3 4 5 6 7 8 9 10 11 |
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:background="#2ecc71" card_view:cardCornerRadius="8dp" card_view:cardBackgroundColor="#2ecc71" card_view:cardElevation="8dp"> |
Có ba thuộc tính mà chúng ta quan tâm đó là
1 |
card_view:cardCornerRadius |
Xác định “mức độ bo trò” của CardView
1 |
card_view:cardBackgroundColor |
Với CardView chúng không không thể set background qua thuộc tính background như những view bình thường khác mà phải set thông qua thuộc tính này
1 |
card_view:cardElevation |
Thuộc tính này xác định “mức độ đổ bóng (shadow) cho cardView
Ngoài các set những thuộc tính này trong XML thì chúng ta cũng có thể set chúng trong Java Code như sau
1 2 3 4 |
CardView card = ... card.setCardBackgroundColor(Color.parseColor("#E6E6E6")); card.setMaxCardElevation(0.0); card.setRadius(5.0); |
sự kiện vào mỗi Item trong RecyclerView là gì vậy bạn
Bạn có thể sử dụng phương thức setOnClickListener cho itemView của ViewHolder.
cho hoi lam sao cho cot so thu tu no co the tu dong tang dk vay
thank
cho e hoi cho buoc 3 la minh tao mot man hinh moi hay la trong File main_activity.java
lun vay
Đó là file .xml mới nha bạn. Ở đây mình đặt tên cho file này là row_item_song.xml. File này là layout của một row đó bạn.
hen chi
Bạn ơi, bạn có thể hướng dẫn cho mình làm sao để ban đầu mình chỉ cho hiện tên bài hát, sau khi click vào item thì mới show Lyrics và tên ca sĩ được không?
Ngoài ra khi click vào 1 bài hát khác thì Lyrics và tên ca sĩ của bài trước lại ẩn đi nữa