Ajouter des gestionnaires d'interaction aux conceptions
Dans cette section, nous allons apprendre à ajouter des interactions à notre conception via des gestionnaires d'interactions.
Les gestionnaires d'interaction permettent de spécifier les endroits où il est possible d'interagir avec un composant (en appuyant une fois ou deux, par exemple). Vous pouvez ajouter des gestionnaires d'interaction à n'importe quelle couche d'une conception.
Ajouter des gestionnaires
Vous pouvez ajouter des gestionnaires d'interaction à n'importe quelle couche. Cela permet aux concepteurs de spécifier les parties du composant qui sont interactives.
Sélectionnez la variante hero-item (le frame), cliquez sur + à côté de Paramètres, puis sélectionnez tap-handler pour ajouter une gestionnaire d'interactions. Cela permet aux développeurs d'écrire du code qui réagit lorsqu'un utilisateur appuie sur la vignette.
Répétez l'étape précédente avec la couche d'icône menu dans la variante audio-item. Cela permet aux développeurs d'afficher un menu lorsqu'un utilisateur appuie sur l'icône de menu.
Si vous sélectionnez le gestionnaire en appuyant sur un bouton, vous remarquerez qu'il n'affiche
s'applique à la variante audio-item, car les autres variantes
une icône de menu. Toutefois, l'utilisateur ayant appuyé sur NewsCard s'applique à ces trois éléments.
. Cela signifie que vous pouvez fournir un gestionnaire (dans le code) à exécuter lorsque
l'une des trois variantes est utilisée, ce qui supprime les doublons du code et
paramètres. Nous verrons son fonctionnement plus en détail dans les mises à jour
dans Android Studio.
Enregistrer la version nommée
Nous allons maintenant marquer cette version comme étant prête à être importée dans le code.
Ouvrez le plug-in Figma Relay, s'il n'est pas déjà ouvert.
Cliquez sur "Partager avec le développeur" dans l'angle inférieur droit de la boîte de dialogue.
Sur l'écran Partager avec le développeur, saisissez un nom et une description pour le
version.
Exemple de titre: Interactions ajoutées
Exemple de description: deux gestionnaires d'interactions ajoutés aux fiches
Cliquez sur Enregistrer.
Appuyez sur CMD-L sur un ordinateur MAC, puis sur CTRL-L sous Windows pour copier le lien du composant
dans le presse-papiers.
Mettre à jour le composant dans Android Studio
Mettez à jour le composant NewsCard :
Dans Android Studio, assurez-vous que la fenêtre d'outil Projet se trouve dans la vue Android.
Ensuite, effectuez un clic droit sur app/ui-packages/news_card/, vers le bas de la
cliquez sur Mettre à jour le package UI.
Cliquez sur pour créer votre projet. Le package UI mis à jour est alors utilisé et une version mise à jour du code composable est générée.
<ph type="x-smartling-placeholder"></ph>
Vous verrez que app/java/com/example/hellonews/newscard/NewsCard.kt
Les gestionnaires d'interaction sont ajoutés en tant que paramètres à 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 = {}
) {
...
Intégrer à l'application
Ajoutons maintenant des gestionnaires à nos interactions.
Dans app/java/com/example/hellonews/ui/home/HomeScreen.kt, faites défiler l'écran jusqu'à PostListArticleStories, vers la ligne 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(...)
...
Pour postTop, ajoutez des gestionnaires pour onNewsCardTapped. createOnTapped ouvre un
avec ses paramètres de titre et de corps.
Toujours dans HomeScreen.kt, faites défiler l'écran jusqu'à PostListAudioStories, vers la ligne 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(...)
...
Pour chaque post, ajoutez des gestionnaires pour onNewsCardTapped. Étant donné que la variante "Audio"
contient un menu, attribuez createOnTapped à onMenuTapped.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/08/23 (UTC).
[]
[]
{
"lastModified": "Dernière mise à jour le 2024/08/23 (UTC).",
"confidential": False
}