MiReal.me MiReal.me – Tu blog tecnológico con la más actualizada información
Introducción
Skeleton Loading AG es una biblioteca que proporciona una manera fácil de incluir la carga de esqueletos.
Instalar
Paso 1 . Agregue el repositorio JitPack a su archivo de compilación, agréguelo en su raíz build.gradle al final de los repositorios:
allprojects {
repositorio {
...
maven {url & # 39; https: //jitpack.io'}
}
}
Paso 2. Agregar dependencias
{
implementación & # 39; com.github.AgnaldoNP: AGSkeletonLoading: 1.0 & # 39;
}
Uso
Puede usar la carga de esqueleto al reemplazar una vista común o ver el diseño del grupo correspondiente en esta biblioteca. A continuación se muestra un ejemplo usando SkeletonRelativeLayout
< allobs .loading.skeleton.layout.SkeletonRelativeLayout
Android : id = " @ + id / skeletonLayout " [19659014] Android : layout_width = [19659013] ] " match_parent "
Android : layout_height = " wrap_content "
Android : layout_marginBottom = " 20dp " [19659014] aplicación [19659011]: [19659011] clipToText = " falso " [19659030] >>
< ImageView
Android : id = " @ + id / img001 " [19659030]
Android : layout_width = " 50dp " [19659030]
Android : layout_height = " 50dp " [19659030]
android : src = " @ drawable / ic_email " />
< TextView
Android : id = " @ + id / text001 " [19659030]
Android : layout_width = " wrap_content "
Android : layout_height = " wrap_content " [19659025] Android : layout_alignParentEnd = " verdadero "
Android : layout_marginStart = " 8DP "[19659030]
Android : layout_marginTop = " 2DP "[19659030]
Android : layout_toEndOf = " @ + id / img001 " [19659030]
android : texto = " Lorem Ipsum es simplemente un texto ficticio " />
< TextView
Android : layout_width = " wrap_content "
Android : layout_height = " wrap_content "
Android : layout_marginStart = " 8DP " [19659030]
Android [19659011]: layout_marginTop = " 8DP " [19659030]
Android : layout_below = " @ + id / text001 "[19659030]
Android : layout_toEndOf = " @ + id / img001 "[19659030]
android : texto = " Texto de Lorem Ipsum " />
</ allobs .loading.skeleton.layout.SkeletonRelativeLayout>
Cualquier diseño de esqueleto, View o ViewGroup, proporcionado por esta biblioteca tiene los siguientes métodos para comenzar a cargar, detener la carga o verificar el estado la carga
skeletonLayout.isLoading ()
skeletonLayout.startLoading ()
skeletonLayout.stopLoading ()
Disponible LOADING esqueleto [19659113] SkeletonRecyclerView [19659114] SkeletonListView [19659114] SkeletonLinearLayout [19659114] SkeletonRelativeLayout [19659114] SkeletonFrameLayout [19659114] SkeletonGridLayout [19659114] SkeletonGridLayout [19659114] SkeletonGridLayout [19659114] SkeletonGridLayout [19659114] SkeletonGridLayout [19659114]
| Propiedad | Valor / Tipo | Valor predeterminado | ||||||
|---|---|---|---|---|---|---|---|---|
| autoStart | boolean | true | ||||||
| enableDevelopPreview | boolean | boolean | boolean | true | true | true | dibujable | verdadero |
| skeletonColor | color | # E6E6E6 | ||||||
| shimmerStrokeWidth | tamaño | 30dp | ||||||
| shimmerBlurWidth | [tamaño] 19659111] floar | 0.2 | ||||||
| skeletonCornerRadius | tamaño | 5dp | ||||||
| duración | enumeración – shortC ciclo medioCiclo largo [19659128] medioCiclo [19659130] customDuration [19659128] entero [19659128] – [19659130] skeletonViewHolderItem [19659128] – [19659130] esqueletoViewHolderAmount [19659128]84 [45] 1990] 45990] [19659128] [19659128][1945entrepuestos] booleano [19659128] falso |
Se puede hacer referencia a todas estas propiedades en cualquier diseño de esqueleto pero no puede tener ningún efecto dependiendo del diseño utilizado
Propiedades comunes
Las siguientes propiedades tienen efecto para todas las vistas de esqueleto de carga [19659141] autoStart
- Defina si la carga de diseño automático comienza tan pronto como se infla
enableDevelopPreview
- Defina si debe mostrarse en el Editor de diseño durante el desarrollo. Esto puede no funcionar lo suficientemente bien con el esqueleto ViewGroups
[19659013]
splitSkeletonTextByLines
- Si el diseño o el diseño interno es un EditText, define si el esqueleto considera que se dibuja cada línea o si se dibuja como un solo rectángulo.
Si es verdadero, lineSpacingExtra debe establecerse en rectángulos separados.
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : layout_marginBottom = " 20dp "[19659030]
Android : lineSpacingExtra " 4DP " [19659030]
android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : splitSkeletonTextByLines = " verdadero " />
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "[19659030]
android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : splitSkeletonTextByLines = " falso " />
clipToText
- Si el diseño o cualquier diseño interno es un EditText, define si el esqueleto se debe dibujar limitado al texto y no todo el diseño
< allobs .loading.skeleton.view .SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : layout_marginBottom = " 20dp "
Android : lineSpacingExtra " 4dp "
android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. [194590] "
aplicación : clipToText = " verdadero " />
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "
Android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : clipToText = " falso 1945] " />
skeletonColor
- El color utilizado para dibujar los rectángulos de esqueleto
< simplistas . .skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : layout_marginBottom = " 20dp "
Android : lineSpacingExtra " 4dp "
android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. [194590] "
aplicación : skeletonColor = " # FF9696 " />
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "
Android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : skeletonColor = " # 96EFF " />
shimmerStrokeWidth
- Ancho del efecto de brillo. Funciona junto con shimmerBlurWidth
< glibs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "
Android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : shimmerStrokeWidth = [100459013] ] " />
shimmerBlurWidth
- El ancho del efecto de desenfoque utilizado como una máscara en shimmerStrokeWidth en el [19459312] en el [. loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "[19659030] android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : shimmerBlurWidth = " 10dp " />
]
shimmerLightenFactor
- Factor de aligeramiento aplicado en skeletonColor para ser usado en el efecto de brillo, generalmente es de 0 a 1 dependiendo de skeletonColor
< ai8 [4545901]] .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : layout_marginBottom = " 20dp "
Android : lineSpacingExtra " 4dp "
android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. [194590] "
aplicación : shimmerLightenFactor = " 0.9 "
aplicación : skeletonColor = [19659206] " # F00 " />
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : lineSpacingExtra = " 4DP "
Android : texto = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : shimmerLightenFactor = ] "
aplicación : skeletonColor = " # 00F " />
[19459504]
] skeletonCornerRadius
- radio de los ángulos del rectángulo esqueleto
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
Android : layout_marginBottom = " 20dp "[19659030]
Android : lineSpacingExtra " 4DP " [19659030]
android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "
aplicación : skeletonCornerRadius = " 0dp " />
< allobs .loading.skeleton.view.SkeletonTextView
Android : layout_width = " match_parent "
Android : layout_height = " ] wrap_content "
android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. "[19659152] aplicación : splitSkeletonTextByLines = " falso "
aplicación : skeletonCornerRadius = " 20 20 " />
19659004] duración
- El tiempo para el efecto de brillo debe aplicarse desde el principio del diseño hasta el final [19659143] customDuration
< allobs .loading.skeleton view.SkeletonTextView Android : layout_width = " match_parent " Android : layout_height = " ] wrap_content " Android : layout_marginBottom = " 20dp " Android : lineSpacingExtra " 4dp " android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. [194590] " aplicación : duración = " shortCycle " /> < allobs .loading.skeleton.view.SkeletonTextView Android : layout_width = " match_parent " Android : layout_height = " ] wrap_content " Android : layout_marginBottom = " 20dp " Android : lineSpacingExtra " 4dp " android : text = " Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la composición. [194590] " aplicación : customDuration = " 4000 " />
]
Esqueleto y esqueleto
Si desea crear una lista usando ListView o RecyclerView con una carga de esqueleto, debe crear un diseño que represente la lista de elementos. Una vez que se ha creado el diseño, debe consultarlo agregando la propiedad skeletonViewHolderItem como se puede ver en el fragmento a continuación.
list_item.xml
<? xml versión = " 1.0 " codificación = " utf-8 ?> 19659030]?> < RelativeLayout xmlns [19659011]: [19659011] Android = [19659013] " http://schemas.android.com/apk/res/android " [19659014] xmlns : herramientas = [19659013] " http://schemas.android.com/tools " [19659014] Android [19659011]: [19659011] layout_width = " match_parent " Android : layout_height = " wrap_content " Android : [19659011] paddingStart = " 2DP " [19659014] Android : paddingTop = " 10dp " [19659014] Android : paddingEnd = " 2DP " [19659014] Android : paddingBottom = " 10dp "[19659014] herramientas [19659011]: [19659011] contexto = [19659013] " .MainActivity " [19659030]> < ImageView Android : id = " @ + id / img017 " [19659030] Android : layout_width = " 50dp " [19659030] Android : layout_height = " 50dp " [19659030] android : src = " @ drawable / ic_email " /> < TextView Android : id = " @ + id / text016 " [19659030] Android : layout_width = " wrap_content " Android : layout_height = " wrap_content " [19659025] Android : layout_alignParentEnd = " verdadero " Android : layout_marginStart = " 8DP "[19659030] Android : layout_marginTop = " 2DP "[19659030] Android : layout_toEndOf = " @ + id / img017 " [19659030] android : texto = " Lorem Ipsum es simplemente un texto ficticio " /> < TextView Android : id = " @ + id / text015 " [19659030] Android : layout_width = " wrap_content " Android : layout_height = " wrap_content " [19659025] Android : layout_below = " @ + id / text016 " [19659030] Android : layout_marginStart = " 8DP " [19659030] Android : layout_marginTop = " 8DP " [19659030] Android : layout_toEndOf = " @ + id / img017 " [19659030] android : texto = " Lorem Ipsum Text " [19659041] /> </ RelativeLayout >
Es importante que el diseño tenga el contenido posible para calcular los rectos que representan los esqueletos
Uso
< glibs .loading.skeleton. layout.SkeletonListView Android : layout_width = " match_parent " Android : layout_height = " ] match_parent " aplicación : skeletonViewHolderItem = " @ layout / item_list " /> < allobs .loading.skeleton.layout.SkeletonRecyclerView Android : layout_width = " match_parent " Android : layout_height = " ] match_parent " aplicación : skeletonViewHolderItem = " @ layout / item_list " />
Propiedades SkeletonListView y SkeletonRecyclerView
- skeletonViewHolderItem
- Referencia al diseño que se utilizará como soporte de vista para el esqueleto
- skeletonViewHolderAmount
- a dibujar, de lo contrario se calculará en tiempo de ejecución
[19659013]
- skeletonViewHolder
[19659013]
- skeletonViewHolderItem
- skeletonViewHolder ] Si es verdadero y skeletonViewHolderAmount no está establecido, esta propiedad define si el último elemento se puede dibujar de forma incompleta
Contribuciones y soporte
Las contribuciones son bienvenidas. Cree una nueva solicitud de extracción para enviar sus correcciones que deberán fusionarse después de la moderación. En caso de problemas, errores o sugerencias, cree un nuevo problema o publique comentarios en problemas relevantes ya activos
. Biblioteca de Android
