Bonjour encore.
Nous approchons de la date de lancement de notre nouveau cours
"Développeur Android" , il ne reste plus rien et il y a peu de matériel intéressant que nous partageons avec tout le monde, y compris les auditeurs potentiels.
Allons-y.
Récemment, la 28e version de la bibliothèque de support Android a été annoncée. Dans la version alpha actuelle, nous avons maintenant accès à un ensemble de nouveaux composants intéressants. Dans cet article, je souhaite examiner les ajouts qui ont été apportés à la bibliothèque de support en tant que composants de la vue Matériau.
Bouton MatérielMaterialButton est un widget qui peut être utilisé pour afficher des boutons dans un style de matériau dans l'interface utilisateur des applications. Cette classe hérite de la classe AppCompatButton, que vous utilisez probablement déjà dans vos projets, mais quelles sont les différences? Par défaut, ce bouton sera déjà décoré d'une apparence matérielle sans qu'il soit nécessaire de le configurer vous-même à l'aide du drapeau de style. Nous pouvons utiliser la classe MaterialButton telle quelle, car elle aura déjà l'apparence matérielle dont nous avons besoin - considérez-la comme une classe plus pratique.
Nous pouvons ajouter ce bouton à notre fichier de mise en page comme suit:
<android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MATERIAL BUTTON" android:textSize="18sp" app:icon="@drawable/ic_android_white_24dp" />
Par défaut, cette classe utilisera la couleur d'accentuation de votre thème pour remplir l'arrière-plan des boutons et le blanc pour le texte dessus. Si le bouton ne se remplit pas, la couleur d'accent sera utilisée pour la couleur du texte sur le bouton avec un arrière-plan transparent.
Si nous voulons ajouter des styles supplémentaires au bouton, nous pouvons le faire en utilisant le jeu d'attributs de style
MaterialButton .
- app: icon - Utilisé pour déterminer l'image affichée au début du bouton.
- app: iconTint - Utilisé pour modifier la couleur de l'icône définie dans l'attribut app: icon
- app: iconTintMode - Définit le mode qui sera utilisé pour changer la couleur de l'icône
- app: iconPadding - Retrait qui sera appliqué à l'icône définie dans l'attribut app: icon
- app: additionalPaddingLeftForIcon - Définit le retrait qui sera appliqué à gauche de l'icône définie dans l'attribut app: icon
- app: additionalPaddingRightForIcon - Définit le retrait à appliquer à droite de l'icône définie dans l'attribut app: icon
- app: rippleColor - Couleur de l'effet d'entraînement du bouton
- app: backgroundTint - Utilisé pour appliquer une teinte à l'arrière-plan du bouton. Si vous souhaitez changer la couleur d'arrière-plan du bouton, utilisez cet attribut au lieu d'arrière-plan, afin de ne pas violer le style des boutons
- app: backgroundTintMode - Utilisé pour déterminer le mode qui sera utilisé pour changer la teinte d'arrière-plan
- app: strokeColor - Couleur de trait du bouton
- app: strokeWidth - Largeur du trait du bouton
- app: cornerRadius - Utilisé pour déterminer le rayon de lissage des coins des boutons
PuceLe composant Chip nous permet d'afficher des puces dans notre mise en page. En fait, une puce est un texte sur un fond arrondi. Son but est d'afficher à l'utilisateur une certaine forme d'ensemble de texte, qui peut ou non être sélectionné. Par exemple, les puces peuvent être utilisées pour afficher une liste d'offres sélectionnables pour l'utilisateur en fonction du contexte actuel de votre application.
Nous pouvons ajouter Chip à notre mise en page, en utilisant, par exemple, l'attribut
app:chipText pour définir le texte à afficher sur la puce:
<android.support.design.chip.Chip android:id="@+id/some_chip" android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This is a chip" />
Il existe également un ensemble d'autres attributs qui peuvent être utilisés pour styliser davantage la puce:
- application: vérifiable - Utilisé pour déclarer si la puce peut être marquée comme sélectionnée / non sélectionnée. Si elle est désactivée, la sélection des puces se comporte de la même manière qu'avec un bouton.
- app: chipIcon - Utilisé pour afficher les icônes de la puce
- app: closeIcon - Utilisé pour afficher l'icône de suppression dans la puce
Nous pouvons également suspendre des auditeurs sur nos instances de puce. Ils peuvent être utiles pour suivre les interactions des utilisateurs. Si notre puce peut être sélectionnée, nous voudrons probablement savoir quand cet état a été modifié. Nous pouvons le faire en utilisant l'écouteur
setOnCheckedChangeListener :
some_chip.setOnCheckedChangeListener { button, checked -> }
La même chose s'applique si nous voulons écouter les interactions avec l'icône de suppression. Pour ce faire, nous pouvons utiliser la fonction
setOnCloseIconClickListener pour enregistrer les événements de suppression:
some_chip.setOnCloseIconClickListener { }
Groupe de pucesSi nous montrons un ensemble de puces à nos utilisateurs, nous voulons nous assurer qu'ils sont correctement regroupés à notre avis. Pour ce faire, nous pouvons utiliser le
composant de vue
ChipGroup :
Si nous voulons utiliser
ChipGroup , il nous suffit d'envelopper notre
ChipView dans le composant parent de
ChipGroup :
<android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This" /> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="is" />
Par défaut, vos
ChipViews peuvent sembler légèrement épinglés les uns aux autres. Si tel est le cas, vous pouvez ajouter un espacement aux vues enfant à l'aide des attributs ChipGroup suivants:
- app: chipSpacing - Ajoute une distance horizontale et verticale
- app: chipSpacingHorizontal - ajoute une distance horizontale
- app: chipSpacingVertical - ajoute une distance verticale
Nous pouvons également déclarer notre Chip View enfant affiché sur une seule ligne à l'intérieur du conteneur ChipGroup en utilisant l'
app:singleLine :
Dans ce cas, vous devez encapsuler le ChipGroup dans une vue déroulante, par exemple,
HorizontalScrollView , afin que vos utilisateurs puissent faire défiler les puces affichées:
<HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content" app:singleLine="true"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="Some chip" />
Vue de la fiche matérielDans nos applications, nous avons probablement déjà utilisé le composant
CardView à un moment donné. La bibliothèque de support a maintenant un composant appelé
MaterialCardView qui nous fournit une implémentation prête à l'emploi conçue comme une conception de matériau.
CardView peut être ajouté à votre mise en page comme ceci:
<android.support.design.card.MaterialCardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp"> ... child views ... </android.support.design.card.MaterialCardView>
Vous pouvez éventuellement styliser CardView en utilisant ses deux attributs:
- app: strokeColor - La couleur qui sera utilisée pour le trait (doit être définie pour afficher le trait)
- app: strokeWidth - Largeur de trait
Avec ces deux attributs, vous pouvez également styler CardView en utilisant les attributs initialement disponibles, tels que l'
app:cardBackgroundColor , etc.
Barre d'application inférieureBottomAppBar est un nouveau composant qui nous permet d'afficher un composant de type barre d'outils au bas de notre mise en page. Cela nous permet d'afficher les composants pour l'utilisateur de manière à ce qu'il soit plus facile d'interagir avec eux qu'avec une barre d'outils standard.
Vous pouvez ajouter un
BottomAppBar à votre fichier de mise en page comme ceci:
<android.support.design.bottomappbar.BottomAppBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
Il semble que le BottomAppBar devrait avoir un menu qui lui soit assigné pour être affiché à l'écran. Cela peut être fait par programme comme suit:
bottom_app_bar.replaceMenu(R.menu.main)
En ce qui concerne le style d'un BottomAppBar, il existe plusieurs attributs que vous pouvez utiliser.
- app: fabAttached - Indique si le FAB a été attaché à BottomAppBar. Vous pouvez connecter le FAB à l'aide de app: layout_anchor dans le composant FAB que vous souhaitez connecter à l'aide de l'identificateur BottomAppBar. Si le FAB est attaché, il sera inséré dans le BottomAppBar, sinon le FAB restera au-dessus du BottomAppBar.
- app: fabAlignmentMode - Annonce la position FAB qui a été attachée à BottomAppBar. Ce peut être soit la fin:
ou centre:
- app: fabCradleVerticalOffset - Déclare le décalage vertical à utiliser pour le FAB attaché. La valeur par défaut est 0dp
La définition de la valeur dp permettra au FAB de se déplacer verticalement:
- app: backgroundTint - Utilisé pour changer la teinte de l'arrière-plan de la vue. Si vous souhaitez définir la couleur d'arrière-plan dans la vue, vous devez utiliser l'attribut
android:background . Cela garantira la stabilité de la présentation.
ConclusionÀ mon avis, ce sont des ajouts élégants à la bibliothèque de support. J'ai hâte d'utiliser des composants de style matériel dès la sortie de la boîte et je suis également heureux de trouver un cas où le BottomAppBar peut être utilisé. Je suis sûr qu'il faut un certain temps pour que la bibliothèque de support devienne stable. Comme d'habitude, j'aimerais avoir votre avis ou vos commentaires sur ces nouveaux composants!
LA FIN
Nous attendons avec impatience vos commentaires et questions que vous pouvez laisser ici ou vous pouvez aller à
Barbara lors d'une
journée portes ouvertes .