입문

튜토리얼에 자주 나오는'특정한View를 대화상자처럼 표시하고 사용법을 소개하는 등'이라는 이른바 tootip의 표현을 하고 싶어서 이를 실현할 수 있는 라이브러리를 찾아봤다.
안드로이드에서 이런 필수 조건을 사용할 수 있는 라이브러리android-target-tooltip는 고정적이라고 하자 같은 종류Balloon로서 느낌이 좋은 라이브러리를 발견했다.사용의 편리함 등을 알아보고 싶어서 이 기사에서 이것을 만져보세요.

"Balloon" 정보

라이브러리 URLhttps://github.com/skydoves/Balloon）

특징

full-kotlin

자바가 섞이면 미지근한 물을 두려워하면서 코드를 쓰게 되기 때문에 개인적으로 즐거운 포인트다.

kotlin dsl로 설명할 수 있습니다

이 라이브러리에서 "kotlin dsl"을 사용하여 외관을 직관적으로 정의할 수 있습니다

코드만 있으면 외관을 정의할 수 있다

사람에 따라 장점으로 보는지는 분리된 것 같지만 개인적으로 XML로 하나하나 외관 정의를 하는 것은 번거롭기 때문에 장점으로 삼는다.

만져보다

일단 간단하게 터치를 해볼게요.

먼저 간단하게 말하면'특정한 보기에 대해 텍스트를 포함하는 tooltip'을 만들어 보세요.
main_activity.설명 xml.
activity_main.xml

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="show tip."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="hide tip."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

buttob1을 누르면 textView에 tooltip을 표시하고 button2를 누르면 숨깁니다. 이렇게 하면 다음과 같습니다.
MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val balloon = createBalloon(baseContext) {
            setArrowSize(10)
            setWidthRatio(0.5f)
            setHeight(65)
            setArrowPosition(0.5f)
            setCornerRadius(4f)
            setAlpha(0.9f)
            setText("Hello Balloon.")
            setBackgroundColorResource(R.color.colorPrimary)
            setBalloonAnimation(BalloonAnimation.FADE)
            setLifecycleOwner(this@MainActivity)
        }

        findViewById<Button>(R.id.button1).setOnClickListener {
            balloon.showAlignTop(findViewById(R.id.textView))
        }

        findViewById<Button>(R.id.button2).setOnClickListener {
            balloon.dismiss()
        }
    }
}

createBalloon의 부분은kotlindsl입니다.쓰기 쉽고 읽기 쉽다.
이 작업은 다음과 같습니다.

인터페이스가 직관적이기 때문에 나는 별다른 설명이 없다고 생각한다.아주 간단하게 툴팁을 표시합니다.

사용자 정의 뷰 표시 시도

다음은 우리가 정의한 보기를 봅시다.이 정도면 자유도가 확 넓어져 진전이 있을 것이다.
다음 뷰를 보려면:.
custom_balloon.xml

<?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="200dp">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Custom View."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

</androidx.constraintlayout.widget.ConstraintLayout>

코드는 이렇게 썼어요.
MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val balloon = createBalloon(baseContext) {
            setArrowSize(10)
            setWidthRatio(0.5f)
            setHeight(200)
            setArrowPosition(0.5f)
            setCornerRadius(4f)
            setAlpha(0.9f)
            setLayout(R.layout.custom_balloon)
            setBackgroundColorResource(R.color.colorPrimary)
            setBalloonAnimation(BalloonAnimation.FADE)
            setLifecycleOwner(this@MainActivity)
        }

        findViewById<Button>(R.id.button1).setOnClickListener {
            balloon.showAlignTop(findViewById(R.id.textView))
        }

        findViewById<Button>(R.id.button2).setOnClickListener {
            balloon.dismiss()
        }
    }
}

setLayout 정의된 뷰를 볼 수 있습니다.또한 여기에는 관련이 없지만 설정된ViewgetContentView()를 꺼내는 방법도 있다. 이를 이용하여 작은 외관 변경도 할 수 있고 각종 다람쥐의 로그인도 할 수 있다.
주의점으로 setLayout를 해도 툴팁은 사이즈에 따라 신축되지 않기 때문에 활용setHeight 등 매뉴얼에 좋은 느낌으로 설정해야 한다.
여기까지 할 수 있다면 다음과 같이 동작을 한다.

정의된 View를 원활하게 표시할 수 있습니다!

끝내다

이번에 "Balloon"을 조사했습니다.인터페이스도 좋고 외관도 좋아서 앞으로 많이 활용할 수 있을 것 같아요.
개인적으로 개량하고 싶은 부분도 있기 때문에 개량해서 영향을 주고 싶어요.