วิธีใช้ Sequence Layout บน Android

ภาพรวม

Sequence Layout เป็นไลบรารีจาก TransferWise ที่ช่วยสร้าง UI แสดงขั้นตอน (Step-by-step) พร้อมแถบความคืบหน้า (Progress Bar) แบบมีอนิเมชัน เหมาะสำหรับ流程 เช่น การชำระเงิน การสมัครสมาชิก หรือ Wizard ต่างๆ

การติดตั้ง

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: เพิ่ม Dependency ใน build.gradle (Module: app)

dependencies {
    // ... dependencies อื่นๆ
    implementation 'com.github.transferwise:sequence-layout:1.0.7'
}

ขั้นตอนที่ 3: เพิ่ม Repository ใน build.gradle (Project)

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" } // สำคัญ: ต้องเพิ่ม JitPack
    }
}

ขั้นตอนที่ 4: จัดรูปแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<com.transferwise.sequencelayout.SequenceLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.transferwise.sequencelayout.SequenceStep
        android:id="@+id/first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="ขั้นตอนที่ 1"
        app:subtitle="กรอกข้อมูลส่วนตัว"
        app:anchor="15 ม.ค." />

    <com.transferwise.sequencelayout.SequenceStep
        android:id="@+id/second"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="ขั้นตอนที่ 2"
        app:subtitle="ยืนยันอีเมลและเบอร์โทร"
        app:anchor="16 ม.ค." />

    <com.transferwise.sequencelayout.SequenceStep
        android:id="@+id/third"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="ขั้นตอนที่ 3"
        app:subtitle="เสร็จสิ้นการสมัคร"
        app:anchor="วันนี้" />

</com.transferwise.sequencelayout.SequenceLayout>

Attribute สำคัญ:

• app:title - หัวข้อหลักของขั้นตอน
• app:subtitle - รายละเอียดเพิ่มเติม
• app:anchor - วันที่/เวลาหรือสถานะ (แสดงด้านขวา)

ขั้นตอนที่ 5: เขียนโค้ด MainActivity.java

package com.example.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.transferwise.sequencelayout.SequenceStep;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private SequenceStep step1, step2, step3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        step1 = findViewById(R.id.first);
        step2 = findViewById(R.id.second);
        step3 = findViewById(R.id.third);

        // ตั้งค่าขั้นตอนที่ 2 เป็น active (แถบความคืบหน้าจะวิ่งถึงขั้นตอนนี้)
        step2.setActive(true);

        // เพิ่ม OnClickListener
        step1.setOnClickListener(this);
        step2.setOnClickListener(this);
        step3.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        String message = "";
        if (v.getId() == R.id.first) message = "กดที่ขั้นตอนที่ 1";
        else if (v.getId() == R.id.second) message = "กดที่ขั้นตอนที่ 2";
        else if (v.getId() == R.id.third) message = "กดที่ขั้นตอนที่ 3";
        
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
}

คำสั่งควบคุมสถานะ

• step.setActive(true) - ทำให้ขั้นตอนนั้น active (แถบความคืบหน้าสีเข้ม)
• step.setActive(false) - ทำให้ inactive (สีจาง)
• step.setCompleted(true) - ทำเครื่องหมายว่าเสร็จสิ้น (มีเครื่องหมายถูก)

การทดสอบ

รันแอปจะเห็น Sequence Layout แสดง 3 ขั้นตอนพร้อมแถบความคืบหน้าที่วิ่งถึงขั้นตอนที่ 2 (เพราะตั้งค่า step2.setActive(true))

ข้อดีของ Sequence Layout

• UI สวยงาม สมัยใหม่ พร้อมอนิเมชันนุ่มนวล
• ปรับแต่งสี ขนาด ฟอนต์ ได้ง่ายผ่าน XML attributes
• รองรับ RTL (Right-to-Left) อัตโนมัติ
• เบาgewicht ไม่ทำให้แอปหนัก