seekBar 세로모드

나고수·2022년 6월 26일
0

1일1공부

목록 보기
50/68
post-custom-banner

//.kt

class SeekbarActivity : AppCompatActivity(), SeekBar.OnSeekBarChangeListener {

    private lateinit var binding: ActivitySeekbarBinding
    private var changedProgress = 0

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

        changedProgress = 60

        binding.seekbar.progress = changedProgress
        binding.seekbar.setOnSeekBarChangeListener(this)
    }

    override fun onStopTrackingTouch(p0: SeekBar?) {
        //seekbar를 20%씩 나누기
        val progress = when (p0?.progress) {
            in 0..19 -> 0
            in 20..39 -> 20
            in 40..59 -> 40
            in 60..79 -> 60
            in 80..99 -> 80
            else -> 100
        }
        p0?.progress = progress
        changedProgress = p0?.progress ?: 60
    }

    override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {}
    override fun onStartTrackingTouch(p0: SeekBar?) {}
}
//activity_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/ll_textview_setting"
            android:layout_width="wrap_content"
            android:layout_height="380dp"
            android:gravity="end"
            android:orientation="vertical"
            android:paddingStart="80dp"
            app:layout_constraintBottom_toBottomOf="@id/seekbar"
            app:layout_constraintEnd_toStartOf="@id/seekbar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/seekbar">

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_100"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="100%"
                android:textColor="@color/black" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1" />
          // 👈 weight 를 1씩 줘서 텍뷰가 균등하게 나눠지게 합니다.

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_80"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="80%"
                android:textColor="@color/black" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_60"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="60%"
                android:textColor="@color/black" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1" /> 

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_40"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="40%"
                android:textColor="@color/black" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="20%"
                android:textColor="@color/black" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/textview_setting_0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0%"
                android:textColor="@color/black" />

        </androidx.appcompat.widget.LinearLayoutCompat>

        <androidx.appcompat.widget.AppCompatSeekBar
            android:id="@+id/seekbar"
            android:layout_width="390dp" // 👈 seekbar의 길이(height)를 설정합니다.
            android:layout_height="40dp" // 👈 thumb가 짤리지 않을때 까지 설정합니다.
            android:max="100" // 👈 seekbar의 최댓값을 설정 
            android:progressDrawable="@drawable/seekbar" // 👈 drawable 
            android:rotation="270" // 👈 270도 회전.세로모드
            android:thumb="@drawable/seekbar_thumb" // 👈 thumb
            android:translationX="-150dp" // 👈x좌표 이동 -dp면 왼쪽으로, +dp면 오른쪽으로 이동합니다.
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/ll_textview_setting"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
//seekbar_thumb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="28dp" // 👈 thumb의 크기 설정 
        android:height="28dp"
        android:drawable="@drawable/thumb" />
</layer-list>
//seekbar.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- seekbar 배경 -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <stroke
                android:width="8dp"
                android:color="#00ffffff" />
            <solid android:color="#151B2E" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- seekbar 프로그래스 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <stroke
                    android:width="8dp"
                    android:color="#00ffffff" />
                <gradient
                    android:angle="180"
                    android:endColor="#FFD5E4"
                    android:startColor="#E91E63"
                    android:type="linear" />
                <corners android:radius="12dp" />
            </shape>
        </clip>
    </item>

</layer-list>
profile
되고싶다
post-custom-banner

0개의 댓글