안드로이드 시퀀스 레이아웃(Sequence Layout) 사용법 완벽 가이드

안드로이드 시퀀스 레이아웃을 본격적으로 다루기 전에, 시퀀스 레이아웃이 무엇인지 먼저 이해할 필요가 있습니다. 시퀀스 레이아웃은 여러 단계(step)를 순서대로 보여주는 UI 컴포넌트로, 각 단계의 진행 상황을 애니메이션 진행 표시줄(progress bar)과 함께 시각적으로 표현해 줍니다.

이 글에서는 안드로이드에서 시퀀스 레이아웃을 실제로 구현하는 방법을 단계별로 살펴보겠습니다.

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

위 코드에서 핵심은 com.github.transferwise:sequence-layout:1.0.7 의존성입니다. 이 라이브러리가 시퀀스 레이아웃의 핵심 기능을 제공합니다.

3단계: build.gradle(project)에 저장소 추가

프로젝트 수준의 build.gradle 파일을 열어 JitPack 저장소를 추가합니다. TransferWise 라이브러리는 JitPack을 통해 배포되기 때문에 이 설정이 반드시 필요합니다.

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
}

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>

위 XML에서는 SequenceLayout을 부모 레이아웃으로 선언하고, 그 안에 개별 단계를 나타내는 SequenceStep들을 추가했습니다. 각 단계는 앵커(anchor), 제목(title), 부제목(subtitle) 세 가지 요소로 구성됩니다.

• anchor: 단계 옆에 표시되는 날짜나 라벨 (예: "30 Nov", "Today")
• title: 해당 단계의 제목
• subtitle: 단계에 대한 상세 설명 텍스트

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

위 코드에서는 세 개의 시퀀스 스텝을 선언하고 각각 클릭 리스너(OnClickListener)를 등록했습니다. 특정 단계를 활성화하려면 아래 코드처럼 setActive() 메서드를 사용하면 됩니다.

sequenceStep2.setActive(true);

여기서 두 번째 스텝을 활성 상태로 설정했는데, 이는 진행 표시줄이 두 번째 단계까지 표시된다는 의미입니다.

실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터와 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션 목록에서 모바일 기기를 선택하면, 기기 화면에 아래와 같은 결과가 표시됩니다.

위 예제에서 볼 수 있듯이, 두 번째 단계를 활성 모드로 선언했기 때문에 해당 지점까지 진행 표시줄이 애니메이션과 함께 나타나는 것을 확인할 수 있습니다. 이처럼 시퀀스 레이아웃을 활용하면 주문 진행 상황, 배송 추적, 온보딩 과정 같은 단계 기반 UI를 손쉽게 구현할 수 있습니다.