Home / Android-Entwicklung / Das Android Arsenal – Fortschrittsindikatoren

Das Android Arsenal – Fortschrittsindikatoren

Einführung

AG Skeleton Loading ist eine Bibliothek, die eine einfache Möglichkeit bietet, das Laden von Skeletten einzuschließen.

Installieren Sie

Schritt 1 . Fügen Sie das JitPack-Repository zu Ihrer Build-Datei hinzu. Fügen Sie es am Ende der Repositorys in Ihr root build.gradle ein:







 allprojects {
  Repositories {
    ...
    maven {url 'https://jitpack.io'}
  }}
}}

Schritt 2. Fügen Sie die Abhängigkeiten hinzu




 Abhängigkeiten {
  Implementierung 'com.github.AgnaldoNP: AGSkeletonLoading: 1.0'
}}

Verwendung

Sie können das Laden von Skeletten verwenden, indem Sie eine Gemeinschaftsansicht oder ein Ansichtsgruppenlayout für den Korrespondenten in dieser Bibliothek ersetzen. Unten sehen Sie ein Beispiel für die Verwendung eines SkeletonRelativeLayout

 < aglibs 
 .loading.skeleton.layout.SkeletonRelativeLayout
     android :  id  =  " @ + id / skeletonLayout " 
 android :  layout_width  =  ] " match_parent " 
 android :  layout_height  =  " wrap_content " 
 android :  layout_marginBottom  =  " 20dp " 
 App :  clipToText  =  " false " 

>

    < ImageView 
 android :  id  =  " @ + id / img001 " 

         android :  layout_width  =  " 50dp " 

         android :  layout_height  =  " 50dp " 

         android :  src  =  " @ drawable / ic_email " 

 />

    < TextView 
 android :  id  =  " @ + id / text001 " 

         android :  layout_width  =  " wrap_content " 

         android :  layout_height  =  " wrap_content " 

         android :  layout_alignParentEnd  =  " true " 

         android :  layout_marginStart  =  " 8dp " 

         android :  layout_marginTop  =  " 2dp " 

         android :  layout_toEndOf  =  " @ + id / img001 " 

         android :  text  =  " Lorem Ipsum ist einfach Dummy-Text " 

 />

    < TextView 
 android :  layout_width  =  " wrap_content " 

         android :  layout_height  =  " wrap_content " 

         android :  layout_marginStart  =  " 8dp " 

         android :  layout_marginTop  =  " 8dp " 

         android :  layout_below  =  " @ + id / text001 " 

         android :  layout_toEndOf  =  " @ + id / img001 " 

         android :  text  =  " Lorem Ipsum Text " 

 />

</  aglibs  .loading.skeleton.layout.SkeletonRelativeLayout> 

Jedes von dieser Bibliothek bereitgestellte Skelettlayout, View oder ViewGroup, verfügt über die folgenden Methoden, um das Laden zu starten, das Laden zu stoppen oder den Ladestatus zu überprüfen




 skeletonLayout.isLoading ()
skeletonLayout.startLoading ()
skeletonLayout.stopLoading ()

Verfügbare Skeleton Laden Ansichten

  • SkeletonRecyclerView
  • SkeletonListView
  • SkeletonLinearLayout
  • SkeletonRelativeLayout
  • SkeletonFrameLayout
  • SkeletonGridLayout
  • SkeletonConstraintLayout
  • SkeletonTextView
  • SkeletonButton
  • SkeletonImageView

Options

Property Value / Type Default
autoStart boolean true
enableDevelopPreview boolean true
splitSkeletonTextByLines
splitSkeletonTextByLines8 true
clipToText drawable true
skeletonColor color # E6E6E6
shimmerStrokeWidth dimension 30dp
812
shimmerLightenFactor floar 0,2
skeletonCornerRadius dimension 5dp
dauer enum – shortCycle mediumCycle longCycle [19659128] mediumCycle
customDuration integer
skeletonViewHolderItem reference
skeletonViewHolderAmount integer integer false

Alle diese Eigenschaften können in jedem Skelettlayout referenziert werden, können jedoch je nach verwendetem Layout keine Auswirkungen haben.

Commom-Eigenschaften

Der unten stehende Eigenschaften hat Auswirkungen auf das Laden aller Skelettansichten.

  • autoStart

    • Definieren Sie if Das Layout wird automatisch gestartet, sobald es aufgeblasen ist.
  • enableDevelopPreview

    • Legen Sie fest, ob es während der Entwicklung im Layout-Editor angezeigt werden soll. Dies kann mit ViewGroups-Skelett
  • splitSkeletonTextByLines

    • nicht gut funktionieren. Wenn das Layout oder ein inneres Layout ein EditText ist, wird definiert, ob das Skelett jede Linie als gezeichnet betrachtet oder wenn es nur als ein Rechteck gezeichnet ist.

    Wenn true, sollte lineSpacingExtra so eingestellt werden, dass die Rechtecke getrennt werden.

      < aglibs 
     .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 ist einfach ein Blindtext der Druck- und Satzindustrie. " 
    
          App :  splitSkeletonTextByLines  =  " true " 
    
     />
    
     < aglibs 
     .loading.skeleton.view.SkeletonTextView
          android :  layout_width  =  " match_parent " 
    
          android :  layout_height  =  " wrap_content " 
    
          android :  lineSpacingExtra  =  " 4dp " 
    
          android :  text  =  " Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. " 
    
          App :  splitSkeletonTextByLines  =  " false "  /> 

  • ] clipToText

    • Wenn das Layout oder ein inneres Layout ein EditText ist, wird definiert, ob das Skelett auf Text und nicht auf das gesamte Layout gezeichnet werden soll.
     < aglibs 
     .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 ist einfach ein Scheintext der Druck- und Satzindustrie. 
     app :  clipToText  =  true 
    
    
     />
    
    
    < aglibs 
     .loading.skeleton.view.SkeletonTextView
         android :  layout_width  =  " match_parent " 
     android :  layout_height  =  " ] wrap_content  "
     android :  lineSpacingExtra  = "  4dp  "
     android :  text  =  " Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. " 
     App :  clipToText  =  " false  ] " /> 

  • skeletonColor

    • Die Farbe, mit der die Skelettrechtecke gezeichnet wurden
    <[1945901717]  aglibs
     .skeleton.view.SkeletonTextView
         android :  layout_width  =  " match_parent " 
     android :  layout_height  =  " ] wrap_content  "
     android :  layout_marginBottom  = "  20dp  "
     android :  lineSpacingExtra  =  " 4dp " 
     android :  text  =  " Lorem Ipsum ist einfach ein Scheintext der Druck- und Satzindustrie. 
     App :  skeletonColor  =  # FF9696 
    
    
     />
    
    
    < aglibs 
     .loading.skeleton.view.SkeletonTextView
         android :  layout_width  =  " match_parent " 
     android :  layout_height  =  " ] wrap_content  "
     android :  lineSpacingExtra  = "  4dp  "
     android :  text  =  " Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie. " 
     App :  skeletonColor  =  " # 96E7FF  " /> 

  • shimmerStrokeWidth

    • Breite des Schimmereffekts. Es funktioniert zusammen mit shimmerBlurWidth
     < aglibs 
     .loading.skeleton.view.SkeletonTextView
         android :  layout_width  =  " match_parent " 
     android :  layout_height  =  " ] wrap_content  "
     android :  lineSpacingExtra  = "  4dp  "
     android :  text  =  " Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie. " 
     App :  shimmerStrokeWidth  =  " 100dp  " /> 

  • shimmerBlurWidth

    • Breite des als Maske verwendeten Unschärfeeffekts für shimmerStrokeWidth
     < aglibs 
     .loading.skeleton.view.SkeletonTextView
          android :  layout_width  =  " match_parent " 
    
          android :  layout_height  =  " wrap_content " 
    
          android :  lineSpacingExtra  =  " 4dp " 
    
          android :  text  =  " Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. " 
    
          App :  shimmerBlurWidth  =  " 10dp "  /> 

  • ] shimmerLightenFactor

    • Aufhellungsfaktor, der auf skeletonColor angewendet wird, um auf den Schimmereffekt angewendet zu werden, ist typischerweise 0 bis 1, abhängig von den skeletonColor
    <[19459090]  aglibs
     .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 ist einfach ein Scheintext der Druck- und Satzindustrie. 
     App :  shimmerLightenFactor  =  0,9 
     App :  skeletonColor  =  # F00  "
    
     />
    
    < aglibs 
     .loading.skeleton.view.SkeletonTextView
         android :  layout_width  =  " match_parent " 
     android :  layout_height  =  " ] wrap_content  "
     android :  lineSpacingExtra  = "  4dp  "
     android :  text  =  " Lorem Ipsum ist einfach ein Scheintext der Druck- und Satzindustrie. " 
     App :  shimmerLightenFactor  =  " 0.2 
     App :  skeletonColor  =  # 00F  /> 

  • skeletonCornerRadius

    • Größe des Eckenradius des Skelettrechtecks ​​
     < aglibs 
     .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 ist einfach ein Blindtext der Druck- und Satzindustrie. " 
    
          App :  skeletonCornerRadius  =  " 0dp " 
    
     />
    
     < aglibs 
     .loading.skeleton.view.SkeletonTextView
          android :  layout_width  =  " match_parent " 
    
          android :  layout_height  =  " wrap_content " 
    
          android :  text  =  " Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. " 
    
          App :  splitSkeletonTextByLines  =  " false " 
    
          App :  skeletonCornerRadius  =  " 20dp "  /> 

  • ] Dauer

    • Die Zeit bis zum Schimmern wird vom Beginn des Layouts bis zum Ende angewendet.
  • customDuration

    <[1945901717]  aglibs
     .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 ist einfach ein Scheintext der Druck- und Satzindustrie. 
     App :  Dauer  =  shortCycle 
    
     />
    
    < aglibs 
     .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 ist einfach ein Scheintext der Druck- und Satzindustrie. 
     app :  customDuration  =  4000  /> 

SkeletonListView und SkeletonRecyclerView

Wenn Sie eine Liste mit ListView oder RecyclerView mit einem Skelett laden möchten, müssen Sie ein Layout erstellen, das die Artikelliste darstellt. Sobald das Layout erstellt wurde, müssen Sie darauf verweisen, indem Sie die Eigenschaft skeletonViewHolderItem hinzufügen, wie Sie im folgenden Snippet sehen können.

list_item.xml

 <?  xml  version  =  " 1.0 "  Kodierung  =  " utf-8 " 
?>
< RelativeLayout  xmlns :  android  =  " http://schemas.android.com/apk/res/android " 
 xmlns :  tools  =  " http://schemas.android.com/tools " 
 android :  layout_width  =  " match_parent " 
 android :  layout_height  =  " wrap_content " 
 android : 
 19659011] paddingStart  =  " 2dp " 
 android :  paddingTop  =  " 10dp " 
 android :  paddingEnd  =  " 2dp " 
 android :  paddingBottom  =  " 10dp 
 tools :  context  =  " .MainActivity " 

>

    < ImageView 
 android :  id  =  " @ + id / img017 " 

         android :  layout_width  =  " 50dp " 

         android :  layout_height  =  " 50dp " 

         android :  src  =  " @ drawable / ic_email " 

 />

    < TextView 
 android :  id  =  " @ + id / text016 " 

         android :  layout_width  =  " wrap_content " 

         android :  layout_height  =  " wrap_content " 

         android :  layout_alignParentEnd  =  " true " 

         android :  layout_marginStart  =  " 8dp " 

         android :  layout_marginTop  =  " 2dp " 

         android :  layout_toEndOf  =  " @ + id / img017 " 

         android :  text  =  " Lorem Ipsum ist einfach Dummy-Text " 

 />

    < TextView 
 android :  id  =  " @ + id / text015 " 

         android :  layout_width  =  " wrap_content " 

         android :  layout_height  =  " wrap_content " 

         android :  layout_below  =  " @ + id / text016 " 

         android :  layout_marginStart  =  " 8dp " 

         android :  layout_marginTop  =  " 8dp " 

         android :  layout_toEndOf  =  " @ + id / img017 " 

         android :  text  =  " Lorem Ipsum Text " 

 />

</  RelativeLayout > 

Es ist wichtig, dass das Layout einige Inhalte enthält, um die Rechtecke berechnen zu können, die die Skelette darstellen.

Verwendung

<[1945901717]  aglibs
 .loading.skeleton .layout.SkeletonListView
     android :  layout_width  =  " match_parent " 
 android :  layout_height  =  " ] match_parent  "
 app :  skeletonViewHolderItem  = "  @ layout / item_list  "

 />

< aglibs 
 .loading.skeleton.layout.SkeletonRecyclerView
     android :  layout_width  =  " match_parent " 
 android :  layout_height  =  " ] match_parent  "
 app :  skeletonViewHolderItem  = "  @ layout / item_list  " /> 

]

SkeletonListView- und SkeletonRecyclerView-Eigenschaften

  • skeletonViewHolderItem
    • Verweis auf das Layout, das als Ansichtshalter für das Skelett verwendet werden soll
  • skeletonViewHolderAmount [1965967] zu zeichnen, andernfalls wird es zur Laufzeit berechnet
  • skeletonViewHolderTruncate
    • Wenn true und skeletonViewHolderAmount nicht festgelegt ist, definiert diese Eigenschaft, ob das letzte Element unvollständig sein kann gezeichnet
  • Beiträge und Unterstützung

    Beiträge sind willkommen. Erstellen Sie eine neue Pull-Anfrage, um Ihre Fixes einzureichen. Diese werden nach der Moderation zusammengeführt. Bei Problemen, Fehlern oder Vorschlägen erstellen Sie entweder eine neue Ausgabe oder veröffentlichen Sie Kommentare in bereits aktiven relevanten Ausgaben

    .

    About AndroidWeltEditor

    Check Also

    Android Developers Blog: Warteschlange der Verbesserungen

    Gepostet von Jeff Vander Stoep, Android Security & Privacy Team und Chong Zhang, Android Media …

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.