Pregunta Android Cómo implementar la hoja inferior desde los documentos de diseño de materiales


¿Cómo se implementa la especificación de la hoja inferior? http://www.google.com/design/spec/components/bottom-sheets.html

La nueva actualización de Google Drive muestra esto con el botón de acción flotante presione ->

enter image description here

De acuerdo, las especificaciones nunca dicen nada sobre las esquinas redondeadas, independientemente de lo que sea posible, simplemente no están seguros de cómo hacerlo. Actualmente, usa la biblioteca de AppCompat y el objetivo establecido en 21.

Gracias


73
2017-11-03 19:19


origen


Respuestas:


Editar

los BottomSheet ahora es parte de la android-support-library. Ver La respuesta de John Shelleys.


Lamentablemente, actualmente no existe una forma "oficial" de cómo hacer esto (al menos ninguna de la que tenga conocimiento).
Afortunadamente hay una biblioteca llamada "BottomSheet" (click) que imita la apariencia de la BottomSheet y es compatible con Android 2.1 y posteriores.

En el caso de la aplicación Drive, así es como se vería el código con esta biblioteca:

    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 (básicamente un recurso /res/menu/*.xml estándar)

<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 salida se ve así:

picture of the bottom sheet

Lo cual, creo, se acerca bastante al original. Si no está satisfecho con los colores, puede personalizarlo: mira esto (click).


63
2017-11-03 21:37



¡Respondiendo a mi propia pregunta para que los desarrolladores sepan que la nueva biblioteca de soporte ofrece esto finalmente! Todos saludan al todopoderoso Google!

Un ejemplo de Blog del desarrollador de 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  
  }  
});

@ reVerse's respuesta arriba sigue siendo una opción válida, pero es bueno saber que hay un estándar que Google también admite.


61
2018-02-24 23:03



Ahora puedes usar Official BottomSheetBehavior API de la biblioteca de soporte de Android 23.2.

A continuación se muestra un fragmento de código de muestra

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");

Por favor refiérase a Android BottomSheet tutorial de youtube para entenderlo


7
2018-03-01 19:40



Siguiendo la publicación del blog: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

Mi xml terminó luciendo así:

<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>

Y en mi onCreateView de mi fragmento:

    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
        }
    });

El valor predeterminado de setPeekHeight es 0, por lo que si no lo configura, no podrá ver su vista.


7
2018-03-24 00:14



Me gustaría ir con una esquina recta, ya que está en las directrices. En cuanto a la implementación, tal vez sea mejor usar la idea de este proyecto: https://github.com/umano/AndroidSlidingUpPanel

Creo que podría usarlo tal como está o tomar la idea para la implementación. Otro gran artículo sobre cómo implementar un panel deslizante similar se puede encontrar aquí: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/


5
2017-11-03 20:35



Estas son algunas de las otras opciones:

  • Hay uno disponible de Flipboard, sin embargo, la actividad de incrustación necesita ser modificado para que funcione la hoja inferior.
  • tutti-ch's bajera : Esto se ha extraído de ResolverActivity de Android Repo y no es necesario modificar la actividad de inicio.

5
2017-09-04 12:44



Google lanzó recientemente Biblioteca de soporte de Android 23.2que trae oficialmente Hojas inferiores a la Biblioteca de soporte de diseño de Android.


0
2018-02-25 13:20