すごいぞTapTargetView

Qiitaで記事書きました↓

https://qiita.com/hammer0802/items/b17afe4ee25bc3c3723b

Material Designな動きになります。

 

(2020/03/26)

Qiitaから持ってきました↓

--------------------------------------

 

 

TapTargetViewって何?


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

https://qiita-image-store.s3.amazonaws.com/0/292799/f56f541a-b9bc-4acf-bcde-b3ec3acdeb86.gif

 

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

 

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

 

github.com

 

導入方法


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

 

repositories {
jcenter()
}

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

 

使い方


私が作成したサブウェイのサンドウィッチレシピを作って保存するアプリでも、初回起動時にこのTapTargetViewを使ったチュートリアルを実装してます。

 

play.google.com


今回はそのコードを見てみましょう。(言語はKotlinです)


//シーケンスに実行したい場合は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() //実行

 

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

 

実行すると…


こんな感じ↓

https://qiita-image-store.s3.amazonaws.com/0/292799/169d47f5-4a7f-c9f7-afd2-7cfce4cc9c66.gif 



終わりに

 

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