(android) skydoves - Balloon

 이 글의 주제는 Balloon이라는 간단한 상태창을 만들기 위한 라이브러리입니다. 안드로이드는 다양한 view가 존재하고, 더 간단하게 view를 생성하고 관리하고자 여러가지 라이브러리들이 존재합니다. 저는 이전에는 douglasjunior의 simpletooltip이라는 라이브러리를 사용하고 있었으나, 제 프로젝트 내에서 사용하기 적합하지 않은 구조로 프로젝트가 변경되어서 Balloon이라는 라이브러리로 갈아타게 되었습니다.

 물론 사내 라이브러리를 하나 따로 제작하는 것도 경험상 나쁘지는 않다고 생각했으나 아무래도 이 라이브러리가 꽤 간단하게 사용할 수 있기도 하고, 제 프로젝트에 괜찮아서 적용하게 되었습니다.(사실 디자인적인 부분에서 워낙 수준이 떨어지는 제 문제로 인해...)

 역시 이 글을 보기보다는 직접 깃허브의 예시를 보고 사용하는 것이 더 편하신 분들을 위해 깃허브 코드를 아래에 첨부하겠습니다.

https://github.com/skydoves/Balloon

---

implementation "com.github.skydoves:balloon:1.3.4"

 역시 제일 중요한 것은 gradle에 라이브러리를 추가하는 것입니다.

val balloon = createBalloon(context) {
  setArrowSize(10)
  setWidth(BalloonSizeSpec.WRAP)
  setHeight(65)
  setArrowPosition(0.7f)
  setCornerRadius(4f)
  setAlpha(0.9f)
  setText("You can access your profile from now on.")
  setTextColorResource(R.color.white_93)
  setTextIsHtml(true)
  setIconDrawable(ContextCompat.getDrawable(context, R.drawable.ic_profile))
  setBackgroundColorResource(R.color.colorPrimary)
  setOnBalloonClickListener(onBalloonClickListener)
  setBalloonAnimation(BalloonAnimation.FADE)
  setLifecycleOwner(lifecycleOwner)
}

 깃허브에서 소개된 코드입니다.

 setWidth와 setHeight는 위아래 크기를 나타내고 WRAP은 xml에서 wrapParent를 의미한다고 보면 됩니다.

 setArrowPosition같은 경우에는 float 타입으로 화살표의 위치를 어디로 정할 것이냐 인데, Balloon의 포커싱이 되는 앵커뷰의 좌우, 혹은 상하의 위치를 의미합니다. 이는 실제로 돌려보면서 원하는 위치를 파악하시면 도움이 될 것 같습니다. 하지만 위치가 가변적으로 변하는 것에 대해서는 크게 고려하지 않는 것인지 float 타입 외에 다른 방식으로의 사용은 확인할 수 없었습니다. 만약 가변적으로 변하고 싶다면 변수를 선언해서 특정 크기마다 변수를 따로 설정해두고 balloon에 세팅해야 할 것 같습니다.

 setCornerRadius는 가장자리의 둥근 정도를 의미합니다. 이는 디자인 영역이니 실제로 숫자를 통해 확인해보는 것이 좋습니다.

 setLifecyclerOwner는 라이프 사이클을 누구와 공유할 것인지에 대한 세팅입니다. 프래그먼트에서 만들면서 액티비티와 공유하게 되면, 뒤로가기 버튼으로 사라지지 않는 경우를 확인할 수 있습니다.

 등등이 있습니다만, 다 설명하기에는 깃허브에 잘 설명이 되어 있으니 나머지 설명은 생략하겠습니다. 직접 사용해보고 원하는 타입을 설정해주시는게 중요합니다.

fun Context.openQuestion(anchorView: View) {
    val balloon = createBalloon(this@openQuestion) {
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(11)
        setArrowSize(0)
        setMargin(5)
        setBackgroundColorResource(R.color.transparencyColor)
        setLayout(R.layout.dialog_popup_text) //사용하고자 하는 레이아웃(xml에 만들어둠)
        setLifecycleOwner(lifecycleOwner)
        setIsVisibleOverlay(true)
        setOverlayPadding(6f)
        setOverlayColorResource(R.color.overlay)
        setDismissWhenOverlayClicked(false)
        setOverlayShape(BalloonOverlayCircle(radius = 36f))
    }

    balloon.showAlignBottom(anchorView)
    balloon.getContentView().findViewById<AppCompatImageView>(R.id.popupCancel).setOnClickListener{
        balloon.dismiss()
    }//xml에서 만든 화면 내부 view에 리스너를 부착해주기 위한 코드
    balloon.isShowing
}

 balloon을 사용할 때, 그냥 balloon의 기본적인 화면이 아니라 자신이 만든 xml 레이아웃을 구현하고 싶을 때 사용할 수 있는 코드입니다. setLayout으로 구현하고 싶은 레이아웃을 구현할 수 있고, 이 xml 내부의 버튼에 리스너를 부착하고 싶다면 getContentView()를 통해 view를 가져올 수 있습니다.

이를 좀 더 응용하면 다이얼로그처럼 사용할 수도 있습니다....

---

 사실 이 라이브러리는 깃허브 내부에 이미 설명이 매우 잘 되어 있다고 생각합니다.(다른 여타 코드들에 비해서...) 그래서 크게 설명할 게 없네요. 그냥 두 가지 예제를 통해 이런 코드를 원한 사람이 있다면 사용하기를 바라면서 글을 작성해 봅니다!