Android
library
android開発
紹介


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


終わりに

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