Android Comment mettre en œuvre le Bas de la Feuille à partir de la Conception de Matériel docs

Comment voulez-vous mettre en œuvre la feuille inférieure specficiation?
http://www.google.com/design/spec/components/bottom-sheets.html

La nouvelle mise à jour pour Google Drive montre cela avec le Floating Action appuyez sur le Bouton ->

Accordé les spécifications de ne jamais rien dire à propos de coins arrondis, peu importe, il est possible de le faire, seulement vous ne savez pas comment aller à ce sujet. Actuellement à l'aide de la AppCompat de la bibliothèque et de l'objectif fixé à 21 ans.

Grâce

Le lien est cassé. Nouveau lien matériel.io/design/composants/fiches-bas.html#utilisation

InformationsquelleAutor John Shelley | 2014-11-03

63

Modifier

La BottomSheet fait maintenant partie de la android-support-library. Voir John Shelley réponse.

Malheureusement il n'y a actuellement aucun "officiel" de façon à nous de le faire (du moins pas que je sache).

Heureusement, il y a une bibliothèque appelée "BottomSheet" (cliquez) qui imite l'apparence et la sensation de la BottomSheet et prend en charge Android 2.1 et plus.

Dans le cas de l'application google Drive, voici comment le code pourrait ressembler à 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 (en fait un standard /res/menu/*.ressource 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>
```
De sortie ressemble à ceci:

Qui, je pense, est assez proche de l'original. Si vous n'êtes pas heureux avec les couleurs que vous pouvez personnaliser - voir ceci (cliquez).
- Boom. C'est exactement ce que je cherche! Je vais faire un essai ce soir!
- c'est super, merci pour le partage! Si vous souhaitez afficher toutes les options qui se présentent dans une intention? Ils seraient générées dynamiquement en s'appuyant sur les applications installées sur l'appareil. Toute réflexion sur la façon dont cela peut être accompli?
- Eh bien, fondamentalement, vous avez juste besoin d'obtenir une Liste de toutes les applications qui gèrent l'intention (voir cette StackO-Question par exemple) et de les ajouter à la carte qui "nourrit" le BottomSheet. Vous pouvez également voir l'échantillon officiel de la lib qui fait exactement ce que vous demandez. (Cliquez - Ligne 153 - 179).
- cela a fonctionné, merci @inverse! J'ai fini de réutiliser le code dans le getShareActions méthode pour obtenir tous les possibles options de partage. Btw, également utile pour appeler .limit(R.integer.num_share_actions) sur le constructeur, sauf si vous voulez la feuille pour couvrir la totalité de l'écran
- Cette bibliothèque est tellement génial !
- Je tiens à mettre en œuvre en Bas de la feuille avec un fab icône comme indiqué dans android matières spécifications. (bit.ly/1O8EQrK). Est-il possible avec cette bibliothèque?
- Je ne le pense pas. La capture d'écran que vous avez posté ressemble plus à un Fragment avec une vue personnalisée qui se traduit sur l'écran d'un menu qui cette bibliothèque fondamentalement essaie de répliquer.
- ok. une idée de comment mettre en œuvre ce de toute façon?
- Jetez un oeil à la AndroidSlidingUpPanel de la bibliothèque.
- J'ai fini par accepter l'assistance Google Bibliothèque comme la réponse correcte juste pour que nous ne confondons pas le tout de nouveaux visiteurs sur cette question. La réponse que vous avez posté est certainement encore valide si! J'espère que c'est ok.
- C'est tout droit, tout à fait. Je recommande aussi d'aller pour la "solution officielle" si c'est vraiment limité pour l'instant mais au moins, Google a jeté les bases, enfin. 😉
InformationsquelleAutor reVerse
62

Pour répondre à ma propre question afin que les développeurs savent que la nouvelle bibliothèque de prise en charge fournit ce enfin!!! Je salue tout le tout puissant Google!

Un exemple de la Android du Développeur Blog:
```
//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  
  }  
});
```
@reVerse la réponse ci-dessus est toujours une option valable, mais son bon de savoir qu'il y a une norme que Google prend en charge trop.
- Merci pour l'affichage. Je pense que ce doit être la "bonne" réponse maintenant 🙂
- Pouvez-vous s'il vous plaît montrer un peu de code pour cela?
- fait. compte tenu de son un soutien spécifique de la chose maintenant, je sens que les utilisateurs auront plus de chance à la recherche de ces exemples. Quand j'ai posé la question à l'origine il n'était pas prévu dans le soutien lib. Si la question était: "Comment mettre en œuvre le Soutien de la Bibliothèque du bas de la feuille de vue" alors je ne l'ai plus en profondeur réponse aussi 🙂
- N'avez-vous pas besoin d'utiliser du XML trucs trop? Est-il possible de placer le bas de la feuille de peek/effondré (ou quelque chose comme ça quand il est en bas) pour avoir un résumé du contenu de la vue , et quand il est étendu, pour être en plein écran?
- Je pense qu'il y a beaucoup de gens qui se demandent comment utiliser Google nouveau support de l'API, et Vipul'Shah a un grand lien YouTube qui peuvent vous aider à comprendre comment l'utiliser, veuillez consulter le lien YouTube dans stackoverflow.com/a/35731959/1053037
InformationsquelleAutor John Shelley
7

Vous pouvez maintenant utiliser Officiel BottomSheetBehavior API d'android support library 23.2.

Ci-dessous est un exemple de code snippet
```
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 à Android BottomSheet youtube tutoriel pour obtenir la compréhension sur elle.
- Salut Vipul' , merci pour le lien. J'ai une question cependant. Est-il possible de définir un point d'ancrage pour le bas de la feuille?
- Génial le lien youtube. Avez-vous le code source dans un établissement public de pensions de quelque part?
- grande, vous avez sauvé ma journée, je pense que cela devrait être accepté de répondre à
InformationsquelleAutor Vipul Shah

Suivant le post de blog: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

Mon xml 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 de 0, donc si vous n'en avez pas, vous ne serez pas en mesure de voir votre point de vue.

Avez-vous testé il fonctionne?
Oui, le xml est exactement la façon dont mon fragment regardé. N'est-il pas de travail pour vous?
La valeur par défaut peek hauteur est de -1 (AUTO!), pas 0.
Si vous utilisez AndroidX garder à l'esprit le paquet changement de nom: com.google.android.material.bottomsheet.BottomSheetBehavior

InformationsquelleAutor mcorrado

5

Je voudrais aller avec des angles droits comme il est dans les lignes directrices. Comme pour la mise en œuvre - peut-être qu'il est préférable d'utiliser l'idée de ce projet: https://github.com/umano/AndroidSlidingUpPanel

Je pense que vous pouvez l'utiliser comme il est ou prendre l'idée pour la mise en œuvre.
Un autre excellent article sur la façon de mettre en œuvre similaire panneau coulissant peut être trouvé ici:
http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

InformationsquelleAutor Zh. Atanasov
5

Ici sont quelques-uns des autres options :
- Il est disponible à partir de Flipboard, cependant, l'intégration de l'activité
  doit être modifié pour le bottomsheet de travail.
- tutti-ch bottomsheet : Cela a été extrait à partir de Android Pensions du ResolverActivity et le lancement de l'activité n'a pas besoin d'être modifié.
InformationsquelleAutor vine'th
0

Google a récemment publié Android Support Library 23.2 officiellement apporte Fond de feuilles de Android d'aide à la Conception de la Bibliothèque.
- Est-il un exemple de/tutoriel pour cela?
InformationsquelleAutor Mehlyfication

Vous devez vous connecter pour publier un commentaire.

Modifier