בחלק הזה נלמד איך להוסיף אינטראקציות לעיצוב שלנו דרך גורמים שמטפלים באינטראקציות.
![אפליקציית חדשות עם פעולת הקשה](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/interaction-handlers/newsapp-with-tap-interaction.png?hl=he)
רכיבי handler של אינטראקציות מספקים דרך לציין היכן רכיב יכול להיות הייתה אינטראקציה עם (הקשה, הקשה כפולה וכו'). ניתן להוסיף רכיבי handler של אינטראקציות לכל שכבה בתוך עיצוב.
הוספת handlers
ניתן להוסיף רכיבי handler של אינטראקציות לכל שכבה. כך מעצבים יכולים לציין אילו חלקים של הרכיב הם אינטראקטיביים.
בוחרים את הווריאציה של הפריט המנצח (המסגרת), לוחצים על + לצד פרמטר ובוחרים באפשרות
tap-handler
כדי להוסיף handler של אינטראקציה. הזה מאפשרת למפתחים לכתוב קוד שמגיב כשמשתמש מקיש על הכרטיס.חוזרים על השלב הקודם עם שכבת הסמל menu בקטע audio-item. הווריאנט. ההגדרה הזו מאפשרת למפתחים להציג תפריט כשמשתמש מקיש על התפריט .
אם תבחרו ב-handler בהקשה על התפריט, תוכלו לראות שהוא רק רלוונטי לווריאנט אודיו-פריט, כי לווריאציות האחרות אין סמל תפריט. עם זאת, הכרטיס ב-NewsCard שעליו מקישים חל על כל שלושת הסוגים וריאציות של אותו מודל. כלומר, אפשר לספק handler אחד (בקוד) שירוץ מקישים על אחת משלוש הווריאנטים, ומסירים כפילות של קוד . נראה את זה בפירוט בעדכון הבא של Android Studio.
שמירת גרסה בעלת שם
עכשיו נסמן את הגרסה הזו כמוכנה לייבוא אל הקוד.
פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.
לוחצים על 'שיתוף עם המפתח' בפינה השמאלית התחתונה של תיבת הדו-שיח.
במסך 'שיתוף עם המפתח', מזינים שם ותיאור של .
כותרת לדוגמה: אינטראקציות שנוספו
דוגמה לתיאור: שני רכיבי handler של אינטראקציות שנוספו לכרטיסים
לוחצים על שמירה.
מקישים על CMD-L ב-MAC או על CTRL-L ב-Windows כדי להעתיק את הקישור לרכיב אל הלוח.
עדכון הרכיב ב-Android Studio
עכשיו נעדכן את הרכיב NewsCard:
ב-Android Studio, מוודאים שהחלון של הכלי 'פרויקט' נמצא בתצוגת Android. לאחר מכן לוחצים לחיצה ימנית על
app/ui-packages/news_card/
, וקרוב לחלק התחתון של בתפריט ההקשר, לוחצים על Update UI Package.לוחצים על
כדי לבנות את הפרויקט. זה לוקח את החבילה המעודכנת של ממשק המשתמש יוצרת גרסה מעודכנת של הקוד הקומפוזבילי.
עליך לחפש את
app/java/com/example/hellonews/newscard/NewsCard.kt
ולראות ש הגורמים המטפלים באינטראקציה נוספים כפרמטרים ל-NewsCard (onNewsCardTapped
,onMenuTapped
).// Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * Displays a summary of a news article. * * This composable was generated from the UI package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "", onNewsCardTapped: () -> Unit = {}, onMenuTapped: () -> Unit = {} ) { ...
שילוב באפליקציה
עכשיו נוסיף כמה handlers לאינטראקציות שלנו.
ב-
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, צריך לגלול למטה אלPostListArticleStories
, בסביבות קו 175.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
בשביל
postTop
, צריך להוסיף handlers שלonNewsCardTapped
.createOnTapped
פותח תיבת דו-שיח שבה הפרמטרים שלה הם הכותרת וגוף.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", postTop.title), view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
לכל פוסט, צריך להוסיף handlers של
onNewsCardTapped
.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
עדיין בתוך
HomeScreen.kt
, צריך לגלול למטה אלPostListAudioStories
, מסביב לקו 260.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
לכל פוסט, צריך להוסיף handlers של
onNewsCardTapped
. כי הווריאנט של האודיו יש תפריט, יש להקצות אתcreateOnTapped
ל:onMenuTapped
.@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), onMenuTapped = createOnTapped("Menu Tapped", post.title), view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
לוחצים על ► כדי ליצור את האפליקציה ולהפעיל אותה באמולטור.
הידד! למדת את התכונות המתקדמות של שרת הממסר.
אפשר לקרוא מידע נוסף על עבודה עם שרת ממסר בתהליך העבודה של שרת הממסר. . נשמח גם לשמוע ממך אם יש לך משוב.
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- פרמטרים של תוכן
- טיפול בווריאציות של עיצוב