Kotlin 시대의 Android를 위한 tooltip 라이브러리 "Balloon"을 터치해 보세요.

16487 단어 Android

입문


튜토리얼에 자주 나오는'특정한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"을 조사했습니다.인터페이스도 좋고 외관도 좋아서 앞으로 많이 활용할 수 있을 것 같아요.
    개인적으로 개량하고 싶은 부분도 있기 때문에 개량해서 영향을 주고 싶어요.

    좋은 웹페이지 즐겨찾기