Android Cómo implementar la hoja inferior de los documentos de Material Design

79

¿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 la presión del botón de acción flotante ->

ingrese la descripción de la imagen aquí

De acuerdo, las especificaciones nunca dicen nada sobre las esquinas redondeadas, independientemente de que sea posible hacerlo, simplemente no estoy seguro de cómo hacerlo. Actualmente usando la biblioteca AppCompat y el objetivo establecido en 21.

Gracias

John Shelley
fuente
El enlace está roto. Nuevo enlace material.io/design/components/sheets-bottom.html#usage
Ray Li

Respuestas:

66

Editar

El BottomSheetahora es parte del android-support-library. Vea la respuesta de John Shelleys .


Desafortunadamente, actualmente no hay una forma "oficial" de cómo hacer esto (al menos ninguna que yo sepa).
Afortunadamente, hay una biblioteca llamada "BottomSheet" (clic) que imita la apariencia del BottomSheety es compatible con Android 2.1 y versiones 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 estándar /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 salida se ve así:

imagen de la hoja inferior

Lo cual, creo, se acerca bastante al original. Si no está satisfecho con los colores, puede personalizarlo; vea esto (haga clic) .

contrarrestar
fuente
Auge. ¡Esto es exactamente lo que estoy buscando! ¡Lo intentaré esta noche!
John Shelley
1
¡Esto es genial, gracias por compartirlo! ¿Qué sucede si desea mostrar todas las opciones que aparecerían en una intención de compartir? Se generarían dinámicamente en función de las aplicaciones instaladas en el dispositivo. ¿Alguna idea sobre cómo se puede lograr?
Gato
1
@Cat Bueno, básicamente, solo necesita obtener una lista de todas las aplicaciones que pueden manejar la intención (vea esta StackO-Question, por ejemplo) y agregarlas al adaptador que "alimenta" la hoja inferior. También puede ver la muestra oficial de la biblioteca que hace exactamente lo que está solicitando. ( Haga clic en - Línea 153 - 179 ).
reverso
eso funcionó, gracias @reVerse! Terminé reutilizando el código en el getShareActionsmétodo para obtener todas las opciones posibles para compartir. Por cierto, también es útil llamar .limit(R.integer.num_share_actions)al constructor a menos que desee que la hoja cubra toda la pantalla
Cat
1
@JohnShelley Está bien, absolutamente. También recomendaría optar por la "solución oficial", aunque es realmente limitada en este momento, pero al menos Google sentó las bases finalmente. ;)
reverso
65

¡Responder a mi propia pregunta para que los desarrolladores sepan que la nueva biblioteca de soporte proporciona esto finalmente! ¡Saluden al todopoderoso Google!

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

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

John Shelley
fuente
Gracias por publicar. Creo que esta debería ser la respuesta "correcta" ahora :)
vine'th
@androiddeveloper hecho. considerando que ahora es algo específico de soporte, creo que los usuarios tendrán mejor suerte buscando esos ejemplos. Cuando hice la pregunta originalmente, no se proporcionó en la biblioteca de soporte. Si la pregunta fuera "Cómo implementar la vista de hoja inferior de la biblioteca de soporte", también habría proporcionado una respuesta más detallada :)
John Shelley
@JohnShelley ¿No necesitas utilizar también algunas cosas XML? ¿Es posible configurar la vista de la hoja inferior / colapsada (o como se llame cuando está en la parte inferior) para tener una vista de contenido envolvente, y cuando está expandida, para que esté en pantalla completa?
desarrollador de Android
4
Creo que hay muchas personas que se preguntan cómo usar la nueva API de soporte de Google, y Vipul Shah tiene un excelente enlace de YouTube que puede ayudarlo a comprender cómo usarlo, consulte el enlace de YouTube en stackoverflow.com/a/35731959/1053037
minh truong
la pregunta sigue siendo: cómo implementar el menú de la hoja inferior. ¿Dónde están los elementos del menú en el ejemplo anterior ??????? Ya sabes, los elementos del menú en los que haces clic ...
ekashking
8

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.

mcorrado
fuente
Sí, el xml es exactamente como se veía mi fragmento. ¿No te está funcionando?
mcorrado
La altura de la mirada predeterminada es -1 (¡AUTO!), No 0.
Zordid
1
Si va a utilizar AndroidX, tenga en cuenta el cambio de nombre del paquete:com.google.android.material.bottomsheet.BottomSheetBehavior
Ultimo_m
¿Dónde están los elementos del menú ?????????????????? (todo el punto del menú de la hoja inferior)
ekashking
7

Ahora puede usar la BottomSheetBehaviorAPI oficial 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");

Consulte el tutorial de youtube de Android BottomSheet para comprenderlo.

Vipul
fuente
Hola Vipul, gracias por el enlace. Aunque tengo una pregunta. ¿Es posible establecer un punto de anclaje para la sábana bajera?
koraxis
Enlace de youtube impresionante. ¿Tiene el código fuente en un repositorio público en alguna parte?
John Shelley
genial, me salvaste el día, creo que esta respuesta debería aceptarse
FaisalAhmed
5

Estas son algunas de las otras opciones:

  • Hay uno disponible en Flipboard , sin embargo, la actividad de incrustación debe modificarse para que funcione la hoja inferior.
  • Hoja inferior de tutti-ch : se ha extraído de ResolverActivity de Android Repo y no es necesario modificar la actividad de lanzamiento.
viña
fuente