Jetpack escribió FadingEdge 구현하기.Creando FadingEdgeLazyColumn Composable | Por jisungbin | Mar 2022
Crear FadingEdgeLazyColumn componible
FadingEdge es una tecnología muy ingeniosa. Tomemos como ejemplo la aplicación Toss.
Echemos un vistazo al BottomCTAButton en la parte inferior. FadingEdge se aplica en la parte superior. Pero después de verlo muchas veces, naturalmente falla. Subí una vista de degradado de transparente a blanco Se puede deducir que por lo tanto, también utilizaremos este enfoque para implementarlo con Jetpack Compose.
Para considerar la reutilización, tomamos todos los elementos como parámetros. Primero, cree una clase de datos que contenga la dirección, la altura y el color del degradado. A continuación, creé un titular de valor predeterminado.
A continuación, necesitamos crear un diseño. FadingEdge se puede colocar en la parte superior e inferior, LazyColumn debe colocarse entre cada FadingEdge. Entonces, para hacer esto más fácil, creemos un diseño usando ConstraintLayout.
![4.1 UI ahora disponible para Samsung Galaxy S21, Z Fold3 y Flip3 [Attualmente disponibile solo in Corea e Canada] | Por Smart Reports | Marzo de 2022](https://sistemaandroid.info/wp-content/uploads/2022/03/1647535437_41-UI-ahora-disponible-para-Samsung-Galaxy-S21-Z-Fold3-220x150.jpg "4.1 UI ahora disponible para Samsung Galaxy S21, Z Fold3 y Flip3 [Attualmente disponibile solo in Corea e Canada] | Por Smart Reports | Marzo de 2022 6")
Lo acabo de enmarcar muy simple. Primero creemos topGradientRef. Como se mencionó anteriormente, vamos a crear un GradientView por sí mismo para su reutilización. Crearemos una Vista usando AndroidView y llenaremos el fondo de la Vista con un degradado.
El parámetro visible se creó porque no hay garantía de que se aplicará FadingEdge arriba y abajo FadingEdge. Para el tamaño de la vista de anclaje de ConstraintLayout, manéjelo como View.INVISIBLE en lugar de View.GONE. Ahora utilícelo para completar topGradientRef y bottomGradientRef.
FadingEdge debe estar por encima de LazyColumn, así que configuré zIndex en 2. Finalmente, implementemos LazyColumn. La implementación de LazyColumn se realiza a través de la configuración del modificador.
Configuré zIndex en 1 para que LazyColumn pueda estar debajo de FadingEdge y la posición se establezca entre los FadingEdges superior e inferior. El código completo así hecho está abajo.
El resultado será este.
Traté de aplicar FadingEdge solo en la parte superior.
Cuando cambié el método de implementación, fue más fácil de implementar de lo que pensaba.
