בוררים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
בורר עוזר למשתמשים לבחור ולהגדיר נתונים ספציפיים.
Picker
צריך להשתמש בבוררי בחירה כדי לאפשר למשתמשים לבחור מתוך מספר סופי של פריטים.
ברירת המחדל היא שהפריטים יחזרו שוב ושוב בלי סוף בשני הכיוונים. מומלץ להשבית את ההתנהגות הזו אם הסדר ברשימה חשוב, או כדי לאפשר למשתמשים להגיע לאלמנט הראשון והאחרון בתנועה מהירה.
אנטומיה
מבנה
א. עמודה לא פעילה
ב'. Colon Breaker
ג. עמודת הבורר
ד. תוכן מוביל
ה. תוכן באמצע
ו. תוכן תחתון
רוחבים וגבהים
קבוצת הבורר ממלאת את הגובה והרוחב הזמינים. יש ארבע אפשרויות פריסה לעמודות הבורר. כל פריסה ממוקמת במרכז וממלאת את הגובה הזמין. רוחב העמודות מוגדר לפי רוחב הנדרש כדי להכיל את מספר הספרות הנדרשות בגופן. חלונית הבחירה של תאריך היא היוצאת מן הכלל, והיא ממלאת את המסך אופקית ומגיעה עד לקצה.
לדוגמה, המספרים יחשבו את הרוחב של '00' ולאחר מכן יגדירו את הרוחב. בשדות טקסט, לדוגמה, שדה החודש, הרוחב ייקבע לפי הרוחב של 'MMM' (האות הרחבה ביותר באלפבית הלטיני). לכן, הרוחב והגובה (כלומר גובה השורה של סגנון הטקסט שבו נעשה שימוש) יושפעו מהגופן שבו נעשה שימוש.
הפריטים בבורר משתנים בגודל בהתאם לנקודת הציון.
שימוש
דוגמאות הבאות של בוררים לבחירת תאריך ושעה
כדי להטמיע בורר תאריך ושעה מובנה, אפשר להיעזר בספריית Horologist ב-GitHub.
אם רוצים ליצור חוויה דומה שבה המשתמשים בוחרים ערך שמורכב מכמה חלקים במספר בוררי בחירת ערכים, צריך להשתמש ברכיב המובנה PickerGroup. האובייקט הזה משתמש באובייקט של רכז המיקוד כדי להקצות את המיקוד לרכיב ה-Picker הנכון.
פריסות דינמיות
TimePicker 24H
TimePicker 12H
חלונית לבחירת תאריך
התנהגות תגובה
הגדלת גודל הטקסט
אחרי נקודת העצירה 225+, גודל הגופן של רכיב הבורר משתנה. העותק העליון והתחתון בעמודה של גלילה איטית משתנה (A), וכך גם העותק האמצעי. ריכזנו כאן כמה דוגמאות:
פריסת שתי עמודות
מתחת לנקודת העצירה (breakpoint) של 225dp
גופן: Display 2
מעל נקודת העצירה (breakpoint) של 225dp
גופן: Display 1
פריסת שלוש עמודות
מתחת לנקודת העצירה (breakpoint) של 225dp
גופן: Display 3
מעל לנקודת העצירה (breakpoint) של 225dp
גופן: Display 2
הגדלת גודל הגרדיאנט
הגובה של העמודה Picker נקבע לפי השטח הזמין. גם ההדרגתיות העליונה וגם ההדרגתיות התחתונה מוגדרות לשליש (33%) מהגובה הזמין. המשמעות היא שבכל גודל מסך זמין, שיפוע הצבעים משתנה באופן יחסי. מוצגים בנפרד מפריסת העמודות.
מתחת לנקודת העצירה (breakpoint) של 225dp
גודל: 33% מגובה העמודה
מעל לנקודת העצירה (breakpoint) של 225dp
גודל: 33% מגובה העמודה
הגדלת המרווח בין העמודות
המרווח בין העמודות משתנה אחרי נקודת העצירה (breakpoint) של 225px ואילך, ומתחיל ב-2dp או ב-4dp וגדל ל-6dp. זה תלוי בפריסה שבחרתם: פריסה עם 2 עמודות או פריסה עם 3 עמודות.
פריסת שתי עמודות
מתחת לנקודת העצירה (breakpoint) של 225dp
מרווח בין עמודות של 4dp
מעל לנקודת העצירה (breakpoint) של 225dp
מרווח בין עמודות של 6dp
פריסת שלוש עמודות
מתחת לנקודת העצירה (breakpoint) של 225dp
מרווח של 2dp בין עמודות
מעל לנקודת העצירה (breakpoint) של 225dp
מרווח בין עמודות של 6dp
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-07-27 (שעון UTC)."],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
