[Android][kotlin] 마퀴(marquee) - 흐르는 글자, 텍스트뷰 구현하기

안녕하세요~ 챠니입니다! :)

오늘은 마퀴(marquee)에 대해서 알아보겠습니다!

 

마퀴(marquee)란?

TextView 안의 텍스트를 위, 아래 또는 좌우로 자동 스크롤되는 애니메이션 효과를 주는 속성이다. 해당 효과를 적용하면 전광판처럼 텍스트가 자동으로 흘러 넘어가게 할 수 있다.

 

그렇다면 마퀴(marquee)를 구현하는 방법에 대해서 알아보겠습니다!

 

마퀴(marquee) 구현방법

먼저 TextView를 하나 만들어서 마퀴(marquee)에 필요한 속성들을 선언합니다.

 

 

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- LED 배너 역할을 하는 TextView -->
    <TextView
        android:id="@+id/ledTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#000000"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:text="여기에 LED 배너 텍스트가 표시됩니다. 글자가 길어야 마퀴효과가 제대로 작동합니다."
        android:textColor="#FF0000"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

여기서 중요한 마퀴(marquee)의 속성은 다음과 같습니다.

//마퀴를 정의한다.
android:ellipsize="marquee"

//동작 횟수를 정한다.
android:marqueeRepeatLimit="marquee_forever"

//포커스를 둬야 움직이므로 true로 설정
android:focusable="true"

//여러줄이 나오면 의미가 없으니 한줄로 설정
android:singleLine="true"

 

 

다음 MainActivity.kt에서는 마퀴속성을 가진 TextView에 selected속성을 ture로 설정합니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

	// 마퀴 효과를 위해 선택 상태로 설정
    binding.ledTextView.isSelected = true
}

 

 

 

구현된 결과물을 어떻게 나오는지 한번 보겠습니다.

구현된 마퀴(marquee)

 

 

 

 

 

끝!

 

 

 

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview