9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

すごいぞTapTargetView

Last updated at Posted at 2019-01-22

TapTargetViewって何?

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

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

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

導入方法

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

終わりに

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

9
6
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
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?