El arsenal de Android – Indicadores de progreso

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]

    • 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

    Compruebe también

    Nuevos gadgets de Android y wearables en el Mobile World Congress + ¡Sintoniza un nuevo episodio de #TheAndroidShow la próxima semana!

    Publicado por Anirudh Dewani, Director de Relaciones con Desarrolladores de Android Hoy, en el Mobile …

    Deja una respuesta

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