Day 26 : CardLibs

Day 26 : CardLibs Cover Image

สวัสดีครับ บทความนี้เป็นบทความที่ 26 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

สำหรับวันนี้ขอนำเสนอเรื่อง Cardslib เป็น Library ที่เอาไว้ปรับแต่งหน้า UI ของเราให้มีลักษณะแบบ Card มีทั้งแบบ Card, แบบ List, Grid หรือ staggered grid ตัวอย่างก็ประมาณนี้

Screen Screen

Installation

ขั้นตอนการติดตั้ง เปิดไฟล์ build.gradle ขึ้นมา แล้วเพิ่ม dependencies ลงไปดังนี้

dependencies {
    compile 'com.github.gabrielemariotti.cards:library:1.8.0'
}

กด Sync Gradle เป็นอันเรียบร้อย

Usage

Card

การสร้าง Card มีส่วนที่จำเป็น 2 อย่างครับ คือ

  • Card : เปรียบเสมือน View ตัวหนึ่ง ที่เอาไว้แสดงข้อมูลภายใน Card ของเรา
  • CardView : อันนี้เปรียบเสมือน ViewGroup เ่ช่นพวก LinearLayout, RelativeLayout

การใช้งาน Card ทำได้โดยเริ่มแรก ประกาศ CardView ไว้ที่ไฟล์ xml ก่อน ดังนี้

<it.gmariotti.cardslib.library.view.CardView
            android:id="@+id/card"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:layout_marginTop="12dp"/>

ต่อมาภายในคลาส Java ทำการ binding CardView จากนั้น ก็ setCard() โดยใช้ Card ที่สร้างขึ้น ดังนี้

CardView cardView = (CardView) getActivity().findViewById(R.id.card);

Card card = new Card(this); // this คือ Context
cardView.setCard(card);

Card1

เรายังสามารถ setTitle() , setHeader() ให้กับ Card ได้ครับ เช่น

CardHeader cardHeader = new CardHeader(this);
cardHeader.setTitle("This is header");

card.setTitle("This is Title of Card");
card.addCardHeader(cardHeader);

Card2

ส่วนวิธีการใส่ content เข้าไปใน Card ทำได้โดยการประกาศ Layout ขึ้นมาไฟล์นึง สมมติผมสร้างไฟล์ xml ขึ้นมาใหม่ ชื่อ list_item_card.xml ข้างในมี ImageView และ TextView ดังนี้

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:padding="16dp"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <ImageView
            android:id="@+id/image"
            android:background="@drawable/guitar"
            android:scaleType="center"
            android:layout_width="128dp"
            android:layout_height="90dp"
            android:layout_alignParentTop="true"/>

        <TextView
            android:layout_toRightOf="@id/image"
            android:id="@+id/title"
            android:layout_centerInParent="true"
            android:text="@string/app_name"
            android:layout_marginLeft="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
</RelativeLayout>

จากนั้น Card ทำการสร้าง โดยส่ง id คือ Layout ที่เพิ่งสร้าง เช่น

Card card = new Card(this, R.layout.day26_list_item_cards);

Card3

Custom Card

ทีนี้ถ้าอยากจะทำการแก้ไข Layout ภายใน Card ทำยังไง? ก็ต้องสร้าง Custom Card ของเราขึ้นมาเองครับ โดยทำการ extends Card แล้วแก้ไขที่เมธอด setupInnerViewElements แบบนี้

package com.devahoy.learn30androidlibraries.day26;

import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.devahoy.learn30androidlibraries.R;

import it.gmariotti.cardslib.library.internal.Card;


public class MyCard extends Card {

    public MyCard(Context context) {
        super(context, R.layout.list_item_card);
    }

    public MyCard(Context context, int innerLayout) {
        super(context, innerLayout);
    }

    @Override
    public void setupInnerViewElements(ViewGroup parent, View view) {

        TextView title = (TextView) view.findViewById(R.id.title);
        title.setText("Lorem ipsum, This is a book!!");
    }
}

ด้านบนเป็นการสร้างคลาสชื่อว่า MyCard ต้องมี default Constructor 2 ตัวนะครับ เอาไว้สร้างออปเจ็ค 2 แบบ เหมือนตอนสร้าง new Card(Context) และ new Card(Context, Layout) ส่วนเมธอด setupInnerViewElements ก็ทำการหา View โดย ชื่อ title มันก็คือ TextView ที่ประกาศไว้ในไฟล์ `listitemcard.xml จากนั้นก็เปลี่ยน Text มันใหม่ครับ

Card4

CardList

CardList คือ Card ที่เรียงกันเป็น List เหมือนอย่าง ListView ส่วนที่จำเป็นในการสร้าง CardList คือ

  • CardArrayAdapter : เป็น Adapter ที่เอาไว้กำหนด data และ Layout
  • CardListView : เป็นเหมือน Custom ListView คุณสมบัติเหมือนกับ ListView

การใช้งาน ก็สร้างไฟล์ขึ้นมา 1 ไฟล์ กำหนด CardListView ลงไป เช่น

<it.gmariotti.cardslib.library.view.CardListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/card_list"/>

ส่วนภายในคลาส Java ก็สร้างดังนี้

ArrayList<Card> cards = new ArrayList<Card>();

for (int i = 0; i < 5; i++) {
    Card c = new Card(this);
    c.setTitle("Title #" + i);
    cards.add(c);
}

CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(this,cards);

CardListView listView = (CardListView) findViewById(R.id.card_list);
if (listView!=null){
    listView.setAdapter(mCardArrayAdapter);
}

ผลลัพธ์

CardList

Example

ตัวอย่าง Example อื่นๆ ของ Cardslib นะครับ อันนี้ผมยกมาจาก Docs ต้นฉบับเลย

  • Google Map

Google Map

  • Google Now Stock Card

Stock

  • Google Play CardList

CardList

  • Google Play Grid

Grid

สรุป

Cardslib เป็น Library ที่น่าใช้มากๆครับ สามารถปรับแต่งได้หลากหลาย ในบทความนี้ผมยกตัวอย่างคร่าวๆครับ ทำหมดคงจะไม่ไหว เพราะมันเยอะมาก อีกอย่าง ก็เพิ่งลองใช้ได้ไม่กี่ฟังค์ชั่นเอง หากใครสนใจก็ลองอ่านใน Docs เพิ่มเติมครับ มีทั้งตัวอย่าง คำอธิบาย รูปภาพ เจ้าของ Library ทำไว้ค่อนข้างดีมากครับ

Reference

Chai Chai Phonbopit : Web Developer @Nimbl3 • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด