SkeletonView
? 1.31.0
Caractéristiques • Guides • Installation • Utilisation • Divers • Contribution
? Readme est disponible dans d'autres langues: ?? . ?? . ?? . ?? . ?? . ??
Aujourd'hui, presque toutes les applications ont des processus asynchrones, tels que les demandes d'API, les processus de longue durée, etc. Pendant que les processus fonctionnent, les développeurs placent généralement une vue de chargement pour montrer aux utilisateurs que quelque chose se passe.
SkeletonView a été conçu pour répondre à ce besoin, un moyen élégant de montrer aux utilisateurs que quelque chose se passe et de les préparer également pour lesquels le contenu attend.
Profitez-en! ?
| Guides SkeletonView - Mise en route | Comment créer une vue de chargement avec vue squelette dans Swift 5.2 par ikh4ever studio | Créer une vue de chargement squelette dans l'application (Swift 5) - Xcode 11, 2020 par iOS Academy | Cómo crear una animación de carga de datos en ios by Mouredev |
pod 'SkeletonView' github "Juanpe/SkeletonView"dependencies: [
. package ( url : " https://github.com/Juanpe/SkeletonView.git " , from : " 1.7.0 " )
]IMPORTANT!
Depuis la version 1.30.0,
SkeletonViewprend en charge XCFrameWorks , donc si vous souhaitez l'installer comme XCFramework , veuillez utiliser ce référentiel à la place.
Seulement 3 étapes nécessaires pour utiliser SkeletonView :
1️⃣ Importer SkeletonView au bon endroit.
import SkeletonView 2️⃣ Maintenant, définissez les vues skeletonables . Vous y parvenez de deux manières:
Utilisation du code:
avatarImageView . isSkeletonable = trueUtilisation de IB / Storyboards:
3️⃣ Une fois que vous avez défini les vues, vous pouvez montrer le squelette . Pour ce faire, vous avez 4 choix:
( 1 ) view . showSkeleton ( ) // Solid
( 2 ) view . showGradientSkeleton ( ) // Gradient
( 3 ) view . showAnimatedSkeleton ( ) // Solid animated
( 4 ) view . showAnimatedGradientSkeleton ( ) // Gradient animatedPrévisualisation
| Solide | Pente | Animé solide | Gradient animé |
 |  |  |  |
