SkeletonView
? 1.31.0
Merkmale • Leitfäden • Installation • Verwendung • Verschiedenes • Mitwirkender Beitrag
? Readme ist in anderen Sprachen erhältlich :? . ? . ? . ? . ? . ?
Heutzutage haben fast alle Apps asynchronisierte Prozesse wie API -Anfragen, langlebige Prozesse usw. Während die Prozesse funktionieren, stellen Entwickler normalerweise eine Ladeansicht, um den Benutzern zu zeigen, dass etwas vor sich geht.
Das Skeletonview wurde konzipiert, um dieses Bedürfnis zu befriedigen, eine elegante Möglichkeit, den Nutzern zu zeigen, dass etwas passiert und sie auch darauf vorbereitet, auf welche Inhalte warten.
Genießen Sie es! ?
| Skeletonview Guides - Einstieg | So erstellen Sie Ladeansicht mit Skelettansicht in Swift 5.2 von IKH4ever Studio | Erstellen Sie die Skelett -Ladeansicht in App (Swift 5) - Xcode 11, 2020 von der iOS Academy | Cómo Crear una Animación de Carga de datos en iOS von Mouredev |
pod 'SkeletonView' github "Juanpe/SkeletonView"dependencies: [
. package ( url : " https://github.com/Juanpe/SkeletonView.git " , from : " 1.7.0 " )
]WICHTIG!
Da Version 1.30.0, unterstützt
SkeletonViewXCFrameWorks . Wenn Sie es also als XCFramework installieren möchten, verwenden Sie dieses Repo stattdessen.
Nur 3 Schritte, die zur Verwendung SkeletonView erforderlich sind:
1️⃣ Importieren Sie das Skelett an der richtigen Stelle.
import SkeletonView 2️⃣ Setzen Sie jetzt, welche Ansichten skeletonables sind. Sie erreichen dies auf zwei Arten:
Verwenden von Code:
avatarImageView . isSkeletonable = trueVerwenden von IB/Storyboards:
3️⃣ Sobald Sie die Ansichten festgelegt haben, können Sie das Skelett anzeigen. Dazu haben Sie 4 Auswahlmöglichkeiten:
( 1 ) view . showSkeleton ( ) // Solid
( 2 ) view . showGradientSkeleton ( ) // Gradient
( 3 ) view . showAnimatedSkeleton ( ) // Solid animated
( 4 ) view . showAnimatedGradientSkeleton ( ) // Gradient animatedVorschau
| Solide | Gradient | Solide animiert | Gradienten animiert |
 |  |  |  |
