Help us understand the problem. What is going on with this article?

すごいぞTapTargetView

More than 1 year has passed since last update.

TapTargetViewって何?

こんな感じにAndroidアプリの機能やボタン説明をおしゃれに紹介できるライブラリです。(配布元より転載)
video.gif

これによって、何の機能が、どのボタンを押せば利用出来るか、ユーザーが直感的に理解できます。

以下のGitHubリポジトリで配布中

https://github.com/KeepSafe/TapTargetView

導入方法

app配下のbuild.gradleに以下の定義を追加するだけです。簡単。

build.gradle
   repositories { 
        jcenter()
   }

   dependencies {
         implementation 'com.getkeepsafe.taptargetview:taptargetview:1.12.0'
   }

使い方

私が作成したSUBWAYシミュレーター(サブウェイのサンドウィッチレシピを作って保存するアプリ)でも、初回起動時にこのTapTargetViewを使ったチュートリアルを実装してます。
今回はそのコードを見てみましょう。(言語はKotlinです)

MainActivity.kt
//シーケンスに実行したい場合はTapTargetSequenceを使用
val sequence = TapTargetSequence(this) //Activityの指定(今いるActivityならthis)
        .targets(
                TapTarget.forView(findViewById<View>(R.id.create), "まずはこちらのボタンを押してレシピを作成しましょう!") //Target対象のView(第一引数)とタイトルテキスト(第二引数)を入力
                        //以下オプション
                        .outerCircleColor(R.color.colorPrimary) //外円の色
                        .titleTextColor(android.R.color.white) //タイトルテキストの色
                        .drawShadow(true) //影の有無
                        .outerCircleAlpha(0.97f) //外円の透過度
                        .cancelable(false) //外円の外を押したらキャンセルできるかどうかの指定
                        .tintTarget(false) //Target Viewに色をつけるかどうかの指定
                        .id(1), //シーケンスID(順序性の指定)
                TapTarget.forToolbarOverflow(toolbar, "操作方法を忘れた場合はこちらをクリック!", "もう一度チュートリアルを見ることができます。") //第三引数は説明テキスト
                        .outerCircleColor(R.color.colorAccent)
                        .titleTextColor(android.R.color.white)
                        .descriptionTextColor(android.R.color.white) //説明テキストの色指定
                        .descriptionTextAlpha(1.0f) //説明テキストの透過度指定
                        .drawShadow(true)
                        .outerCircleAlpha(0.97f)
                        .cancelable(true)
                        .id(2)
         )
sequence.start() //実行

上記以外のオプションもあり、配布元で確認できます。

実行すると…

こんな感じ↓
subway.gif

終わりに

手軽にスタイリッシュ感が出るので、興味のある方は試してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした