Android NDK开发详解Wear之滑块和分段滑块

滑块

InlineSlider 组件可允许用户从一系列值中进行选择。

@Composable
fun InlineSlider(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: Int,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    segmented: Boolean = steps <= 8,
    colors: InlineSliderColors = InlineSliderDefaults.colors()
): Unit

InlineSlider allows users to make a selection from a range of values. The range of selections is shown as a bar between the minimum and maximum values of the range, from which users may select a single value. InlineSlider is ideal for adjusting settings such as volume or brightness.

Value can be increased and decreased by clicking on the increase and decrease buttons, located accordingly to the start and end of the control. Buttons can have custom icons - decreaseIcon and increaseIcon.

The bar in the middle of control can have separators if segmented flag is set to true. A single step value is calculated as the difference between min and max values of valueRange divided by steps + 1 value.

A continuous non-segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider

var value by remember { mutableStateOf(4.5f) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueRange = 3f..6f,
    steps = 5,
    segmented = false
)

A segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider

var value by remember { mutableStateOf(2f) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueRange = 1f..4f,
    steps = 7,
    segmented = true
)

使用内嵌滑块从范围中选择一个值，例如设置屏幕亮度或字体大小。使用滑块所做的更改会立即生效，并允许用户在满意之前继续进行调整。如果不希望调整立即生效，请勿使用滑块。

剖析

A. 进度条
B. 进度轨道
C. 容器
D. 减少图标
E. 增加图标
F. 分隔符

设计建议

分段滑块
如果值的范围介于 3 和 9 之间，请考虑使用分段滑块。如果值的范围大于 8，则分段将因过小而无法显示。

用法

请参见以下滑块示例。

步进控件

Stepper 组件可让用户从一系列值中进行选择。

使用步进控件提供全屏控制体验，让用户从一系列值中进行选择。

剖析

A. 调大按钮
B. 标签或条状标签
C. 调小按钮

用法

请查看下方示例，了解如何使用步进控件。

请查看 GitHub 上的 Horologist 库，该库提供了音量控制屏幕的实现方案。
🔊 Audio and UI
Domain model for Audio related functionality. Volume Control, Output switching. Subscribing to a Flow of changes in audio or output.

horologist-audio
horologist-audio-ui
VolumeScreen

🔐 Auth
Libraries to help developers to build apps following the Sign-In guidelines for Wear OS .

horologist-auth-composables: composable screens for authentication use cases, with no dependency on the auth-data library.
horologist-auth-ui: composable screens for authentication use cases, with integration with the auth-data library
horologist-auth-data: implementation for Wear apps for most of the authentication methods listed in the Authentication on wearables guide.
horologist-auth-data-phone: implementation for Mobile apps for some of the authentication methods provided by the auth-data library.
sample wear: sample wear app to authenticate using different methods.
sample phone: sample phone app to authenticate using different methods.
☰ Tiles
Kotlin coroutines flavoured TileService.

horologist-tiles

Why the name?
The name mirrors the Accompanist name, and is also Watch related.

https://en.wiktionary.org/wiki/horologist

horologist (Noun) Someone who makes or repairs timepieces, watches or clocks.

Contributions
Please contribute! We will gladly review any pull requests submitted. Make sure to read the Contributing page to know what our expectations of contributions are.

License
Copyright 2023 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。

最后更新时间 (UTC)：2022-09-07。