WICHTIG!
SkeletonViewist rekursiv. Wenn Sie also das Skelett in allen Skelettansichten anzeigen möchten, müssen Sie nur die Show -Methode in der Hauptansicht des Containers aufrufen. Zum Beispiel mitUIViewControllers.
SkeletonView ist mit UITableView und UICollectionView kompatibel.
UitableView
Wenn Sie das Skelett in einem UITableView anzeigen möchten, müssen Sie sich dem SkeletonTableViewDataSource -Protokoll anpassen.
public protocol SkeletonTableViewDataSource : UITableViewDataSource {
func numSections ( in collectionSkeletonView : UITableView ) -> Int // Default: 1
func collectionSkeletonView ( _ skeletonView : UITableView , numberOfRowsInSection section : Int ) -> Int
func collectionSkeletonView ( _ skeletonView : UITableView , cellIdentifierForRowAt indexPath : IndexPath ) -> ReusableCellIdentifier
func collectionSkeletonView ( _ skeletonView : UITableView , skeletonCellForRowAt indexPath : IndexPath ) -> UITableViewCell ? // Default: nil
func collectionSkeletonView ( _ skeletonView : UITableView , prepareCellForSkeleton cell : UITableViewCell , at indexPath : IndexPath )
} Wie Sie sehen können, erbt dieses Protokoll von UITableViewDataSource , sodass Sie dieses Protokoll durch das Skelettprotokoll ersetzen können.
Dieses Protokoll verfügt über eine Standardimplementierung für einige Methoden. Beispielsweise wird die Anzahl der Zeilen für jeden Abschnitt in der Laufzeit berechnet:
func collectionSkeletonView ( _ skeletonView : UITableView , numberOfRowsInSection section : Int ) -> Int
// Default:
// It calculates how many cells need to populate whole tableviewWICHTIG!
Wenn Sie
UITableView.automaticNumberOfSkeletonRowsin der obigen Methode zurückgeben, wirkt es wie das Standardverhalten (dh es berechnet, wie viele Zellen erforderlich sind, um die gesamte Tabellenansicht zu füllen).
Es gibt nur eine Methode, die Sie implementieren müssen, um das Skelett die Zellerkennung zu informieren. Diese Methode hat keine Standardimplementierung:
func collectionSkeletonView ( _ skeletonView : UITableView , cellIdentifierForRowAt indexPath : IndexPath ) -> ReusableCellIdentifier {
return " CellIdentifier "
}Standardmäßig dequeue die Bibliothek die Zellen von jedem IndexPath, aber Sie können dies auch tun, wenn Sie einige Änderungen vor dem Skelett vornehmen möchten:
func collectionSkeletonView ( _ skeletonView : UITableView , skeletonCellForRowAt indexPath : IndexPath ) -> UITableViewCell ? {
let cell = skeletonView . dequeueReusableCell ( withIdentifier : " CellIdentifier " , for : indexPath ) as? Cell
cell ? . textField . isHidden = indexPath . row == 0
return cell
}Wenn Sie es vorziehen, den Deque -Teil der Bibliothek zu überlassen, können Sie die Zelle mit dieser Methode konfigurieren:
func collectionSkeletonView ( _ skeletonView : UITableView , prepareCellForSkeleton cell : UITableViewCell , at indexPath : IndexPath ) {
let cell = cell as? Cell
cell ? . textField . isHidden = indexPath . row == 0
} Außerdem können Sie sowohl die Header als auch die Fußzeilen skelettieren. Sie müssen sich dem SkeletonTableViewDelegate -Protokoll anpassen.
public protocol SkeletonTableViewDelegate : UITableViewDelegate {
func collectionSkeletonView ( _ skeletonView : UITableView , identifierForHeaderInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
func collectionSkeletonView ( _ skeletonView : UITableView , identifierForFooterInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
}WICHTIG!
1️⃣ Wenn Sie setzbare Zellen verwenden (
tableView.rowHeight = UITableViewAutomaticDimension), definieren Sie dieestimatedRowHeight.2️⃣ Wenn Sie Elemente in einem
UITableViewCellhinzufügen, sollten Sie escontentViewund nicht direkt zur Zelle hinzufügen.self . contentView . addSubview ( titleLabel ) ✅ self . addSubview ( titleLabel )
UICollectionView
Für UICollectionView müssen Sie sich dem SkeletonCollectionViewDataSource -Protokoll anpassen.
public protocol SkeletonCollectionViewDataSource : UICollectionViewDataSource {
func numSections ( in collectionSkeletonView : UICollectionView ) -> Int // default: 1
func collectionSkeletonView ( _ skeletonView : UICollectionView , numberOfItemsInSection section : Int ) -> Int
func collectionSkeletonView ( _ skeletonView : UICollectionView , cellIdentifierForItemAt indexPath : IndexPath ) -> ReusableCellIdentifier
func collectionSkeletonView ( _ skeletonView : UICollectionView , supplementaryViewIdentifierOfKind : String , at indexPath : IndexPath ) -> ReusableCellIdentifier ? // default: nil
func collectionSkeletonView ( _ skeletonView : UICollectionView , skeletonCellForItemAt indexPath : IndexPath ) -> UICollectionViewCell ? // default: nil
func collectionSkeletonView ( _ skeletonView : UICollectionView , prepareCellForSkeleton cell : UICollectionViewCell , at indexPath : IndexPath )
func collectionSkeletonView ( _ skeletonView : UICollectionView , prepareViewForSkeleton view : UICollectionReusableView , at indexPath : IndexPath )
} Der Rest des Prozesses ist der gleiche wie UITableView
Bei Verwendung von Elementen mit Text zeichnet SkeletonView Zeilen, um den Text zu simulieren.
Sie können einige Eigenschaften für Multilinen -Elemente festlegen.
| Eigentum | Typ | Standard | Vorschau |
|---|---|---|---|
| LastLineFillpercent | CGFloat | 70 |  |
| lineScornradius | Int | 0 |  |
| Skelettlinien | CGFloat | 10 |  |
| SkelettPaddingInsets | UIEdgeInsets | .zero |  |
| skelettontextlineHeight | SkeletonTextLineHeight | .fixed(15) |  |
| skelettontextNumberoflines | SkeletonTextNumberOfLines | .inherited | |
Um den Prozentsatz oder den Radius mit Code zu ändern, setzen Sie die Eigenschaften:
descriptionTextView . lastLineFillPercent = 50
descriptionTextView . linesCornerRadius = 5Oder, wenn Sie es vorziehen, IB/Storyboard zu verwenden:
Wie definiere ich die Anzahl der Linien?
Standardmäßig entspricht die Anzahl der Zeilen dem Wert der numberOfLines -Eigenschaft. Und wenn es auf Null gesetzt ist, berechnet es, wie viele Linien benötigt werden, um das gesamte Skelett zu bevölkern und zu zeichnen.
Wenn Sie jedoch eine bestimmte Anzahl von Skeleton -Linien festlegen möchten, können Sie dies tun, indem Sie die Eigenschaft skeletonTextNumberOfLines festlegen. Diese Eigenschaft hat zwei mögliche Werte, die inherited , die numberOfLines -Wert und custom(Int) zurückgeben, wodurch die spezifische Anzahl der als zugeordneten Wert angegebenen Zeilen zurückgegeben wird.
Zum Beispiel:
label . skeletonTextNumberOfLines = 3 // .custom(3)
Euen VERALTET!UseFontlineHeight wurde veraltet. Sie können stattdessen SkelettonTextLineHeight verwenden:
descriptionTextView . skeletonTextLineHeight = . relativeToFont
WICHTIG!
Bitte beachten Sie, dass die einzelne Zeile für Ansichten ohne mehrere Zeilen als letzte Zeile betrachtet wird.
Die Skelette haben ein Standardaussehen. Wenn Sie also keine Farb-, Gradienten- oder Multilinen -Eigenschaften angeben, verwendet SkeletonView die Standardwerte.
Standardwerte:
UIColor.skeletonDefault (gleich wie .clouds , aber adaptiv an den Dunklen Modus)SkeletonGradient(baseColor: .skeletonDefault)CGFloatCGFloatIntIntCGFloat (IBInspectable) (Machen Sie Ihre Skelettansicht mit Ecke) Um diese Standardwerte zu erhalten, können Sie SkeletonAppearance.default verwenden. Mit dieser Eigenschaft können Sie auch die Werte festlegen:
SkeletonAppearance . default . multilineHeight = 20
SkeletonAppearance . default . tintColor = . green
Euen VERALTET!UseFontlineHeight wurde veraltet. Sie können stattdessen TextLineHeight verwenden:
SkeletonAppearance . default . textLineHeight = . relativeToFont
Sie können entscheiden, mit welcher Farbe das Skelett getönt ist. Sie müssen nur als Parameter die gewünschte Farbe oder den gewünschten Gradienten übergeben.
Mit festen Farben
view . showSkeleton ( usingColor : UIColor . gray ) // Solid
// or
view . showSkeleton ( usingColor : UIColor ( red : 25.0 , green : 30.0 , blue : 255.0 , alpha : 1.0 ) )Verwenden von Gradienten
let gradient = SkeletonGradient ( baseColor : UIColor . midnightBlue )
view . showGradientSkeleton ( usingGradient : gradient ) // GradientAußerdem verfügt SkeletonView über 20 flache Farben?
UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...
Skelettonview verfügt über zwei integrierte Animationen, der es für feste Skelette im Puls und nach Gradienten gleitet .
Außerdem ist es wirklich einfach, wenn Sie Ihre eigene Skelettanimation machen möchten.
Das Skelett liefert die showAnimatedSkeleton -Funktion mit einem SkeletonLayerAnimation -Verschluss, bei dem Sie Ihre benutzerdefinierte Animation definieren können.
public typealias SkeletonLayerAnimation = ( CALayer ) -> CAAnimationSie können die Funktion wie diese aufrufen:
view . showAnimatedSkeleton { ( layer ) -> CAAnimation in
let animation = CAAnimation ( )
// Customize here your animation
return animation
} Es ist SkeletonAnimationBuilder erhältlich. Es ist ein Baumeister, SkeletonLayerAnimation zu machen.
Heute können Sie Schiebeanimationen für Gradienten erstellen, die Richtung entscheiden und die Dauer der Animation festlegen (Standard = 1,5s).
// func makeSlidingAnimation(withDirection direction: GradientDirection, duration: CFTimeInterval = 1.5) -> SkeletonLayerAnimation
let animation = SkeletonAnimationBuilder ( ) . makeSlidingAnimation ( withDirection : . leftToRight )
view . showAnimatedGradientSkeleton ( usingGradient : gradient , animation : animation ) GradientDirection ist ein Aufzähler mit diesen Fällen:
| Richtung | Vorschau |
|---|---|
| .links rechts |  |
| .RightLeft |  |
| .Topbottom |  |
| .Bottomtop |  |
| .Topleftbottomright |  |
| .Bottomrighttopleft |  |
TRICK!
Existieren Sie eine andere Möglichkeit, Schiebebeanimationen zu erstellen, nur mit dieser Verknüpfung:
let animation = GradientDirection . leftToRight . slidingAnimation ( )
Das SkeletonView hat integrierte Übergänge, um die Skelette auf reibungslosere Weise zu zeigen oder zu verbergen ?
Um den Übergang zu verwenden, fügen Sie einfach den transition Ihrem showSkeleton() oder hideSkeleton() -Funktion mit der Übergangszeit wie folgt hinzu:
view . showSkeleton ( transition : . crossDissolve ( 0.25 ) ) //Show skeleton cross dissolve transition with 0.25 seconds fade time
view . hideSkeleton ( transition : . crossDissolve ( 0.25 ) ) //Hide skeleton cross dissolve transition with 0.25 seconds fade time Der Standardwert ist crossDissolve(0.25)
Vorschau
| Keiner | Kreuz auflösen |
 |  |
Hierarchie
Da SkeletonView rekursiv ist und wir möchten, dass Skelett sehr effizient ist, möchten wir so schnell wie möglich die Rekursion aufhören. Aus diesem Grund müssen Sie die Containeransicht als Skeletonable setzen, da Skeletton aufhört, nach skeletonable -Unteransichten zu suchen, sobald eine Aussicht nicht skelettiert ist und die Rekursion spricht.
Weil ein Bild mehr als tausend Worte wert ist:
In diesem Beispiel haben wir einen UIViewController mit ContainerView und einem UITableView . Wenn die Aussicht fertig ist, zeigen wir das Skelett mit dieser Methode:
view.showSkeleton()
isSkeletonable= ☠️
| Konfiguration | Ergebnis |
|---|---|
 |  |
 | |
 |  |
 |  |
 |  |
 |  |
Skelettansichtslayout
Manchmal passt das Skelettlayout möglicherweise nicht zu Ihrem Layout, da sich die Grenzen der Elternansicht geändert haben. Zum Beispiel das Gerät drehen.
Sie können die Skelettansichten wie SO weitergeben:
override func viewDidLayoutSubviews ( ) {
view . layoutSkeletonIfNeeded ( )
}WICHTIG!
Sie sollten diese Methode nicht nennen. Aus Version 1.8.1 müssen Sie diese Methode nicht aufrufen, die Bibliothek betreibt automatisch. Sie können diese Methode also nur in den Fällen verwenden, wenn Sie das Layout des Skeletts manuell aktualisieren müssen.
Skelett aktualisieren
Sie können die Skelettkonfiguration jederzeit wie der Farbe, der Animation usw. mit den folgenden Methoden ändern:
( 1 ) view . updateSkeleton ( ) // Solid
( 2 ) view . updateGradientSkeleton ( ) // Gradient
( 3 ) view . updateAnimatedSkeleton ( ) // Solid animated
( 4 ) view . updateAnimatedGradientSkeleton ( ) // Gradient animatedVerstecken von Ansichten, wenn die Animation beginnt
Manchmal möchten Sie eine Ansicht verbergen, wenn die Animation beginnt. Es gibt also eine schnelle Eigenschaft, mit der Sie dies ermöglichen können:
view . isHiddenWhenSkeletonIsActive = true // This works only when isSkeletonable = trueÄndern Sie die Benutzerinteraktion nicht, wenn das Skelett aktiv ist
Standardmäßig ist die Benutzerinteraktion für skelettierte Elemente deaktiviert. Wenn Sie jedoch nicht den Benutzerinteraktionsanzeige ändern möchten, wenn das Skelett aktiv ist, können Sie die isUserInteractionDisabledWhenSkeletonIsActive -Eigenschaft verwenden:
view . isUserInteractionDisabledWhenSkeletonIsActive = false // The view will be active when the skeleton will be active.Verwenden Sie die Schriftlinienhöhe nicht für die Skelettlinien in Etiketten
FALSCH, um das Skelett für ein UILabel oder UITextView automatisch zu deaktivieren. Standardmäßig wird die Höhe der Skelettlinien automatisch angepasst, um die Höhe der Schrift zu erhalten, um den Text im Begrenzungsbekämpfungspunkt genauer zu reflektieren, anstatt das Begrenzungsfeld zu verwenden.
label . useFontLineHeight = falseVerzögerte Show -Skelett
Sie können die Präsentation des Skeletts verzögern, wenn die Ansichten schnell aktualisieren.
func showSkeleton ( usingColor : UIColor ,
animated : Bool ,
delay : TimeInterval ,
transition : SkeletonTransitionStyle ) func showGradientSkeleton ( usingGradient : SkeletonGradient ,
animated : Bool ,
delay : TimeInterval ,
transition : SkeletonTransitionStyle )Debuggen
Erleichterung der Debug -Aufgaben, wenn etwas nicht gut funktioniert. SkeletonView verfügt über einige neue Tools.
Erstens hat UIView eine Immobilie mit seinen Skeleton -Info verfügbar:
var sk . skeletonTreeDescription : String Außerdem können Sie den neuen Debug -Modus aktivieren. Sie fügen einfach die Umgebungsvariable SKELETON_DEBUG hinzu und aktivieren sie.
Wenn das Skelett erscheint, können Sie die Ansichtshierarchie in der Xcode -Konsole sehen.
{
"type" : "UIView", // UITableView, UILabel...
"isSkeletonable" : true,
"reference" : "0x000000014751ce30",
"children" : [
{
"type" : "UIView",
"isSkeletonable" : true,
"children" : [ ... ],
"reference" : "0x000000014751cfa0"
}
]
}
Unterstützte OS & SDK -Versionen
Dies ist ein Open -Source -Projekt. Sie können also gerne einen Beitrag leisten. Wie?
Sehen Sie alle Mitwirkenden
Weitere Informationen finden Sie in den beitragenden Richtlinien.
Open-Source-Projekte können ohne Ihre Hilfe nicht lange leben. Wenn Sie als nützlich finden, dass SkeletonView nützlich ist, sollten Sie dieses Projekt unterstützen, indem Sie Sponsor werden.
Werden Sie Sponsor durch Github -Sponsoren ❤️
Juanpe Catalán
MIT License
Copyright (c) 2017 Juanpe Catalán
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
