¿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 ->
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
Respuestas:
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í:
Lo cual, creo, se acerca bastante al original. Si no está satisfecho con los colores, puede personalizarlo; vea esto (haga clic) .
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
¡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.
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.
com.google.android.material.bottomsheet.BottomSheetBehavior
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.
Yo iría con esquinas rectas como está en las pautas. 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/
Estas son algunas de las otras opciones:
Google lanzó recientemente la biblioteca de soporte de Android 23.2, que oficialmente trae las hojas inferiores a la biblioteca de soporte de diseño de Android.