Android Comment implémenter la feuille inférieure de la documentation Material Design
Comment implémentez-vous la spécification de la feuille de fond? http://www.google.com/design/spec/components/bottom-sheets.html
La nouvelle mise à jour de Google Drive montre cela en appuyant sur le bouton d'action flottante ->
Certes, les spécifications ne disent jamais rien au sujet des coins arrondis, peu importe ce qu'il est possible de faire, mais ne savent pas comment s'y prendre. Actuellement, la bibliothèque AppCompat et la cible sont définies sur 21.
Merci
Répondant à ma propre question pour que les développeurs sachent que la nouvelle bibliothèque de support le fournit enfin! Tous saluent le tout puissant Google!
Un exemple tiré du blog du développeur Android :
// The View with the BottomSheetBehavior View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet); BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet); behavior.setBottomSheetCallback(new BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { // React to state change } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { // React to dragging events } });
answer above de @ reVerse [] est toujours une option valide, mais il est agréable de savoir qu'il existe une norme prise en charge par Google.
Modifier
La BottomSheet fait maintenant partie du Android-support-library. Voir Réponse de John Shelleys .
Malheureusement, il n'y a actuellement aucun moyen "officiel" de procéder (au moins aucun que je sache).
Heureusement, il existe une bibliothèque appelée "BottomSheet" (clic) qui imite l'apparence de la BottomSheet et prend en charge Android 2.1 et les versions ultérieures.
Dans le cas de l'application Drive, voici à quoi ressemblerait le code avec cette bibliothèque:
new BottomSheet.Builder(this, R.style.BottomSheet_Dialog)
.title("New")
.grid() // <-- important part
.sheet(R.menu.menu_bottom_sheet)
.listener(new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO
}
}).show();
menu_bottom_sheet (essentiellement une ressource standard /res/menu/*.xml)
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:id="@+id/folder"
Android:title="Folder"
Android:icon="@drawable/ic_action_folder" />
<item
Android:id="@+id/upload"
Android:title="Upload"
Android:icon="@drawable/ic_action_file_upload" />
<item
Android:id="@+id/scan"
Android:title="Scan"
Android:icon="@drawable/ic_action_camera_alt" />
</menu>
La sortie ressemble à ceci:
Ce qui, je pense, se rapproche beaucoup de l'original. Si vous n'êtes pas satisfait des couleurs, vous pouvez le personnaliser - voir ceci (clic) .
Après le blog: http://Android-developers.blogspot.com/2016/02/Android-support-library-232.html
Mon xml a fini par ressembler à ceci:
<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/coordinator_layout"
xmlns:app="http://schemas.Android.com/apk/res-auto">
<LinearLayout
Android:id="@+id/bottom_sheet"
Android:layout_width="match_parent"
Android:layout_height="100dp"
Android:orientation="horizontal"
app:layout_behavior="Android.support.design.widget.BottomSheetBehavior">
<ImageView
Android:src="@Android:drawable/ic_input_add"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" />
</LinearLayout>
</Android.support.design.widget.CoordinatorLayout>
Et dans mon onCreateView de mon fragment:
coordinatorLayout = (CoordinatorLayout)v.findViewById(R.id.coordinator_layout);
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setPeekHeight(100);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
// React to state change
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// React to dragging events
}
});
La valeur par défaut de setPeekHeight est 0. Par conséquent, si vous ne le définissez pas, vous ne pourrez pas voir votre vue.
Vous pouvez maintenant utiliser l'API BottomSheetBehavior officielle de la bibliothèque de support Android 23.2.
Ci-dessous, un extrait de code
bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheet));
case R.id.expandBottomSheetButton:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
break;
case R.id.collapseBottomSheetButton:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
case R.id.hideBottomSheetButton:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
break;
case R.id.showBottomSheetDialogButton:
new MyBottomSheetDialogFragment().show(getSupportFragmentManager(), "sample");
Veuillez vous référer à tutoriel youtube Android BottomSheet pour bien comprendre.
Voici certaines des autres options:
- Il en existe un disponible à partir de Flipboard , cependant, l’activité d’intégration Doit être modifiée pour que la feuille de fond fonctionne.
- tutti-ch's bottomsheet : Ceci a été extrait de ResolverActivity d'Android Repo et l'activité de lancement n'a pas besoin d'être modifiée.
Je voudrais aller avec des coins droits comme c'est dans les lignes directrices. En ce qui concerne la mise en œuvre - il est peut-être préférable d'utiliser l'idée de ce projet: https://github.com/umano/AndroidSlidingUpPanel
Je pense que vous pouvez l’utiliser tel quel ou prendre l’idée de l’implémentation… .. Un autre excellent article sur la mise en œuvre d’un panneau coulissant similaire est disponible ici: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/
Google a récemment publié Android Support Library 23.2 / qui apporte officiellement Bottom Sheet à la bibliothèque de support Android Design.