IMPORTANT!
SkeletonViewest récursif, donc si vous voulez afficher le squelette dans toutes les vues squeletables, il vous suffit d'appeler la méthode Show dans la vue principale du conteneur. Par exemple, avecUIViewControllers.
SkeletonView est compatible avec UITableView et UICollectionView .
Uablewiew
Si vous souhaitez montrer le squelette dans un UITableView , vous devez vous conformer au protocole SkeletonTableViewDataSource .
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 )
} Comme vous pouvez le voir, ce protocole hérite de UITableViewDataSource , vous pouvez donc remplacer ce protocole par le protocole squelette.
Ce protocole a une implémentation par défaut pour certaines méthodes. Par exemple, le nombre de lignes pour chaque section est calculé dans l'exécution:
func collectionSkeletonView ( _ skeletonView : UITableView , numberOfRowsInSection section : Int ) -> Int
// Default:
// It calculates how many cells need to populate whole tableviewIMPORTANT!
Si vous retournez
UITableView.automaticNumberOfSkeletonRowsdans la méthode ci-dessus, il agit comme le comportement par défaut (c'est-à-dire qu'il calcule le nombre de cellules nécessaires pour remplir l'ensemble du tableau).
Il n'y a qu'une seule méthode que vous devez implémenter pour informer le squelette de l'identifiant cellulaire. Cette méthode n'a pas d'implémentation par défaut:
func collectionSkeletonView ( _ skeletonView : UITableView , cellIdentifierForRowAt indexPath : IndexPath ) -> ReusableCellIdentifier {
return " CellIdentifier "
}Par défaut, la bibliothèque désoblige les cellules de chaque trajet d'index, mais vous pouvez également le faire si vous souhaitez apporter des modifications avant l'apparition du squelette:
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
}Si vous préférez laisser la partie de la bibliothèque, vous pouvez configurer la cellule en utilisant cette méthode:
func collectionSkeletonView ( _ skeletonView : UITableView , prepareCellForSkeleton cell : UITableViewCell , at indexPath : IndexPath ) {
let cell = cell as? Cell
cell ? . textField . isHidden = indexPath . row == 0
} En outre, vous pouvez squeletter les en-têtes et les pieds de page. Vous devez vous conformer au protocole SkeletonTableViewDelegate .
public protocol SkeletonTableViewDelegate : UITableViewDelegate {
func collectionSkeletonView ( _ skeletonView : UITableView , identifierForHeaderInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
func collectionSkeletonView ( _ skeletonView : UITableView , identifierForFooterInSection section : Int ) -> ReusableHeaderFooterIdentifier ? // default: nil
}IMPORTANT!
1️⃣ Si vous utilisez des cellules redonnables (
tableView.rowHeight = UITableViewAutomaticDimension), il est obligatoire de définir leestimatedRowHeight.2️⃣ Lorsque vous ajoutez des éléments dans un
UITableViewCellvous devez l'ajouter àcontentViewet non à la cellule directement.self . contentView . addSubview ( titleLabel ) ✅ self . addSubview ( titleLabel )
UicollectionView
Pour UICollectionView , vous devez vous conformer au protocole SkeletonCollectionViewDataSource .
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 )
} Le reste du processus est le même que UITableView
Lorsque vous utilisez des éléments avec du texte, SkeletonView dessine des lignes pour simuler du texte.
Vous pouvez définir certaines propriétés pour les éléments multilines.
| Propriété | Taper | Défaut | Prévisualisation |
|---|---|---|---|
| LastlineFillPercent | CGFloat | 70 |  |
| linecornerradius | Int | 0 |  |
| Espoyant squeleton | CGFloat | 10 |  |
| squeletonpaddinsesets | UIEdgeInsets | .zero |  |
| squelettextlineheight | SkeletonTextLineHeight | .fixed(15) |  |
| squelettextNumberflines | SkeletonTextNumberOfLines | .inherited | |
Pour modifier le pourcentage ou le rayon à l'aide du code , définissez les propriétés:
descriptionTextView . lastLineFillPercent = 50
descriptionTextView . linesCornerRadius = 5Ou, si vous préférez utiliser IB / Storyboard :
Comment définir le nombre de lignes?
Par défaut, le nombre de lignes est le même que la valeur de la propriété numberOfLines . Et, s'il est réglé sur zéro , il calculera le nombre de lignes nécessaires pour remplir tout le squelette et le dessiner.
Cependant, si vous souhaitez définir un nombre spécifique de lignes squelettes, vous pouvez le faire en définissant la propriété skeletonTextNumberOfLines . Cette propriété a deux valeurs possibles, inherited qui renvoie la valeur numberOfLines et custom(Int) qui renvoie le nombre spécifique de lignes spécifiées comme valeur associée.
Par exemple:
label . skeletonTextNumberOfLines = 3 // .custom(3)
️ Déprécié!UseFontlineHeight a été obsolète. Vous pouvez plutôt utiliser SkeletTextExtLineHeight :
descriptionTextView . skeletonTextLineHeight = . relativeToFont
IMPORTANT!
Veuillez noter que pour les vues sans plusieurs lignes, la ligne unique sera considérée comme la dernière ligne.
Les squelettes ont une apparence par défaut. Ainsi, lorsque vous ne spécifiez pas les propriétés de couleur, de gradient ou de multilines, SkeletonView utilise les valeurs par défaut.
Valeurs par défaut:
UIColor.skeletonDefault (identique à .clouds mais adaptatif au mode sombre)SkeletonGradient(baseColor: .skeletonDefault)CGFloatCGFloatIntIntCGFloat (ibinspectable) (faites votre vue squelette avec le coin) Pour obtenir ces valeurs par défaut, vous pouvez utiliser SkeletonAppearance.default . En utilisant cette propriété, vous pouvez également définir les valeurs:
SkeletonAppearance . default . multilineHeight = 20
SkeletonAppearance . default . tintColor = . green
️ Déprécié!UseFontlineHeight a été obsolète. Vous pouvez utiliser TextLineHeight à la place:
SkeletonAppearance . default . textLineHeight = . relativeToFont
Vous pouvez décider de quelle couleur le squelette est teinté. Il vous suffit de passer comme paramètre la couleur ou le dégradé que vous souhaitez.
En utilisant des couleurs unis
view . showSkeleton ( usingColor : UIColor . gray ) // Solid
// or
view . showSkeleton ( usingColor : UIColor ( red : 25.0 , green : 30.0 , blue : 255.0 , alpha : 1.0 ) )Utilisation des gradients
let gradient = SkeletonGradient ( baseColor : UIColor . midnightBlue )
view . showGradientSkeleton ( usingGradient : gradient ) // GradientDe plus, SkeletonView dispose de 20 couleurs plates ??
UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...
SkeletonView propose deux animations intégrées, Pulse pour les squelettes solides et glissement pour les gradients.
De plus, si vous voulez faire votre propre animation squelette, c'est vraiment facile.
Skeleton fournit la fonction showAnimatedSkeleton qui a une fermeture SkeletonLayerAnimation où vous pouvez définir votre animation personnalisée.
public typealias SkeletonLayerAnimation = ( CALayer ) -> CAAnimationVous pouvez appeler la fonction comme ceci:
view . showAnimatedSkeleton { ( layer ) -> CAAnimation in
let animation = CAAnimation ( )
// Customize here your animation
return animation
} Il est disponible SkeletonAnimationBuilder . C'est un constructeur pour faire SkeletonLayerAnimation .
Aujourd'hui, vous pouvez créer des animations coulissantes pour les gradients, décider de la direction et définir la durée de l'animation (par défaut = 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 est une enum, avec ces cas:
| Direction | Prévisualisation |
|---|---|
| .leftright |  |
| .Rightleft |  |
| .Topbottom |  |
| .Bottomtop |  |
| .Topleftbottomright |  |
| .BottomRightTopleft |  |
ASTUCE!
Existent une autre façon de créer des animations coulissantes, simplement en utilisant ce raccourci:
let animation = GradientDirection . leftToRight . slidingAnimation ( )
SkeletonView a des transitions intégrées pour afficher ou masquer les squelettes d'une manière plus fluide ?
Pour utiliser la transition, ajoutez simplement le paramètre transition à votre fonction showSkeleton() ou hideSkeleton() avec le temps de transition, comme ceci:
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 La valeur par défaut est crossDissolve(0.25)
Prévisualisation
| Aucun | Se dissoudre |
 |  |
Hiérarchie
Étant donné que SkeletonView est récursif et que nous voulons que le squelette soit très efficace, nous voulons arrêter la récursivité dès que possible. Pour cette raison, vous devez définir la vue sur le conteneur comme Skeletonable , car le squelette cessera de chercher des sous-vues skeletonable dès qu'une vue n'est pas squeletable, cassant puis la récursivité.
Parce qu'une image vaut mille mots:
Dans cet exemple, nous avons un UIViewController avec un ContainerView et un UITableView . Lorsque la vue est prête, nous montrons le squelette en utilisant cette méthode:
view.showSkeleton()
isSkeletonable= ☠️
| Configuration | Résultat |
|---|---|
 |  |
 | |
 |  |
 |  |
 |  |
 |  |
Disposition des vues du squelette
Parfois, la disposition du squelette peut ne pas s'adapter à votre disposition car les limites de la vue parent ont changé. Par exemple, la rotation de l'appareil.
Vous pouvez relayer les vues du squelette comme tel:
override func viewDidLayoutSubviews ( ) {
view . layoutSkeletonIfNeeded ( )
}IMPORTANT!
Vous ne devriez pas appeler cette méthode. À partir de la version 1.8.1, vous n'avez pas besoin d'appeler cette méthode, la bibliothèque le fait automatiquement. Ainsi, vous ne pouvez utiliser cette méthode que dans les cas lorsque vous devez mettre à jour la disposition du squelette manuellement.
Mettre à jour le squelette
Vous pouvez modifier la configuration du squelette à tout moment comme sa couleur, l'animation, etc. avec les méthodes suivantes:
( 1 ) view . updateSkeleton ( ) // Solid
( 2 ) view . updateGradientSkeleton ( ) // Gradient
( 3 ) view . updateAnimatedSkeleton ( ) // Solid animated
( 4 ) view . updateAnimatedGradientSkeleton ( ) // Gradient animatedCacheter des vues lorsque l'animation commence
Parfois, vous voulez masquer une vue lorsque l'animation commence, donc il y a une propriété rapide que vous pouvez utiliser pour y arriver:
view . isHiddenWhenSkeletonIsActive = true // This works only when isSkeletonable = trueNe modifiez pas l'interaction utilisateur lorsque le squelette est actif
Par défaut, l'interaction utilisateur est désactivée pour les éléments squelettes, mais si vous ne souhaitez pas modifier l'indicateur d'interaction utilisateur lorsque le squelette est actif, vous pouvez utiliser la propriété isUserInteractionDisabledWhenSkeletonIsActive :
view . isUserInteractionDisabledWhenSkeletonIsActive = false // The view will be active when the skeleton will be active.N'utilisez pas la hauteur de la ligne de police pour les lignes squelettes dans les étiquettes
Faux pour désactiver le squelette pour ajuster automatiquement à la hauteur de la police pour un UILabel ou UITextView . Par défaut, la hauteur des lignes squelettes est ajustée automatiquement à la hauteur de la police pour refléter plus précisément le texte dans l'étiquette RECT plutôt que d'utiliser la boîte de délimitation.
label . useFontLineHeight = falseSquelette de spectacle retardé
Vous pouvez retarder la présentation du squelette si les vues mettent à jour rapidement.
func showSkeleton ( usingColor : UIColor ,
animated : Bool ,
delay : TimeInterval ,
transition : SkeletonTransitionStyle ) func showGradientSkeleton ( usingGradient : SkeletonGradient ,
animated : Bool ,
delay : TimeInterval ,
transition : SkeletonTransitionStyle )Déboguer
Pour faciliter les tâches de débogage lorsque quelque chose ne fonctionne pas bien. SkeletonView a de nouveaux outils.
Tout d'abord, UIView a disponible une propriété avec ses informations sur le squelette:
var sk . skeletonTreeDescription : String En outre, vous pouvez activer le nouveau mode de débogage . Vous ajoutez simplement la variable d'environnement SKELETON_DEBUG et activez-la.
Ensuite, lorsque le squelette apparaît, vous pouvez voir la hiérarchie de vue dans la console Xcode.
{
"type" : "UIView", // UITableView, UILabel...
"isSkeletonable" : true,
"reference" : "0x000000014751ce30",
"children" : [
{
"type" : "UIView",
"isSkeletonable" : true,
"children" : [ ... ],
"reference" : "0x000000014751cfa0"
}
]
}
Versions OS et SDK prises en charge
Il s'agit d'un projet open source, alors n'hésitez pas à contribuer. Comment?
Voir tous les contributeurs
Pour plus d'informations, veuillez lire les directives contributives.
Les projets open source ne peuvent pas vivre longtemps sans votre aide. Si vous trouvez que SkeletonView est utile, veuillez envisager de soutenir ce projet en devenant un sponsor.
Devenez sponsor via GitHub Sponsors ❤️
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.
