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)
  • 트위터 - (https://twitter.com/takusemba)
  • 페이스북 - (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.