סיבוב קלט באמצעות 'כתיבה'

חוגה להזנת נתונים היא קלט מחלקים בשעון שמסתובבים או מסתובבים. בממוצע, משתמשים מקדישים רק כמה שניות לאינטראקציה עם השעון. אתם יכולים לשפר את חוויית המשתמש באמצעות קלט סיבובי כדי לאפשר למשתמשים לבצע במהירות משימות שונות.

שלושת המקורות העיקריים לקלט סיבובי ברוב השעונים כוללים את הכפתור הצדדי המסתובב (RSB), וגם מסגרת פיזית או מסגרת מגע, שהיא אזור מגע מעגלי מסביב למסך. אף על פי שההתנהגות הצפויה עשויה להשתנות בהתאם לסוג הקלט, חשוב לתמוך בקלט סיבובי לכל האינטראקציות החיוניות.

גלילה

רוב המשתמשים מצפים שאפליקציות יתמכו בתנועת הגלילה. בזמן שהתוכן גולל במסך, צריך לספק למשתמשים משוב חזותי בתגובה לאינטראקציות עם החוגה. משוב חזותי יכול לכלול אינדיקטורים של גלילה לגלילה אנכית או אינדיקטורים של דפים.

הרכיבים ScalingLazyColumn, ‏ TransformingLazyColumn ו-Picker תומכים בתנועת הגלילה כברירת מחדל, כל עוד צריך למקם את הרכיבים האלה בתוך AppScaffold ו-ScreenScaffold ולהעביר את מצב הרשימה בין ScreenScaffold לרכיב, כמו TransformingLazyColumn.

‫AppScaffold ו-ScreenScaffold מספקים את מבנה הפריסה הבסיסי לאפליקציות Wear OS, וכבר יש בהם משבצת לאינדיקטור גלילה עם הטמעה שמוגדרת כברירת מחדל. כדי להתאים אישית את התקדמות הגלילה, יוצרים אינדיקטור גלילה שמבוסס על אובייקט מצב הרשימה, כמו שמוצג בקטע הקוד הבא:

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

אפשר להגדיר את התנהגות ההצמדה של ScalingLazyColumn באמצעות ScalingLazyColumnDefaults.snapFlingBehavior, כמו בקטע הקוד הבא:

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

פעולות בהתאמה אישית

אפשר גם ליצור פעולות מותאמות אישית שמגיבות לקלט מהחוגה באפליקציה. לדוגמה, אפשר להשתמש בקלט מהחוגה כדי להתקרב ולהתרחק או כדי לשלוט בעוצמת הקול באפליקציית מדיה.

אם הרכיב לא תומך באופן מובנה באירועי גלילה כמו שליטה בעוצמת הקול, אפשר לטפל באירועי הגלילה בעצמכם.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

יוצרים מצב מותאם אישית שמנוהל במודל התצוגה, וקריאה חוזרת (callback) מותאמת אישית שמשמשת לעיבוד אירועי גלילה סיבובית.

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

לצורך פשטות, בדוגמה שלמעלה נעשה שימוש בערכי פיקסלים, שאם ישמשו בפועל, סביר להניח שיהיו רגישים מדי.

אחרי שמקבלים את האירועים, משתמשים בפונקציית הקריאה החוזרת, כמו שמוצג בקטע הקוד הבא.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }