MaterialStepperView は、Android アプリ開発向けに設計された Material Design 準拠のステップインジケーターコンポーネントです。ユーザー登録や注文確認、複雑なデータ収集など、多段階フォームのスムーズな操作体験を実現します。この軽量ライブラリを使うことで、専門的で使いやすいインターフェースを素早く導入できます。

MaterialStepperView の概要

MaterialStepperView は、Material Design ガイドラインに従った垂直方向のステップインジケーターを提供する Android 用ライブラリです。ステップの状態管理、カスタムビュー、滑らかな遷移アニメーションをサポートし、設計仕様に沿った多段階インタラクションを簡単に統合できます。

コアコードは library/src/main/java/moe/feng/common/stepperview/ に格納されており、主要なクラスとして VerticalStepperView と VerticalStepperItemView が含まれています。

導入手順

1. 依存関係の追加

プロジェクトをクローンしてから、ライブラリモジュールを Android Studio にインポートするか、settings.gradle に参照を追加します。

git clone https://gitcode.com/gh_mirrors/ma/MaterialStepperView

2. レイアウトの定義

XML レイアウトで VerticalStepperView を使用します。以下は demo/src/main/res/layout/fragment_vertical_stepper.xml の例です。

<moe.feng.common.stepperview.VerticalStepperView
    android:id="@+id/stepper_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:step_done_icon="@drawable/ic_done_white_16dp"/>

3. アダプターの実装

ViewBasedStepperAdapter を使って各ステップのコンテンツを管理します。demo/src/main/java/moe/feng/common/stepperview/demo/fragment/VerticalStepperDemoFragment.java を参考にしてください。

stepperView.setAdapter(new ViewBasedStepperAdapter() {
    @Override
    public int getCount() {
        return 3; // ステップ数
    }

    @Override
    public View onCreateView(int position, ViewGroup parent) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.vertical_stepper_sample_item, parent, false);
        return view;
    }
});

主要機能とカスタマイズ

ステップ状態の管理

MaterialStepperView は以下の状態をサポートします。

• 未完了（デフォルト）
• 進行中
• 完了
• エラー

コードで状態を変更する例：

stepperView.setStepState(position, StepState.COMPLETED);
stepperView.setStepState(position, StepState.ERROR);

スタイルのカスタマイズ

XML またはコードで外観を変更できます。

• ステップポイントの背景: library/src/main/res/drawable/stepper_point_background.xml
• 完了アイコン: library/src/main/res/drawable/ic_done_white_16dp.xml
• 警告アイコン: library/src/main/res/drawable/ic_warning_black_24dp.xml

イベントリスナー

ユーザー操作を検知するためのリスナーを設定します。

stepperView.setOnStepClickListener((stepperView, position) -> {
    return true;
});

stepperView.setOnStepOpenListener((stepperView, position) -> {
});

サンプルアプリ

Java と Kotlin の両方でサンプルが用意されています。

• Java: demo/src/main/java/moe/feng/common/stepperview/demo/MainActivity.java
• Kotlin: demo-kotlin/src/main/kotlin/moe/feng/common/stepperview/demo/MainActivity.kt

これらのサンプルでは、ステップナビゲーション、フォームバリデーション、状態管理の基本実装を確認できます。

実装のヒント

1. シンプルさを保つ: 各ステップには必要最低限の情報のみ表示し、ユーザーの負担を減らします。
2. フィードバックを明確に: 状態変化やアニメーションで進行状況を伝えます。
3. 横向き対応: タブレットなどでは library/src/main/res/values/dimens.xml の値を調整してください。
4. ダークモード対応: library/src/main/res/values/colors.xml の色定義を活用します。

MaterialStepperView は、カスタマイズ性の高いステップインジケーターを提供し、Material Design に沿った多段階フォームの構築を容易にします。登録画面や設定ウィザードなど、さまざまなシナリオで活用できるでしょう。