Estilo de procesamiento de la tabla inferior de IOS en Android | Via Blasius Neri | Junio de 2021
Hola, geeks de Android:
En un día laboral normal, un diseñador se acercó a mí y me mostró un nuevo componente inferior, que parece un diseño nativo en iOS. Es una sábana bajera con un asa. Llevar el diseño nativo a otras plataformas a veces no es una tarea fácil, así que lo primero que hice fue estudiar varias aplicaciones en iOS y Android. A partir de esa investigación, encontré una solución y me gustaría compartirla en este artículo.Supongo que todos ya saben cómo usar formas y estilos inferiores en Android
anchoelectrónico Se crearán dos tipos de estilos de página inferior, tiene un tirador en el interior y el otro tiene un tirador en el exterior. El primer paso es crear un diseño para el modal, establecerá el estilo, por lo que siempre que necesite crear el formulario inferior, solo tendrá que configurar el estilo.
<!--shape_rounded_top_bottom_sheet.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
<solid android:color="#FFFFFF" />
</shape>A continuación, cree un objeto dibujable para la manija. Si las formas de los dos controladores son similares, puede crearlas una vez, pero con diferentes formas, como diferentes longitudes, debe crear dos formas. En este artículo, crearé dos formas diferentes. La forma del mango exterior es más larga.
<!--shape_bottom_sheet_handle_inside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#BDBDBD" />
<size
android:width="64dp"
android:height="4dp" />
</shape>Y forma de mango
<!--shape_bottom_sheet_handle_outside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#FFFFFF" />
<size
android:width="128dp"
android:height="4dp" />
</shape>Una vez que todas las formas estén listas, es hora de combinar las formas.Utilizará forma y
<!--shape_rounded_top_bottom_sheet_with_handle_inside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_rounded_top_bottom_sheet" />
<item
android:drawable="@drawable/shape_bottom_sheet_handle_inside"
android:gravity="center|top"
android:top="8dp" />
</layer-list>Y la forma con el asa exterior
<!--shape_rounded_top_bottom_sheet_with_handle_outside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_bottom_sheet_handle_outside"
android:gravity="center|top"
android:bottom="8dp" /><item android:drawable="@drawable/shape_rounded_top_bottom_sheet"
android:top="8dp"/>
</layer-list>
Dado que planeamos crear estilos para configurar la hoja inferior más fácilmente, creemos un nuevo estilo para ambos.
<!--style.xml-->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BottomSheetModalHandleInside" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/shape_rounded_top_bottom_sheet_with_handle_inside</item>
<item name="android:padding">16dp</item>
</style><style name="BottomSheetDialogHandleInside" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/BottomSheetModalHandleInside</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowSoftInputMode">adjustResize</item>
</style>
<style name="BottomSheetModalHandleOutside" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/shape_rounded_top_bottom_sheet_with_handle_outside</item>
<item name="android:padding">16dp</item>
</style>
<style name="BottomSheetDialogHandleOutside" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/BottomSheetModalHandleOutside</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowSoftInputMode">adjustResize</item>
</style>
</resources>
En el último paso, solo necesitamos crear la tabla inferior y pasarle el estilo en el segundo parámetro al construirla.
private fun showBottomSheetHandleInside()
BottomSheetDialog(this, R.style.BottomSheetDialogHandleInside).also
it.setContentView(R.layout.layout_bottom_sheet)
it.show()
private fun showBottomSheetHandleOutside()
BottomSheetDialog(this, R.style.BottomSheetDialogHandleOutside).also
it.setContentView(R.layout.layout_bottom_sheet)
it.show()
Cuando se llama al método anterior, la página inferior decorada con tiradores se mostrará en la parte superior de la página inferior, como se muestra en las dos imágenes siguientes.
La solución anterior solo se aplica al SDK de Android por encima de 23. Cuando se muestra debajo, el identificador no se mostrará correctamente, porque Android por debajo de 23 no es compatible
Para los archivos shape_unded_top_bottom_sheet_with_handle_inside.xml y shape_unded_top_bottom_sheet_with_handle_outside.xml, simplemente quite el identificador de la forma de esta manera.
<!--shape_rounded_top_bottom_sheet_with_handle_inside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/shape_rounded_top_bottom_sheet"
android:top="8dp" />
</layer-list><!--shape_rounded_top_bottom_sheet_with_handle_outside.xml-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/shape_rounded_top_bottom_sheet"
android:top="8dp" />
</layer-list>
