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


¿Cómo implementar 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 - >

introduzca la descripción de la imagen aquí

Concedido las especificaciones nunca dicen nada sobre esquinas redondeadas, independientemente de que sea posible hacerlo, solo inseguro de cómo hacerlo. Actualmente usando la biblioteca AppCompat y el objetivo establecido en 21.

Gracias

Author: John Shelley, 2014-11-03

7 answers

Editar

El BottomSheet es ahora parte del android-support-library. Ver 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" (click) que imita la apariencia de BottomSheet y es compatible con Android 2.1 y superior.

En el caso de la aplicación Drive, así es como se vería el código con esto 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 /res/menu/*estándar.xml resource)

<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

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

 63
Author: reVerse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:23

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

Un ejemplo del 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 respuesta anterior sigue siendo una opción válida, pero es bueno saber que hay un estándar que Google soporta también.

 61
Author: John Shelley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:47

Ahora puedes usar la API oficial BottomSheetBehavior 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, consulte Android BottomSheet youtube tutorial para obtener comprensión sobre él.

 7
Author: Vipul Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-01 19:40:27

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

Mi xml terminó pareciendo 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
Author: mcorrado,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-22 03:34:11

Yo iría con esquinas rectas como 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 como es o tomar la idea para la implementación. Otro gran artículo sobre cómo implementar panel deslizante similar se puede encontrar aquí: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend /

 5
Author: Zh. Atanasov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-03 20:35:45

Estas son algunas de las otras opciones:

  • Hay uno disponible desde Flipboard , sin embargo, la actividad de incrustación necesita ser modificado para que la hoja inferior funcione.
  • tutti-ch's bottomsheet : Esto se ha extraído de la ResolverActivity de Android Repo y la actividad de lanzamiento no necesita ser modificada.
 5
Author: vine'th,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-12 05:23:33

Google lanzó recientemente Android Support Library 23.2 que trae oficialmente Bottom sheets a la Biblioteca de Soporte de Diseño de Android.

 0
Author: Mehlyfication,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-25 13:20:59