【Android】CoachMark_Spotlightライブラリにバージョンアップしました。

2020年9月28日 01:26

動機

implementation("com.github.takusemba:spotlight:1.8.0")

以前、チュートリアルを実現するためにspotlightライブラリーを適用したことがあります。しかし適用したバージョンが1.8.0でした。

最新バージョンの2.0.2に更新して変更部分について勉強しました

始めましょう

1.app/build.gradle.ktsに

 implementation("com.github.takusemba:spotlight:2.0.2")

変更します。

2. Fragment

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  // coachMark
       if (!viewModel.isCheckedCoachMark) {
           startCoachMark()
       }
}

private fun startCoachMark() {
      useBinding { binding ->
           binding.root.doOnPreDraw {
               val targets = ArrayList<Target>()
               val layouts = ArrayList<View>()

               val firstLayout = layoutInflater.inflate(R.layout.layout_target, FrameLayout(requireContext()))
               targets.add(setTargetLocation(binding.appBarLogo, firstLayout, "logoはlogoです", 200f))
               layouts.add(firstLayout)

               val secondLayout = layoutInflater.inflate(R.layout.layout_target, FrameLayout(requireContext()))
               targets.add(setTargetLocation(binding.appBarNotification, secondLayout, "notificationはnotificationです", 100f))
               layouts.add(secondLayout)

               val thirdLayout = layoutInflater.inflate(R.layout.layout_target, FrameLayout(requireContext()))
               targets.add(setTargetLocation(binding.homeRecyclerView, thirdLayout, "listはlistです", 600f))
               layouts.add(thirdLayout)

               showCoachMark(targets, layouts)
           }
  }

以前のようにonViewCreatedの最後にコーチマークが実行されるようにしました。しかし、sharedPreferencesでコーチマークを確認したかチェックし、コーチマークを前に確認していたら実行できなくしました。

一つ一つFrameLayoutを追加し、ここにlayoutを設定します。
このlayoutに説明するテキストと次のターゲットに渡すボタンを追加して表示されます。

3. setTargetLocation

// targetRadius = 円の大きさ
   private fun setTargetLocation(
       view: View,
       coachMarkLayout: View,
       description: String,
       targetRadius: Float
   ): Target {
       val targetLocation = IntArray(2)
       view.getLocationInWindow(targetLocation)
       coachMarkLayout.custom_text.text = description
       
       // 注目されたいところを設定する
       return Target.Builder()
           .setAnchor(view)
           .setShape(Circle(targetRadius))
           // 説明する部分の位置
           .setOverlay(coachMarkLayout)
           .setOnTargetListener(object : OnTargetListener {
               override fun onStarted() {
                   // TODO
               }
               override fun onEnded() {
                   // TODO
               }
           })
           .build()
   }

以前と同じように説明する部分の位置とテキストの位置を設定し、これをTargetに変更します。
(以前のバージョンにはSimpleTargetがありましたが、これがTargetに変更されました。 )

位置決めなきゃいけなかったけど
setOverlay（coachMarkLayout）を通じてレイアウトをすぐに入れて位置を指定するように変更されました。

だから、setTitle ・ setDescription・ setOverlayPoint
も消え、xmlで設定します。

＋）各ターゲット開始時に終了時に何か対応できるように変更されました。

4. showCoachMark

// create spotlight
   private fun showCoachMark(targets: ArrayList<Target>, layouts: ArrayList<View>) {
       // コーチマークを作成
       val spotlight = Spotlight.Builder(requireActivity())
           // 注目されたいところ（複数指定も可能）
           .setTargets(targets)
           // コーチマーク表示される時の背景の色
           .setBackgroundColor(R.color.background)
           // 表示する時間
           .setDuration(1000L)
           // 表示するスピード
           .setAnimation(DecelerateInterpolator(2f))
           // コーチマーク表示される時になんかする
           .setOnSpotlightListener(object : OnSpotlightListener {
               override fun onStarted() {
                   Toast.makeText(requireContext(), "spotlight is started", Toast.LENGTH_SHORT).show()
               }
               override fun onEnded() {
                   viewModel.checkedCoachMark()
                   Toast.makeText(requireContext(), "spotlight is ended", Toast.LENGTH_SHORT).show()
               }
           })
           .build()
       spotlight.start()
       layouts.forEach {
           // TODO 背景をクリックして次のターゲットに移る
           it.close_target.setOnClickListener { spotlight.next() }
       }
   }

以前と同様に指定されたターゲットをリストにしてコーチマークを実行するメソッドです。

特別に変わった部分はないけど
.setClosedOnTouchedOutside(true) がなくなって
以前は説明する部分以外の背景をクリックすると次に進みましたが、こうした機能がなくなりました。

    layouts.forEach {
           it.close_target.setOnClickListener { spotlight.next() }
       }

その代わりにボタンを追加し、これをクリックすると次に進むように変更されました。

5 +) R.layout.layout_target

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >
   <TextView
       android:id="@+id/custom_text"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="30dp"
       android:textAlignment="center"
       android:textColor="@android:color/white"
       android:textSize="24dp"
       android:textStyle="bold"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       tools:text="this is a custom text"
       />

   <Button
       android:id="@+id/close_target"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginBottom="100dp"
       android:layout_marginEnd="16dp"
       android:layout_marginStart="16dp"
       android:text="Next Target"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       />
</androidx.constraintlayout.widget.ConstraintLayout>

6. 困っていること

説明したい画面のView位置の下に説明テキストの位置を表示したいのですが、上のlayoutのテキスト（View）にsetWidth・setHightを再設定しなければならないようですが、うまくいきません。