Đang thực hiện
Tên đăng nhập
Mật khẩu
 
Hoặc đăng nhập bằng:
Nhập lại mật khẩu

Trang chủ Cẩm nang học viên
Cẩm nang học viên

Tạo bố cục Card-Based trong ứng dụng Android

Cập nhật: 28/08/2018 Lượt xem: 154
Theo phong cách thiết kế dạng phẳng Material Design từ Android 5.x thì việc phân bố theo lớp (layer) mang lại trải nghiệm tốt hơn cho người dùng. Android cung cấp một container gọi là CardView cho phép thực hiện yêu cầu trên một cách dễ dàng.
Dữ liệu hiển thị trong các mục của danh sách có bố cục tương tự nhau, trong một số trường hợp ứng dụng có nhu cầu hiển thị chúng dạng thẻ (card).

Điều này có nghĩa là các mục sẽ có hiệu ứng thị giác nổi lên so với bề mặt gốc (đổ bóng). Theo phong cách thiết kế dạng phẳng Material Design từ Android 5.x thì việc phân bố theo lớp (layer) mang lại trải nghiệm tốt hơn cho người dùng. Android cung cấp một container gọi là CardView cho phép thực hiện yêu cầu trên một cách dễ dàng.

>> Học lập trình Android

 
tao-bo-cuc-card-based-card-view

Ví dụ về CardView
 
Để bắt đầu sử dụng, chúng ta cần thêm thư viện:
 
dependencies {
    implementation 'com.android.support:cardview-v7:27.1.1'
 


Tiếp đó thêm nó lên trên layout và vẽ các thành phần view bạn muốn, ví dụ:

 
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"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="10dp">
 
   <android.support.v7.widget.CardView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:cardCornerRadius="10dp"
       app:cardElevation="100dp">
 
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
 
           <ImageView
               android:id="@+id/itemImage"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:adjustViewBounds="true"
               android:src="@drawable/tour1" />
 
           <TextView
               android:id="@+id/item_txtTitle"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Du lịch Phong Nha"
               android:textStyle="bold" />
 
           <TextView
               android:id="@+id/item_txtDesc"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="Dãy núi hùng vĩ.
Khung cảnh thiên nhiên vượt trội.
Người dân tộc làm đầy không khí với các truyền thống khác nhau của họ và trang phục đầy màu sắc." />
 
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="horizontal">
 
               <Button
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Đặt ngay" />
 
               <Button
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Thích" />
           LinearLayout>
       LinearLayout>
   android.support.v7.widget.CardView>
LinearLayout>

 
 
tao-bo-cuc-card-based-1

Code Activity:
 
import android.content.Context;
import android.media.Image;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
 
import java.util.ArrayList;
import java.util.List;
 
public class DemoCardViewActivity extends AppCompatActivity {
 
   // Mảng các tour du lịch
   ArrayList mLstTour = new ArrayList<>();
 
   private void fakeData() {
       mLstTour.add(new Tour(R.drawable.tour1, "Du lịch Cao Bằng"));
       mLstTour.add(new Tour(R.drawable.tour2, "Khám phá hang Phong Nha"));
       mLstTour.add(new Tour(R.drawable.tour3, "Hành trình đất tổ"));
       mLstTour.add(new Tour(R.drawable.tour4, "Mùa vàng cao nguyên"));
       mLstTour.add(new Tour(R.drawable.tour5, "Maldiver Việt Nam"));
       mLstTour.add(new Tour(R.drawable.tour2, "Biển gọi tên em"));
       mLstTour.add(new Tour(R.drawable.tour4, "Khám phá miền Trung"));
   }
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_demo_card_view);
 
       fakeData();
 
       ListView lstView = (ListView) findViewById(R.id.listview);
       AdapterTour adapter = new AdapterTour(this, R.layout.item_tour, mLstTour);
       lstView.setAdapter(adapter);
   }
 
 
   /**
    * Lớp Tour du lịch
    * Lớp Tour du lịch
    */
   private class Tour {
       int imageRes;
       String infor;
 
       public Tour(int imageRes, String infor) {
           this.imageRes = imageRes;
           this.infor = infor;
       }
   }
 
   private class AdapterTour extends ArrayAdapter {
       Context mContext;
       ArrayList mList;
       int mRes;
 
       public AdapterTour(@NonNull Context context, int resource, ArrayList mList) {
           super(context, resource, mList);
           this.mContext = context;
           this.mList = mList;
           this.mRes = resource;
       }
 
       @NonNull
       @Override
       public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
           View row = convertView;
           if (row == null) {
               LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
               row = inflater.inflate(mRes, null);
           }
 
           ImageView image = (ImageView) row.findViewById(R.id.itemImage);
           TextView title = (TextView) row.findViewById(R.id.item_txtTitle);
 
           image.setImageResource(mList.get(position).imageRes);
           title.setText(mList.get(position).infor);
 
           return row;
       }
   }
}
 


Kết quả:

tao-bo-cuc-card-based-2
 

 
CardView có một số thuộc tính:


1. card_view: cardElevation: điều chỉnh độ cao (đổ bóng)
2. card_view: cardCornerRadius: góc bo của card
3. card_view: cardBackgroundColor: màu nền của card
MinhVT
Các bài viết liên quan
Tư vấn viên 1: Lê Thoa
Tư vấn viên 2: Thu Huyền
Tuyển sinh lập trình viên quốc tế - MMS new vision
Khóa học C&B Excel - Trần Văn Hải