LoginSignup
6
3

More than 5 years have passed since last update.

Androidでチュートリアル表示用のライブラリを作ってみました。

Posted at

以前こちら Androidライブラリを作って公開する - Qiita で登録したライブラリについてです。
ライブラリ自体はちょっと前にできあがってたんですが、アップしたり使い方まとめたりが面倒で放置していました。Androidのチュートリアル用ライブラリって中々いいのが無いんですよね。だったら作っちゃえと。
GitHubはこちらです。

弊社のアプリに作ったものをライブラリ用に作り直したものになります。

kotlin製ですが、もちろんjavaでも使えます。

肝心のライブラリについて

こんなやつです。

sample_tutorial.gif

作るにあたって気をつけたこと

完ぺきにできている!とは口が裂けても言えませんが、以下のことに気をつけて作りました。

  • ライブラリの依存関係を少なくする
  • 簡単に表示できる

・ライブラリの依存関係を少なくする

最近ライブラリの一斉アップデートをかけたがために、弊社アプリではたくさんの依存関係のエラーが起きました。しかもエラーの内容がわかりづらいんですよね。それでなんど環境を破壊しようと思ったことか。
結果 exclude module: hogehoge の嵐になりました。

そういうことを踏まえてこのライブラリは以下のような依存関係になっています。

build.gradle
dependencies {
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

}

・なるべく簡単に表示できるようにする。

チュートリアルの生成タイミングを気にしなくていいように対象のViewが描画完了した後にチュートリアルを出すようにしています。

ビルダーパターンで表示用の値を設定できるようにしています。

まだ設定に必須のプロパティなどを統合できてなかったり問題はありますが、、。

使い方

簡単に使うなら

  • dependenciesに以下を追加してください
build.gradle
dependencies {
    implementation 'jp.studio.edamame:balloontutorial:0.2.2'
}
  • 実装はこんな感じ
TutorialBuilder.init(activituy, target = binding.buttonTutorialCircle)
        .holeType(TutorialBuilder.HoleType.CIRCLE)
        .radiusOfDp(50f)
        .descriptionByString("Circle type")
        .buildAndLayout() // 描画

こんな形で値を設定していただければ使えます。

詳細設定

ビルダーを初期化

TutorialBuilder.init(activituy, target = targetView)

.init(activity, targetView) で初期化します。

対象ハイライトする形を指定する

.holeType(type: TutorialBuilder.HoleType)
  • 四角形
.holeType(TutorialBuilder.HoleType.SQUARE)
  • 円形
.holeType(TutorialBuilder.HoleType.CIRCLE)
.radiusOfDp(50f) // 円形の場合は半径を指定する(dp)

吹き出しを設定

.descriptionByString("説明が入ります") // 吹き出しの文字
.textColor(@ColorInt color: Int) // 文字色
.balloonColor(@ColorInt color: Int) // 吹き出しの色

タップの動作を指定

.onClickedOutSide { } // ターゲットの外側をタップされたとき
.onClickedTarget { } // ターゲットをタップされたとき

アニメーションの時間を指定

  • msecで指定
.durationForBaseAnimation(150) // 背景の表示
.durationForHoleAnimation(300) // ハイライトの表示
.durationForBalloonTextAnimation(200) // 吹き出し

おわり

いずれ連続でチュートリアル出せるような仕組み追加しようかなと考えてます。
以上です。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3