안드로이드 흐르는 텍스트처리 - 띠 배너(Ticker) 만들기

안드로이드의 TextView에서는 ellipsize라는 말줄임 효과 속성이 있다. 텍스트의 앞, 중간, 뒷 부분을 줄여주는 start, middle, end 값이 있지만 특이하게 marquee라는 속성값도 제공한다. 이 값으로 텍스트 뷰의 전체 글자를 흐르게 할 수 있다.

 

 

기본예제

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:paddingHorizontal="16dp"
        android:paddingVertical="12dp"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:text="[공지사항] 구르는 골렘은 녹이 슬지 않습니다. 자세한 내용은 홈페이지를 참조해주세요."
        android:background="#1D6ECC"/>

</LinearLayout>

 

먼저 텍스트 뷰에서 글자를 흐르게 만드는 속성들을 정의한다. 우선, 앞서 언급했던 ellipsize를 marquee로 선언한다. 다음으로 singleLine과 focusable을 true로 선언한다. 이 세가지 값이 설정되어야 흐르는 효과가 처리되므로 반드시 놓치지 않아야한다. 나머지 백그라운드, 텍스트 컬러나 패딩 등은 본인이 원하는 색으로 처리하자.

 

ActivityMain.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<TextView>(R.id.text_view).isSelected = true
    }
}

다음으로, 안드로이드 메인 액티비티에서 꼭 해줘야하는 설정값이 있다. 바로 텍스트 뷰를 selected 처리하는 것이다. 마찬가지로 이 값이 없으면 효과가 제대로 동작하지 않으므로 꼭 설정해주도록 하자

 

 

결과 

 

 

커스텀 뷰 처리

만약 띠 배너를 여러개 만들어야하며, 위의 번거로운 과정을 생략하고 싶다면 TextView를 상속받아 커스텀 뷰를 만들 수 있다. 이렇게 하면 xml에서 설정하는 모든 속성을 코드내에서 처리하게 된다. 띠배너를 사용하려면 TextView와 동일하게 만들어둔 클래스를 xml에서 불러오기만 하면 된다.

 

Ticker.kt

class Ticker : AppCompatTextView {
    constructor(context: Context?) : super(context)

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    init {
        isSingleLine = true
        ellipsize = TextUtils.TruncateAt.MARQUEE
        isSelected = true
    }
}