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

La nueva actualización a Google Drive muestra esto en el marco de Acción de presionar el Botón ->

Android Cómo implementar la parte Inferior de la Hoja de Diseño de Material docs

Concedido las especificaciones nunca dicen nada sobre las esquinas redondeadas, independientemente de que es posible hacer, seguro de cómo ir sobre ella. En la actualidad el uso de la AppCompat de la biblioteca y el objetivo fijado para el 21.

Gracias

InformationsquelleAutor John Shelley | 2014-11-03

7 Comentarios

  1. 63

    Editar

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


    Lamentablemente, actualmente no hay ninguna «oficial» sobre cómo hacer esto (al menos ninguno que yo sepa).

    Por suerte hay una librería llamada «BottomSheet» (clic) que imita la apariencia y la sensación de la BottomSheet y es compatible con Android 2.1 y hasta.

    En el caso de la aplicación google Drive, he aquí cómo el código sería 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 estándar /res/menu/*.recurso 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 salida se parece a esto:

    Android Cómo implementar la parte Inferior de la Hoja de Diseño de Material docs

    Que, creo, viene muy cerca de la original. Si no estás contento con los colores que puede personalizar – ver esta (clic).

    • Boom. Esto es exactamente lo que estoy buscando! Voy a probarlo esta noche!
    • esto es genial, gracias por compartir! Lo que si desea mostrar todas las opciones que se muestran en una parte de la intención? Serían generadas dinámicamente en función de las aplicaciones instaladas en el dispositivo. Cualquier comentario sobre la manera en que puede lograrse?
    • Bueno, básicamente, usted sólo tiene que obtener una Lista de todas las aplicaciones que pueden manejar la intención (ver este StackO-Pregunta por ejemplo) y agregarlos a la del adaptador que se «alimenta» el BottomSheet. También se puede ver la muestra oficial de la lib que hace exactamente lo que usted está solicitando. (haga Clic en la Línea de 153 179).
    • que trabajado, gracias @inversa! Terminé de reutilizar el código en el getShareActions método para obtener todas las posibles opciones para compartir. Por cierto, también es útil para llamar .limit(R.integer.num_share_actions) en el generador a menos que usted desea que la hoja para cubrir toda la pantalla
    • Esta biblioteca es tan impresionante !
    • Quiero implementar la parte Inferior de la hoja con un fab icono como se da en android material de las especificaciones. (bit.ly/1O8EQrK). Es posible que con esta biblioteca?
    • Yo no lo creo. La captura de pantalla que has publicado se parece más a un Fragmento con una vista personalizada que se traduce en la pantalla de un menú que esta biblioteca básicamente intenta replicar.
    • ok. alguna idea de cómo implementar esto de todos modos?
    • Eche un vistazo a la AndroidSlidingUpPanel de la biblioteca.
    • Acabé aceptando el Google de la Biblioteca de Soporte como la respuesta correcta sólo para no confundir a cualquiera de los nuevos visitantes a esta pregunta. La respuesta que has publicado es sin duda sigue siendo válida, aunque! Espero que eso es bueno.
    • Eso es todo derecho, absolutamente. También me gustaría recomendar que va para la «solución oficial» aunque es muy limitada en el momento, pero al menos Google puso el fundamento, en fin. 😉

  2. 62

    Responder a mi propia pregunta, para que los desarrolladores saben que la nueva biblioteca de soporte proporciona esta por fin! All hail el todo poderoso Google!

    Un ejemplo de la Los Desarrolladores de Android del 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  
      }  
    });

    @inversa del respuesta de arriba es todavía una opción válida, pero es bonito saber que hay una norma que Google apoya demasiado.

    • Gracias por publicar. Creo que esta debe ser la respuesta «Correcta» ahora 🙂
    • Por favor, puedes mostrar algo de código para esto?
    • hecho. teniendo en cuenta su soporte específico cosa ahora, siento que los usuarios tendrán mejor suerte en la búsqueda de esos ejemplos. Cuando le pregunté a la pregunta originalmente no fue proporcionada en el apoyo lib. Si la pregunta es «Cómo implementar la Biblioteca de Soporte inferior de la hoja de la vista» entonces yo le he proporcionado un análisis más en profundidad la respuesta también 🙂
    • No es necesario utilizar algún XML cosas también? Es posible que la parte inferior de la hoja de peek/colapsado (o como se llame acerca de cuando es en la parte inferior) para tener una envoltura de vista del contenido , y cuando se expande, a pantalla completa?
    • Yo creo que hay muchas personas preguntando cómo utilizar Google el nuevo soporte de la API, y Vipul Shah tiene una gran enlace de YouTube que pueden ayudar a entender cómo usarlo, por favor, consulte el enlace de YouTube en stackoverflow.com/a/35731959/1053037
  3. 7

    Ahora puede utilizar Oficial BottomSheetBehavior de la API de android support library 23.2.

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

    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 Android BottomSheet youtube tutorial para obtener la comprensión sobre el mismo.

    • Hola Vipul , gracias por el enlace. Tengo una pregunta, sin embargo. Es posible establecer un punto de anclaje de la parte inferior de la hoja?
    • Impresionante el enlace de youtube. ¿Tienes el código fuente en un público repo en algún lugar?
    • grande, usted salvó mi día, yo creo que esto debe ser aceptado respuesta
  4. 7

    Siguientes a la entrada en el blog: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

    Mi xml terminó pareciéndose a esto:

    <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, así que si no lo es, usted no será capaz de ver su punto de vista.

    • ¿La prueba de que funciona?
    • Sí, el xml es exactamente la forma en que mi fragmento miró. Es que no funciona para usted?
    • El valor predeterminado peek altura es de -1 (AUTO!), no 0.
    • Si va a utilizar AndroidX mantener en mente el paquete de cambio de nombre de: com.google.android.material.bottomsheet.BottomSheetBehavior
  5. 5

    Aquí están algunas de las otras opciones :

    • Hay uno disponible desde Flipboard, sin embargo la incorporación de la actividad
      necesita ser modificado por el bottomsheet a trabajar.
    • tutti-ch bottomsheet : Este ha sido extraído de Android Repo del ResolverActivity y la puesta en marcha de la actividad no necesita ser modificado.

Dejar respuesta

Please enter your comment!
Please enter your name here