안드로이드 드래그바 만들기 ~ Make a DragBar with android

 

안드로이드에서 기본으로 제공해주는 ProgressBar 나 seekBar를 이용하여 쉽게 드래그 느낌이 나는 바를 만들 수 있다.

많이 라이브러리가 있어 커스텀도 가능하지만 조금 복잡해서 내가 정말 원하는 간단한 기능을 구현하기에는 굳이 필요가 없다고 생각된다.

 

기존의 터치 이벤트와 x좌표만 가지고 드래그 느낌을 내는 레이아웃을 간단하게 만들 수 있다.

 

<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=".LinearLayoutDragBar.LinearLayoutDragBar">

    <View
        android:id="@+id/dragbar_back"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@android:color/darker_gray"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/dragbar_thumb"
        android:layout_width="10dp"
        android:layout_height="20dp"
        android:background="@android:color/black"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toTopOf="parent"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        app:layout_constraintTop_toBottomOf="@+id/dragbar_back">

        <TextView
            android:id="@+id/grade_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="c#"/>

        <TextView
            android:id="@+id/grade_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="java"/>

        <TextView
            android:id="@+id/grade_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="kotlin"/>

        <TextView
            android:id="@+id/grade_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="php"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

레이아웃은 특별한 거 없이 겹쳐있는 바 두개와 아래에는 보기 심심하니 아무거나 넣도록 하자

 

중요한건 배경이 되는 바와 움직이는 바 2개가 겹쳐져 있어야 한다는 것이다. 

 

다른 레이아웃을 사용해도 되지만 이제 ConstraintLayout이 가장 쉽게 느껴진다.

 

class LinearLayoutDragBar : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_linear_layout_drag_bar)

        // 기기의 넓이를 구한다.
        val dm : DisplayMetrics = getApplicationContext().getResources().getDisplayMetrics()

        dragbar_thumb.layoutParams.width = dm.widthPixels / 4

        dragbar_thumb.setOnTouchListener( object : View.OnTouchListener {
            override fun onTouch(v: View, event: MotionEvent): Boolean {
                when(event.action) {
                    MotionEvent.ACTION_MOVE -> {
                        v.setX(v.getX() + (event.getX()) - (v.getWidth()/2))
                    }
                    MotionEvent.ACTION_UP -> {
                        // 다시 처음으로
                        v.setX(0.0f)
                    }
                }
                return true
            }
        })

    }
}

코드도 정말 간단하다.

 

그저 우리가 움직여야 하는 바의 터치이벤트만 주면 된다.

사실 좌표구해서 이런 애니메이션효과를 내는 건 공부해보지도 실제로 해볼 경험도 없어서 구글을 통해 구현해냈다..

 

만약에 바탕이 되는 바를 터치하였을 때 그 지점으로 바가 움직여야 한다면

 

터치이벤트를 바탕이 되는 바에 만들어야 한다.

 

이걸 통해서 공부한건 기준점을 잘 잡아야 한다는 것과 코딩보단 계산이 더 힘들었다.

 

얼른 모션레이아웃이 정식으로 나와서 사용할 수 있게 되었으면..그럼 모션레이아웃을 또 공부해야겠지..또르르