Cách sử dụng Sequence Layout trên Android

Trước khi tìm hiểu về Sequence Layout trên Android, chúng ta cần biết Sequence Layout là gì. Sequence Layout chứa một chuỗi các bước với thanh tiến trình. Theo trình tự, nó tuân theo một thanh tiến trình được hoạt hình.

Ví dụ này minh họa cách sử dụng Android Sequence Layout.

Bước 1

Tạo một dự án mới trong Android Studio, vào File → New Project và điền đầy đủ thông tin cần thiết để tạo dự án mới.

Bước 2

Mở build.gradle(app) và thêm thư viện dependency design support.

apply plugin: 'com.android.application' android {    compileSdkVersion 28    defaultConfig {       applicationId "com.example.andy.myapplication"       minSdkVersion 19       targetSdkVersion 28       versionCode 1       versionName "1.0"       testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"    }    buildTypes {       release {          minifyEnabled false          proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'       }    } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' implementation 'com.github.transferwise:sequence-layout:1.0.7' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' }

Bước 3

Mở build.gradle(project) và thêm dependency design support library.

buildscript {    repositories {       google()       jcenter()    }    dependencies {       classpath 'com.android.tools.build:gradle:3.2.1'       // NOTE: Do not place your application dependencies here; they belong       // in the individual module build.gradle files    } } allprojects {    repositories {       google()       jcenter()       maven { url "https://jitpack.io" }    } } task clean(type: Delete) { delete rootProject.buildDir }

Bước 4

Thêm mã sau vào res/layout/activity_main.xml.

<?xml version="1.0" encoding="utf-8"?> <com.transferwise.sequencelayout.SequenceLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    xmlns:android="https://schemas.android.com/apk/res/android"    xmlns:app="https://schemas.android.com/apk/res-auto">    <com.transferwise.sequencelayout.SequenceStep       android:id="@+id/first"       android:layout_width="match_parent"       android:layout_height="wrap_content"       app:subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry.          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."       app:anchor="30 Nov"       app:title="First step"/>    <com.transferwise.sequencelayout.SequenceStep       android:id="@+id/second"       android:layout_width="match_parent"       android:layout_height="wrap_content"       app:subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry.          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."       app:title="Second step"/>    <com.transferwise.sequencelayout.SequenceStep       android:id="@+id/third"       android:layout_width="match_parent"       android:layout_height="wrap_content"       app:anchor="Today"       app:title="Third step"       app:subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry.          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s" /> </com.transferwise.sequencelayout.SequenceLayout>

Ở trên, chúng ta khai báo Sequence Layout làm layout cha và thêm Sequence Step làm các bước riêng lẻ. Mỗi bước chứa anchor view, title và subtitle.

Bước 5

Thêm mã sau vào src/MainActivity.java

package com.example.andy.myapplication; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Toast; import com.transferwise.sequencelayout.SequenceStep; public class MainActivity extends AppCompatActivity implements View.OnClickListener {    SequenceStep sequenceStep,sequenceStep2,sequenceStep3;    @Override    protected void onCreate(Bundle savedInstanceState) {       super.onCreate(savedInstanceState);       setContentView(R.layout.activity_main);       sequenceStep=findViewById(R.id.first);       sequenceStep2=findViewById(R.id.second);       sequenceStep3=findViewById(R.id.third);       sequenceStep2.setActive(true);       sequenceStep.setOnClickListener(this);       sequenceStep2.setOnClickListener(this);       sequenceStep3.setOnClickListener(this);    }    @Override    public void onClick(View v) {       switch (v.getId()) {          case R.id.first:             Toast.makeText(MainActivity.this,"This is first step",Toast.LENGTH_LONG).show();             break;          case R.id.second:             Toast.makeText(MainActivity.this,"This is second step",Toast.LENGTH_LONG).show();             break;          case R.id.third:             Toast.makeText(MainActivity.this,"This is Third step",Toast.LENGTH_LONG).show();             break; } } }

Trong mã trên, chúng ta khai báo các sequence step và gán OnClickListener. Để kích hoạt bước, sử dụng mã sau:

sequenceStep2.setActive(true);

Trong mã trên, chúng ta khai báo sequence2 là active nghĩa là thanh tiến trình sẽ hiển thị cho đến sequence step 2.

Hãy thử chạy ứng dụng. Giả sử bạn đã kết nối thiết bị Android thực tế với máy tính. Để chạy ứng dụng từ Android Studio, mở một file activity của dự án và nhấn biểu tượng Run từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn và kiểm tra thiết bị sẽ hiển thị màn hình mặc định:

Trong ví dụ trên, do chúng ta khai báo chế độ active, nó đã hiển thị thanh tiến trình.