Generalidades

Estilo de procesamiento de la tabla inferior de IOS en Android | Via Blasius Neri | Junio ​​de 2021

Brasius Neri
Foto de Alexander Schimmeck en Unsplash

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 Para combinar formas

<!--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.

Película negativa con asa interior
Película negativa con asa exterior

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 resolver este problema, debe separar los estilos en la parte superior e inferior del SDK 23, y no utilizará ningún controlador. Por lo tanto, solo necesita crear una nueva forma para SDK 23 y copiarla desde la carpeta dibujable.

Cree un nuevo elemento de diseño para el SDK 23 anterior

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>

LEER  Google lo llama el término de búsqueda más popular para Bing

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba