[Compose UIs] Compose Filled Slider 라이브러리 사용해 슬라이더 만들기

Filled Slider 란?

 

이번에 Compose용 Filled Slider 라이브러리를 배포했다. Filled Slider은 볼륨 컨트롤이나 밝기 제어 등에 사용할 수 있는 채워지는 형태의 슬라이더 입니다. Filled Slider 라이브러리에서 제공하는 슬라이더는 가로 모드 세로 모드, 슬라이더 모양 설정, Continuous Discrete, 터치 민감도 설정 등 많은 기능들을 지원한다.

 

GitHub : https://github.com/seyoungcho2/FilledSliderCompose

GitHub - seyoungcho2/FilledSliderCompose: Provides Filled Slider for Jetpack Compose

도움이 되셨다면 ⭐를 눌러 프로젝트를 지지해주세요!

 

라이브러리 추가하기

라이브러리가 Maven Central에 올라가 있기 때문에 먼저 프로젝트 수준에 mavenCentral Repository를 추가해야 합니다.

allprojects {
    repositories {
        mavenCentral()
    }
}

 

이후 앱 수준의 build.gradle에 다음 라이브러리에 대한 의존성을 추가합니다.

dependencies {
    implementation "io.github.seyoungcho2:filled-slider-compose:1.0.0"
}

 

만약  build.gradle.kts를 사용하신다면 다음과 같이 추가해주시면 됩니다.

dependencies {
    implementation("io.github.seyoungcho2:filled-slider-compose:1.0.0")
}

 

Filled Slider 사용하기

Filled Slider은 아래와 같은 API들을 제공한다.

@Composable
fun FilledSlider(
    modifier: Modifier,
    sliderShape: Shape = RoundedCornerShape(50),
    isEnabled: Boolean = true,
    sliderColor: SliderColor = SliderColor(),
    sliderOrientation: SliderOrientation = SliderOrientation.Vertical,
    sliderType: SliderType = SliderType.Continuous,
    dragSensitivity: Float = 1f,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    currentValue: Float,
    setCurrentValue: (Float) -> Unit
)

• modifier: 슬라이더에 적용되는 Modifier.
• sliderShape: 슬라이더의 모양 설정
• isEnabled: 슬라이더가 드래그 했을 때 드래그가 될지 안될지 설정
• sliderColor: 슬라이더 색상. isEnabled가 true 혹은 false일 때 슬라이더 색상 설정 가능.
• sliderOrientation: 슬라이더가 수평적으로 혹은 수직적으로 변할지 설정
• sliderType: 연속적으로 값이 변하는 슬라이더와 이산적으로 값이 변하는 슬라이더 설정
• dragSensitivity: 슬라이더의 드래그 민감도. 1이면 드래그 한만큼만 이동 2면 드래그 한 거리의 2배 이동.
• valueRange: 슬라이더 값의 범위
• currentValue: 슬라이더의 현재 값.
• setCurrentValue: 슬라이더의 변한 값 콜백.

 

sliderShape  설정하기

Slider Shape은 다음과 같이 sliderShape에 Shape을 구현하는 값을 넘김으로써 설정할 수 있다. 예를 들어 아래는 직사각형 모양(RectangleShape)으로 설정한 것이다.

@Composable
fun RectangleShapeSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderShape= RectangleShape,
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        currentValue = currentValue,
        sliderType = SliderType.Continuous,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

 

RoundedCornerShape으로 설정할 수도 있다. RoundedCornerShape percent=50으로 설정해 완전히 둥글게 만든다.

@Composable
fun RoundedCornerShapeSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderShape= RoundedCornerShape(50),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        currentValue = currentValue,
        sliderType = SliderType.Continuous,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

 

그러면 다음과 같은 슬라이더가 만들어진다.

 

sliderType설정하기

sliderType은 연속된(Continuous) 슬라이더 혹은 이산(Discrete) 슬라이더 중 하나를 설정할 수 있다.

@Composable
fun ContinuousSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        currentValue = currentValue,
        sliderType = SliderType.Continuous,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

@Composable
fun DiscreteSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        currentValue = currentValue,
        sliderType = SliderType.Discrete(5),
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

 

이 둘은 다음과 같은 차이를 가진다. 하나는 연속적으로 값이 변하고 다른 하나는 이산적으로 값이 변한다. Discrete(5)는 총 5개의 Step이으로 설정되었다는 뜻이다.

 

 

sliderOrientation 설정하기

sliderOrientation은 드래그 방향과 Indication의 방향이 어느쪽일지 설정하는 기능이다. 다른 Slider들에는 이런 기능이 포함되어 있지 않은데, 이 기능이 필요해 같이 구현하였다.

@Composable
fun HorizontalSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(150.dp, 50.dp).align(Alignment.Center),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        sliderOrientation = SliderOrientation.Horizontal,
        currentValue = currentValue,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

@Composable
fun VerticalSlider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderShape= RoundedCornerShape(50),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        sliderOrientation = SliderOrientation.Vertical,
        currentValue = currentValue,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

 

 

 

dragSensitivity

dragSensitivity는 드래그 민감도로 드래그가 되었을 때 값을 얼마나 변화시킬지에 대한 배수이다. dragSensitivity = 1이면 드래그 한 만큼 변화하고, dragSensitivity = 2이면 드래그 한 것의 2배 만큼 값이 변화한다.

@Composable
fun DragSensitivity2Slider() {
    var currentValue by remember { mutableStateOf(20f) }
    FilledSlider(
        modifier = Modifier.size(50.dp, 150.dp),
        sliderColor = SliderColor(
            enabledTrackColor = Color(0xFFC6B8FF),
            enabledIndicationColor = Color(0xFF7D5FFF)
        ),
        currentValue = currentValue,
        dragSensitivity = 1f,
        valueRange = 0f..100f,
        setCurrentValue = {
            currentValue = it
        }
    )
}

 

 

GitHub : https://github.com/seyoungcho2/FilledSliderCompose

GitHub - seyoungcho2/FilledSliderCompose: Provides Filled Slider for Jetpack Compose

도움이 되셨다면 ⭐를 눌러 프로젝트를 지지해주세요!