[android]시크바

hyewoon·2024년 2월 18일

android

목록 보기

7/8

✔️ 시크바란?

프로그레스바의 일종으로 드레그 할 수 있는 thumb이 있다. thumb 이용해서 현재의 위치를 좌우 또는 상하로 움직일 수 있음.

시크바 메소드

(1) onProgressChanged: 시크바를 조작하고 있는 중에 발생

(2) onStartTrackingTouch: 시크바를 처음 터치했을 때 발생

(3) onStopTrackingTouch: 시크바 터치가 끝났을 때 발생

https://developer.android.com/reference/android/widget/SeekBar

✔️ 기본 사용

시크바 넣고자 하는 xml파일에서 Seebar 추가한다.

android:progress="10"
android:max="100"
android:progress="10"
시크바 보일 때 기본으로 보여지는 기본값 이 10이다.
android:max="100"
최대값이 100이다.

✔️ 시크바 값 알아내기

fragment에서 사용(viewBinding 적용)
setOnSeekBarChangeListener 적용

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? {
        binding = FragmentWeeklyBinding.inflate(inflater)


        binding.seekBar.setOnSeekBarChangeListener(object  : SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                binding.text.text = p1.toString()
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {
               // TODO("Not yet implemented")
            }

            override fun onStopTrackingTouch(p0: SeekBar?) {
               // TODO("Not yet implemented")
            }

        })
        return binding.root
    }

onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean)
binding.text.text = p1.toString()

Int 타입 p1 통해 변화 값 알 수 있다.

✔️ 세로 시크바

android:rotation="270"

✔️ 세로 시크바 여러개 연결

1. 나란히 배치

시크바가 회전하면서 상하좌우 속성을 맞추는게 헷갈린다.
(constraintLayout 적용시)
<기준 시크바: 가장 왼쪽>

 app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"

<가운데 시크바>

app:layout_constraintTop_toTopOf="@id/progress1"
app:layout_constraintBottom_toBottomOf="@id/progress1"
app:layout_constraintStart_toEndOf="@id/progress1"

가로 방향 시크바의 경우 여러줄 정렬된다면
app:layout_constraintStart_toStartOf="@id/progress1` 이 될때지만

세로 방향 시크바의 경우
app:layout_constraintStart_toEndOf="@id/progress1
로 지정해주어야 나란히 정렬된다.

2.간격조절

이런 형태의 세로 시크바를 여러개 나열할 경우

android:translationX="-150dp"

시크바의 width="200dp" 인 경우에 rotation을 할 경우, 그림 처럼 길이는 여전히 200dp라서 시크바 사이의 간격을 줄일 수가 없다.

이때 translationX 속성을 마이너스로 주면 두 시크바 사이의 간격일 줄어들고, 여러개의 시크바를 나란히 배치시킬 수 있다.

첫번째 시크바 : android:translationX="0dp"
두번째 시크바 : android:translationX="-150dp"
세번째 시크바 : android:translationX="-300dp

✔️ 시크바 두께 조절

1. 시크바 두께(height)

android:progressDrawable : 시크바 진행배경색상
android:thumb : 시크바 진행아이콘
android:splitTrack="false" : 시크바 진행아이콘(thumb) 여백 없애기

참고 사이트 https://its-blog.tistory.com/79
https://kkh0977.tistory.com/1262

xml자체에서는 시크바 height(두께) 조절할 수 없다.

시크바 배경 : 기본으로 보여지는 두께 및 색상
시크바 프로그레스 : thumb이 지나가고 나서 나타나는 두께 및 색상
drawable > new resource file
시크바 배경 및 시크바 프로그레스

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--시크바 배경-->
    <item android:id="@+id/background" android:width="300dp" android:height="60dp">
        <!--기본형태 : 사격형-->
        <shape android:shape="rectangle" >
            <!--시크바 테두리 두께 및 색상-->
            <stroke android:width="10dp" android:color="#C1C6C9"/>
            <!--시크바 내용색상-->
            <solid android:color="#C1C6C9"/>
            <!--시크바 테두리 둥글게-->
            <corners android:radius="50dp"/>
        </shape>
    </item>
    <!--시크바 진행 프로그래스-->
    <item android:id="@+id/progress">
        <clip>
            <shape android:shape="rectangle">
                <!--시크바 테두리 두께 및 색상-->
                <stroke android:width="10dp" android:color="#6ACCF8"/>
                <!--시크바 내용색상-->
                <solid android:color="#6ACCF8"/>
                <!--시크바 테두리 둥글게-->
                <corners android:radius="50dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

높이 및 길이 수정

item android:id="@+id/background" android:width="300dp" android:height="60dp"

xml에서

android:layout_width="0dp"
android:layout_height="wrap_content"

해야 원하는 크기로 적용 가능

더 크고 두꺼워진 모습 확인 할 수 있다.

2. 커스텀이미지 추가하기

1번 방식으로 해도 두께에 한계가 있다.
원하는 이미지의 커스텀 시크바를 drawble로 추가해서 직접 크기를 조정하는 방식을 이용해야 한다.

✔️ thumb

1. 크기 조절

<?xml version="1.0" encoding="utf-8"?>
<!--원형시크바-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <!--배경-->
    <solid android:color="#6ACCF8"/>
    <!--테두리-->
    <stroke android:width="1dp" android:color="#3F51B5"/>
    <!--크기-->
    <size android:width="15dp" android:height="15dp"/>

</shape>