Spotlight

スポットライト

グラドル

dependencies {
    implementation ' com.github.takusemba:spotlight:x.x.x '
}

使用法

 val spotlight = Spotlight . Builder ( this )
    .setTargets(firstTarget, secondTarget, thirdTarget .. .)
    .setBackgroundColor( R .color.spotlightBackground)
    .setDuration( 1000L )
    .setAnimation( DecelerateInterpolator ( 2f ))
    .setContainer(viewGroup)
    .setOnSpotlightListener( object : OnSpotlightListener {
      override fun onStarted () {
        Toast .makeText( this @MainActivity, " spotlight is started " , Toast . LENGTH_SHORT ).show()
      }
      override fun onEnded () {
        Toast .makeText( this @MainActivity, " spotlight is ended " , Toast . LENGTH_SHORT ).show()
      }
    })
    .build()         

Spotlight をすぐに表示したい場合は、ビューがレイアウトされるまで待つ必要があります。

 // with core-ktx method.
view.doOnPreDraw { Spotlight . Builder ( this ) .. .start() }

ターゲット

Spotlight を追加するターゲットを作成します。

Target は、Spotlight によってキャストされるスポットです。 Spotlight には複数のターゲットを追加できます。

 val target = Target . Builder ()
    .setAnchor( 100f , 100f )
    .setShape( Circle ( 100f ))
    .setEffect( RippleEffect ( 100f , 200f , argb( 30 , 124 , 255 , 90 )))
    .setOverlay(layout)
    .setOnTargetListener( object : OnTargetListener {
      override fun onStarted () {
        makeText( this @MainActivity, " first target is started " , LENGTH_SHORT ).show()
      }
      override fun onEnded () {
        makeText( this @MainActivity, " first target is ended " , LENGTH_SHORT ).show()
      }
    })
    .build()

スポットライトの開始/終了

 val spotlight = Spotlight . Builder ( this ) .. .start()

spotlight.finish()

次へ/前へ/ターゲットを表示

 val spotlight = Spotlight . Builder ( this ) .. .start()

spotlight.next()

spotlight.previous()

spotlight.show( 2 )

カスタム形状

Shapeターゲットがどのように見えるかを定義します。 Circle および RoundedRectangle シェイプはすでに実装されていますが、カスタムシェイプが必要な場合は、 Shapeインターフェイスを実装することで取得できます。

 class CustomShape (
    override val duration : Long ,
    override val interpolator : TimeInterpolator
) : Shape {

  override fun draw ( canvas : Canvas , point : PointF , value : Float , paint : Paint ) {
    // draw your shape here.
  }
}

カスタムエフェクト

Effect使用すると、ターゲットを装飾することができます。 RippleEffect と FlickerEffect のシェイプはすでに実装されていますが、カスタム エフェクトが必要な場合は、 Effectインターフェイスを実装することで取得できます。

 class CustomEffect (
    override val duration : Long ,
    override val interpolator : TimeInterpolator ,
    override val repeatMode : Int
) : Effect {

  override fun draw ( canvas : Canvas , point : PointF , value : Float , paint : Paint ) {
    // draw your effect here.
  }
}

サンプル

このリポジトリのクローンを作成し、アプリ モジュールをチェックアウトします。

著者

• 仙波拓
  • Github - (https://github.com/takusemba)
  • Twitter - (https://twitter.com/takusemba)
  • Facebook - (https://www.facebook.com/takusemba)

ライセンス

 Copyright 2017 Taku Semba.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.