Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@hammer0802

すごいぞTapTargetView

More than 1 year has passed since last update.

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

終わりに

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

5
Help us understand the problem. What is going on with this article?
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
hammer0802
メインフレーム→Androidエンジニアになったアラサーです 最近はFlutterに興味あり
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?