【Android】シーケンスレイアウト（SequenceLayout）の使い方を徹底解説

Androidアプリ開発では、タスクの進行状況や作業の手順を視覚的に分かりやすく伝えたい場面が多くあります。本記事では、TransferWise社が公開している「Sequence Layout」ライブラリを使用して、ステップ形式のタイムラインをアニメーション付きプログレスバーとともに表示する方法を、実際のサンプルコード付きで解説します。

シーケンスレイアウト（SequenceLayout）とは

シーケンスレイアウトとは、複数のステップを順番に縦方向へ並べ、現在の進行位置までをアニメーションするプログレスバーで表現できるAndroid用のUIコンポーネントです。各ステップには「anchor（日付などのラベル）」「title（タイトル）」「subtitle（説明文）」を持たせることができ、注文履歴や配送状況のトラッキング、チュートリアルの進捗表示など、さまざまな場面で活用できます。

実装手順

ステップ1：新規プロジェクトを作成する

まず、Android Studioを起動し、「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成してください。

ステップ2：build.gradle（app）に依存関係を追加する

モジュールレベルのbuild.gradleファイルを開き、シーケンスレイアウトライブラリの依存関係を追加します。

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'
}

ポイントは implementation 'com.github.transferwise:sequence-layout:1.0.7' の1行です。これによりシーケンスレイアウトがプロジェクト内で利用可能になります。

ステップ3：build.gradle（プロジェクト）にリポジトリを追加する

シーケンスレイアウトはJitPack経由で配布されているため、プロジェクトレベルのbuild.gradleにもJitPackリポジトリを登録しておきます。

// Top-level build file where you can add configuration options common to all sub-projects/modules.
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
}

allprojectsブロック内の maven { url "https://jitpack.io" } の記述を忘れないようにしましょう。ここが抜けているとライブラリを取得できず、ビルドエラーになります。

ステップ4：activity_main.xml にレイアウトを定義する

次に、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>

この例では、親レイアウトとしてSequenceLayoutを宣言し、その中に個々のステップであるSequenceStepを3つ配置しています。各ステップは「anchor（日付ラベル）」「title（タイトル）」「subtitle（サブタイトル）」の3要素で構成されており、anchorを指定しないステップも問題なく表示されます。

ステップ5：MainActivity.java に処理を実装する

続いて、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;
      }
   }
}

上記のコードでは、XMLで定義した3つのシーケンスステップをfindViewById()で取得し、クリックリスナーを設定しています。ステップをタップすると、対応するToastメッセージが画面に表示される仕組みです。

ステップをアクティブにする方法

特定のステップまで進捗を表示させたい場合は、以下のメソッドを呼び出します。

sequenceStep2.setActive(true);

このコードにより、2番目のステップがアクティブ状態となり、先頭のステップから2番目のステップまでプログレスバーがアニメーション表示されるようになります。

アプリを実行して動作を確認する

それでは、実際にアプリをビルドして実行してみましょう。Android端末をパソコンにUSB接続したうえで、Android Studioのツールバーにある「Run」アイコンをクリックします。デバイス選択ダイアログで接続した実機を選択すると、端末にアプリがインストールされ、下記のような画面が表示されます。

実行結果を見ると、コード内でアクティブモードとして指定した2番目のステップまで、プログレスバーが正しく描画されていることが確認できます。このように、シーケンスレイアウトを使えば、数行の実装だけで洗練されたステップ表示UIを作成できます。配送状況の追跡画面やオンボーディングフローなど、ぜひ自分のアプリにも取り入れてみてください。