diff --git a/README.md b/README.md index 4ce5c8d..8594d4c 100755 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ • Contributing

-**🌎 README is available in other languages: [🇪🇸](Translations/README_es.md) . [🇨🇳](Translations/README_zh.md) . [🇧🇷](Translations/README_pt-br.md) . [🇰🇷](Translations/README_ko.md) . [🇫🇷](Translations/README_fr.md)** +**🌎 README is available in other languages: [🇪🇸](Translations/README_es.md) . [🇨🇳](Translations/README_zh.md) . [🇧🇷](Translations/README_pt-br.md) . [🇰🇷](Translations/README_ko.md) . [🇫🇷](Translations/README_fr.md) . [🇩🇪](Translations/README_de.md)** Today almost all apps have async processes, such as API requests, long running processes, etc. While the processes are working, usually developers place a loading view to show users that something is going on. diff --git a/Translations/README_de.md b/Translations/README_de.md new file mode 100644 index 0000000..689e77d --- /dev/null +++ b/Translations/README_de.md @@ -0,0 +1,676 @@ +![](../Assets/header2.jpg) + +

+ + + + codebeat badge + + + + + SkeletonView Playground +

+ +

+ Funktionen + • Anleitungen + • Installation + • Verwendung + • Sonstiges + • Beitragen +

+ +**🌎 README ist auch in anderen Sprachen verfügbar: [🇬🇧](../README.md) . [🇪🇸](README_es.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** + +Heutzutage haben fast alle Anwendungen async-Prozesse, z.B. API-Anfragen, lang laufende Prozesse, usw. Während die Prozesse arbeiten, platzieren die Entwickler in der Regel eine Ladeansicht, um den Benutzern zu zeigen, dass im Hintergrund etwas vor sich geht. + +**SkeletonView** wurde entwickelt, um dieses Bedürfnis zu befriedigen, indem auf eine elegante Art und Weise, den Nutzern gezeigt wird, dass etwas passiert und sie gleichzeitig darauf vorbereitet, welche Inhalte sie erwarten. + +Viel Spaß damit! 🙂 + + +## +- [🌟 Funktionen](#-funktionen) +- [🎬 Anleitungen](#-anleitungen) +- [📲 Installation](#-installation) +- [🐒 Verwendung](#-verwendung) + - [🌿 Sammlungen](#-sammlungen) + - [🔠 Texte](#-texte) + - [🦋 Erscheinungsbild](#-erscheinungsbild) + - [🎨 Benutzerdefinierte Farben](#-benutzerdefinierte-farben) + - [🏃‍♀️ Animationen](#️-animationen) + - [🏄 Übergänge](#-übergänge) +- [✨ Sonstiges](#-sonstiges) +- [❤️ Beitragen](#️-beitragen) +- [📢 Erwähnungen](#-erwähnungen) +- [🏆 Sponsoren](#-sponsoren) +- [👨🏻‍💻 Autor](#-autor) +- [👮🏻 Lizenz](#-lizenz) + + + +## 🌟 Funktionen + +* Einfach zu benutzen +* Alle UIViews sind skelettierbar +* Vollständig anpassbar +* Universal (iPhone & iPad) +* Freundlicher interface builder +* Einfache Swift-Syntax +* Leicht lesbarer code + + +## 🎬 Anleitungen + +| [![](https://img.youtube.com/vi/75kgOhWsPNA/maxresdefault.jpg)](https://youtu.be/75kgOhWsPNA)|[![](https://img.youtube.com/vi/MVCiM_VdxVA/maxresdefault.jpg)](https://youtu.be/MVCiM_VdxVA)|[![](https://img.youtube.com/vi/Qq3Evspeea8/maxresdefault.jpg)](https://youtu.be/Qq3Evspeea8)|[![](https://img.youtube.com/vi/Zx1Pg1gPfxA/maxresdefault.jpg)](https://www.youtube.com/watch?v=Zx1Pg1gPfxA) +|:---: | :---: | :---: | :---: +|[**SkeletonView Guides - Getting started**](https://youtu.be/75kgOhWsPNA)|[**How to Create Loading View with Skeleton View in Swift 5.2**](https://youtu.be/MVCiM_VdxVA) by iKh4ever Studio|[**Create Skeleton Loading View in App (Swift 5) - Xcode 11, 2020**](https://youtu.be/Qq3Evspeea8) by iOS Academy| [**Cómo crear una ANIMACIÓN de CARGA de DATOS en iOS**](https://www.youtube.com/watch?v=Zx1Pg1gPfxA) by MoureDev + + +## 📲 Installation + +* [CocoaPods](https://guides.cocoapods.org/using/using-cocoapods.html): + +```ruby +pod 'SkeletonView' +``` + +* [Carthage](https://github.com/Carthage/Carthage): + +```ruby +github "Juanpe/SkeletonView" +``` + +* [Swift Package Manager](https://swift.org/package-manager/): + +```swift +dependencies: [ + .package(url: "https://github.com/Juanpe/SkeletonView.git", from: "1.7.0") +] +``` + +> 📣 **WICHTIG!** +> +> Seit Version 1.30.0 unterstützt `SkeletonView` **XCFrameworks**, wenn sie es also als **XCFramework** installieren möchten, verwenden sie bitte stattdessen [dieses Repo](https://github.com/Juanpe/SkeletonView-XCFramework.git). + + +## 🐒 Verwendung + +Nur **3** Schritte sind erforderlich, um `SkeletonView` zu verwenden: + +1️⃣ Importieren sie SkeletonView an der richtigen Stelle. +```swift +import SkeletonView +``` + +2️⃣ Legen sie nun fest, welche Ansichten `skelettierbar` sein sollen. Dies können sie auf zwei Arten erreichen: + +**Durch code:** +```swift +avatarImageView.isSkeletonable = true +``` +**Durch IB/Storyboards:** + +![](../Assets/storyboard.png) + +3️⃣ Sobald sie die Views eingestellt haben, können sie das **Skelett** anzeigen. Dazu haben sie **4** Auswahlmöglichkeiten: + +```swift +(1) view.showSkeleton() // Einfarbig +(2) view.showGradientSkeleton() // Farbverlauf +(3) view.showAnimatedSkeleton() // Einfarbig animiert +(4) view.showAnimatedGradientSkeleton() // Farbverlauf animiert +``` + +**Vorschau** + + + + + + + + + + + + + + +
+
Einfarbig
+		 +
Farbverlauf
+		 +
Einfarbig animiert
+		 +
Farbverlauf animiert
+
+ + + + + + + +
+ +> 📣 **WICHTIG!** +> +> `SkeletonView` ist rekursiv, wenn sie also das Skelett in allen skelettierbaren Views anzeigen wollen, müssen sie nur die show-Methode in der Haupt-Container-View aufrufen. Zum Beispiel mit `UIViewControllers`. + + + + +### 🌿 Sammlungen + +```SkeletonView``` ist kompatibel mit ```UITableView``` und ```UICollectionView```. + + +**UITableView** + +Wenn sie das Skelett in eines ```UITableView```'s anzeigen wollen, müssen dieses dem ```SkeletonTableViewDataSource```-Protokoll entsprechen. + +``` swift +public protocol SkeletonTableViewDataSource: UITableViewDataSource { + func numSections(in collectionSkeletonView: UITableView) -> Int // Standard: 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? // Standard: nil + func collectionSkeletonView(_ skeletonView: UITableView, prepareCellForSkeleton cell: UITableViewCell, at indexPath: IndexPath) +} +``` +Wie sie sehen können, erbt dieses Protokoll von ```UITableViewDataSource```, so dass sie dieses Protokoll durch das Skelettprotokoll ersetzen können. + +Dieses Protokoll hat eine Standardimplementierung für einige Methoden. Zum Beispiel wird die Anzahl der Zeilen für jeden Abschnitt in Echtzeit berechnet: + +``` swift +func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int +// Standard: +// Es wird berechnet, wie viele Zellen benötigt werden, um die gesamte Tabellenansicht zu füllen +``` + +> 📣 **WICHTIG!** +> +> Wenn sie in der obigen Methode `UITableView.automaticNumberOfSkeletonRows` zurückgeben, verhält es sich wie das Standardverhalten (d.h. es wird berechnet, wie viele Zellen benötigt werden, um den gesamten Tableview zu füllen). + +Es gibt nur eine Methode, die sie implementieren müssen, damit Skeleton den Zellen ID kennt. Diese Methode hat keine Standardimplementierung: + ``` swift + func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier { + return "CellIdentifier" +} + ``` +Standardmäßig entfernt die library die Zellen aus jedem indexPath, aber sie können dies auch tun, wenn sie einige Änderungen vornehmen möchten, bevor das Skelett erscheint: +``` swift + 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: + ``` swift + 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 Kopf- als auch die Fußzeilen skelettieren. Diese müssen nur dem Protokoll "SkeletonTableViewDelegate" entsprechen. + +```swift +public protocol SkeletonTableViewDelegate: UITableViewDelegate { + func collectionSkeletonView(_ skeletonView: UITableView, identifierForHeaderInSection section: Int) -> ReusableHeaderFooterIdentifier? // standard: nil + func collectionSkeletonView(_ skeletonView: UITableView, identifierForFooterInSection section: Int) -> ReusableHeaderFooterIdentifier? // standard: nil +} +``` + +> 📣 **WICHTIG!** +> +> 1️⃣ Wenn sie größenvariable Zellen verwenden (**`tableView.rowHeight = UITableViewAutomaticDimension`**), ist es zwingend erforderlich, die **`estimatedRowHeight`** zu definieren. +> +> 2️⃣ Wenn man Elemente in einer **`UITableViewCell`** hinzufügt, sollte man sie dem **`contentView`** hinzufügen und nicht direkt in der Zelle. +> ```swift +> self.contentView.addSubview(titleLabel) ✅ +> self.addSubview(titleLabel) ❌ +> ``` + + + +**UICollectionView** + +Für `UICollectionView` müssen sie dem Protokoll `SkeletonCollectionViewDataSource` entsprechen. + +``` swift +public protocol SkeletonCollectionViewDataSource: UICollectionViewDataSource { + func numSections(in collectionSkeletonView: UICollectionView) -> Int // standard: 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? // standard: nil + func collectionSkeletonView(_ skeletonView: UICollectionView, skeletonCellForItemAt indexPath: IndexPath) -> UICollectionViewCell? // standard: 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 derselbe wie bei ```UITableView``` + + +### 🔠 Texte + +![](../Assets/multilines2.png) + +Wenn Elemente mit Text verwendet werden, zeichnet ```SkeletonView``` Linien, um Text zu simulieren. + +Sie können einige Variablen für mehrzeilige Elemente einstellen. + +| Variable | Typ | Standard | Vorschau +| ------- | ------- |------- | ------- +| **lastLineFillPercent** | `CGFloat` | `70`| ![](../Assets/multiline_lastline.png) +| **linesCornerRadius** | `Int` | `0` | ![](../Assets/multiline_corner.png) +| **skeletonLineSpacing** | `CGFloat` | `10` | ![](../Assets/multiline_lineSpacing.png) +| **skeletonPaddingInsets** | `UIEdgeInsets` | `.zero` | ![](../Assets/multiline_insets.png) +| **skeletonTextLineHeight** | `SkeletonTextLineHeight` | `.fixed(15)` | ![](../Assets/multiline_lineHeight.png) +| **skeletonTextNumberOfLines** | `SkeletonTextNumberOfLines` | `.inherited` | ![](../Assets/multiline_corner.png) + +
+ +Um den Prozentsatz oder den Radius **mit Hilfe von Code** zu ändern, legen sie diese Variablen fest: +```swift +descriptionTextView.lastLineFillPercent = 50 +descriptionTextView.linesCornerRadius = 5 +``` + +Oder, wenn sie es vorziehen, verwenden sie **IB/Storyboard**: + +![](../Assets/multiline_customize.png) + +
+ +**Wie kann die Anzahl der Zeilen festgelegt werden?** + + +Standardmäßig entspricht die Anzahl der Linien dem Wert der Variable `numberOfLines`. Und wenn es auf **null** gesetzt ist, wird berechnet, wie viele Linien benötigt werden, um das gesamte Skelett zu füllen und es zu zeichnen. + +Wenn sie jedoch eine bestimmte Anzahl von Zeilen für das Skelett festlegen möchten, können sie dies mit der Variable `skeletonTextNumberOfLines` tun. Diese Variable hat zwei mögliche Werte: `inherited`, der den Wert `numberOfLines` zurückgibt, und `custom(Int)`, der die spezifische Anzahl von Zeilen zurückgibt, die als zugehöriger Wert angegeben wurde. + +Zum Beispiel: + +```swift +label.skeletonTextNumberOfLines = 3 // .custom(3) +``` + +
+ +> **⚠️ VERALTET!** +> +> **useFontLineHeight** wurde abgeschafft. Sie können stattdessen **skeletonTextLineHeight** verwenden: +> ```swift +> descriptionTextView.skeletonTextLineHeight = .relativeToFont +> ``` + +> **📣 WICHTIG!** +> +> Bitte beachten sie, dass bei Ansichten ohne mehrere Zeilen die einzelne Zeile +> als letzte Zeile betrachtet wird. + + + +### 🦋 Erscheinungsbild + +Die Skelette haben ein Standardaussehen. Wenn sie also die Farbe, den Farbverlauf oder Mehrlinien-Eigenschaften nicht angeben, verwendet `SkeletonView` die Standardwerte. + +Standardwerte: +- **tintColor**: `UIColor` + - *standard: `.skeletonDefault` (gleich wie `.clouds`, aber anpassungsfähig an den dunklen Modus)* +- **gradient**: SkeletonGradient + - *standard: `SkeletonGradient(baseColor: .skeletonDefault)`* +- **multilineHeight**: `CGFloat` + - *standard: 15* +- **multilineSpacing**: `CGFloat` + - *standard: 10* +- **multilineLastLineFillPercent**: `Int` + - *standard: 70* +- **multilineCornerRadius**: `Int` + - *standard: 0* +- **skeletonCornerRadius**: `CGFloat` (IBInspectable)(Macht ihre Skelettansicht mit Ecken) + - *standard: 0* + +Um diese Standardwerte zu erhalten, können sie `SkeletonAppearance.default` verwenden. Mit dieser Variable können sie auch die Werte einstellen: +```swift +SkeletonAppearance.default.multilineHeight = 20 +SkeletonAppearance.default.tintColor = .green +``` + +> **⚠️ VERALTET!** +> +> **useFontLineHeight** wurde abgeschafft. Sie können stattdessen **textLineHeight** verwenden: +> ```swift +> SkeletonAppearance.default.textLineHeight = .relativeToFont +> ``` + + +### 🎨 Benutzerdefinierte Farben + +Sie können entscheiden, mit welcher Farbe das Skelett eingefärbt wird. Sie brauchen nur die gewünschte Farbe oder den gewünschten Farbverlauf als Parameter zu übergeben. + +**Verwendung von Volltonfarben** +```swift +view.showSkeleton(usingColor: UIColor.gray) // Einfarbig +// oder +view.showSkeleton(usingColor: UIColor(red: 25.0, green: 30.0, blue: 255.0, alpha: 1.0)) +``` +**Verwendung von Farbverläufen** +```swift +let gradient = SkeletonGradient(baseColor: UIColor.midnightBlue) +view.showGradientSkeleton(usingGradient: gradient) // Farbverlauf +``` + +Außerdem bietet **SkeletonView** 20 flache Farben 🤙🏼. + +```UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...``` + +![](../Assets/flatcolors.png) +###### Bild von der Website [https://flatuicolors.com](https://flatuicolors.com) entnommen + + +### 🏃‍♀️ Animationen + +**SkeletonView** hat zwei eingebaute Animationen, *pulse* für einfarbige Skelette und *sliding* für Farbverläufe. + +Außerdem ist es sehr einfach, eine eigene Skelettanimationen zu erstellen. + + +Skeleton bietet die Funktion `showAnimatedSkeleton`, die eine Closure ```SkeletonLayerAnimation``` besitzt, in der sie ihre eigene Animation definieren können. + +```swift +public typealias SkeletonLayerAnimation = (CALayer) -> CAAnimation +``` + +Sie können die Funktion wie folgt aufrufen: + +```swift +view.showAnimatedSkeleton { (layer) -> CAAnimation in + let animation = CAAnimation() + // Passen sie hier ihre Animation an + + return animation +} +``` + +Es ist ein ```SkeletonAnimationBuilder``` verfügbar. Es ist ein Builder um ```SkeletonLayerAnimation``` zu erstellen. + +Heute kann man **Gleitanimationen** für Farbverläufe erstellen, indem man die **Richtung** und die **Dauer** der Animation festlegt (Standard = 1,5s). + +```swift +// 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 enum, mit den folgenden cases: + +| Richtung | Vorschau +|------- | ------- +| .leftRight | ![](../Assets/sliding_left_to_right.gif) +| .rightLeft | ![](../Assets/sliding_right_to_left.gif) +| .topBottom | ![](../Assets/sliding_top_to_bottom.gif) +| .bottomTop | ![](../Assets/sliding_bottom_to_top.gif) +| .topLeftBottomRight | ![](../Assets/sliding_topLeft_to_bottomRight.gif) +| .bottomRightTopLeft | ![](../Assets/sliding_bottomRight_to_topLeft.gif) + +> **😉 TRICK!** +> +> Es gibt noch eine andere Möglichkeit, Schiebeanimationen zu erstellen, indem man einfach diese Abkürzung benutzt: +> ```swift +> let animation = GradientDirection.leftToRight.slidingAnimation() +> ``` + + + +### 🏄 Übergänge + +**SkeletonView** hat eingebaute Übergänge, um die Skelette auf eine *ruhigere* Weise **ein- und auszublenden** 🤙. + +Um den Übergang zu benutzen, fügen sie einfach den Parameter ```transition``` zu ihrer Funktion ```showSkeleton()``` oder ```hideSkeleton()``` mit der Übergangszeit hinzu, wie hier: + +```swift +view.showSkeleton(transition: .crossDissolve(0.25)) //Einblenden des Skeleton mit Querauflösen-Übergang mit 0,25 Sekunden Übergangszeit +view.hideSkeleton(transition: .crossDissolve(0.25)) //Ausblenden des Skeleton mit Querauflösen-Übergang mit 0,25 Sekunden Übergangszeit + +``` + +Der Standardwert ist `crossDissolve(0.25)` + +**Vorschau** + + + + + + + + + + +
+
Keinen
+		 +
Querauflösen
+
+ + + +
+ + +## ✨ Sonstiges + + + +**Hierarchie** + +Da ```SkeletonView``` rekursiv ist, und wir wollen, dass Skeleton sehr effizient ist, wollen wir die Rekursion so schnell wie möglich beenden. Aus diesem Grund müssen sie die Container-Ansicht auf `Skeletonable` setzen, denn Skeleton wird aufhören, nach `skeletonable` Unteransichten zu suchen, sobald eine Ansicht nicht skelettierbar ist, und damit die Rekursion beenden. + +Denn ein Bild sagt mehr als tausend Worte: + +In diesem Beispiel haben wir einen `UIViewController` mit einem `ContainerView` und einem `UITableView`. Wenn der View fertig ist, zeigen wir das Skelett mit dieser Methode: +``` +view.showSkeleton() +``` + +> ```isSkeletonable```= ☠️ + +| Konfiguration | Ergebnis| +|:-------:|:-------:| +| | | +| | | +| | | +|| | +| | | +| | | + + + +**Skelettansichten-Layout** + +Manchmal kann es vorkommen, dass das Skelett-Layout nicht zu ihrem Layout passt, weil sich die Grenzen der übergeordneten Ansicht geändert haben. ~Zum Beispiel, wenn sie das Gerät drehen. + +Sie können die Skelettansichten wie folgt neu anordnen: + +```swift +override func viewDidLayoutSubviews() { + view.layoutSkeletonIfNeeded() +} +``` + +> 📣 **WICHTIG!** +> +> Sie sollten diese Methode nicht aufrufen. Ab **Version 1.8.1** brauchen sie diese Methode nicht mehr aufzurufen, die Bibliothek macht das automatisch. Sie können diese Methode also **NUR** in den Fällen verwenden, in denen sie das Layout des Skeletts manuell aktualisieren müssen. + + + + +**Skelett aktualisieren** + +Sie können die Konfiguration des Skeletts jederzeit ändern, wie z.B. seine Farbe, Animation, etc. mit den folgenden Methoden: + +```swift +(1) view.updateSkeleton() // Einfarbig +(2) view.updateGradientSkeleton() // Farbverlauf +(3) view.updateAnimatedSkeleton() // Einfarbig animiert +(4) view.updateAnimatedGradientSkeleton() // Farbverlauf animiert +``` + +**Ausblenden von Ansichten, wenn die Animation beginnt** + +Manchmal möchte man einige Ansichten ausblenden, wenn die Animation beginnt. Dafür gibt es eine praktische Variable, die man benutzen kann: + +```swift +view.isHiddenWhenSkeletonIsActive = true // Dies funktioniert nur, wenn isSkeletonable = true +``` + +**Benutzerinteraktion nicht ändern, wenn das Skelett aktiv ist** + + +Standardmäßig ist die Benutzerinteraktion für skelettierte Elemente deaktiviert, aber wenn sie den Indikator für die Benutzerinteraktion nicht ändern wollen, wenn das Skelett aktiv ist, können sie die Variable `isUserInteractionDisabledWhenSkeletonIsActive` verwenden: + +```swift +view.isUserInteractionDisabledWhenSkeletonIsActive = false // Die Ansicht wird aktiv sein, wenn das Skelett aktiv ist. +``` + +**Zeilenhöhe der Schriftart für die Skelettlinien in Labels nicht verwenden** + +`False`, um die automatische Anpassung des Skeletts an die Schrifthöhe für ein `UILabel` oder `UITextView` zu deaktivieren. Standardmäßig wird die Höhe der Skelettlinien automatisch an die Schrifthöhe angepasst, um den Text im Label-Rect genauer wiederzugeben, anstatt die Bounding Box zu verwenden. + +```swift +label.useFontLineHeight = false +``` + +**Skelett verzögert anzeigen** + +Sie können die Darstellung des Skeletts verzögern, wenn die Ansichten schnell aktualisiert werden. + +```swift +func showSkeleton(usingColor: UIColor, + animated: Bool, + delay: TimeInterval, + transition: SkeletonTransitionStyle) +``` + +```swift +func showGradientSkeleton(usingGradient: SkeletonGradient, + animated: Bool, + delay: TimeInterval, + transition: SkeletonTransitionStyle) +``` + +**Debug** + +Um die Debug-Aufgaben zu erleichtern, wenn etwas nicht richtig funktioniert, hat **`SkeletonView`** einige neue Werkzeuge. + +Erstens, `UIView` hat eine Variable mit seinen Skelett-Informationen zur Verfügung: +```swift +var sk.skeletonTreeDescription: String + +``` + +Außerdem können sie den neuen **Debug-Modus** aktivieren. Fügen sie einfach die Umgebungsvariable `SKELETON_DEBUG` hinzu um ihn zu aktivieren. + +![](../Assets/debug_mode.png) + +Wenn das Skelett dann 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** + +* iOS 9.0+ +* tvOS 9.0+ +* Swift 5.3 + +## ❤️ Beitragen +Dies ist ein Open-Source-Projekt, sie können also gerne dazu beitragen. Wie? + +- Eröffnen sie ein [issue](https://github.com/Juanpe/SkeletonView/issues/new). +- Senden sie Feedback über [email](mailto://juanpecatalan.com). +- Schlagen sie ihre eigenen Korrekturen und Vorschläge vor und öffnen sie einen Pull Request mit den Änderungen. + +Siehe [alle Mitwirkenden](https://github.com/Juanpe/SkeletonView/graphs/contributors) + +Für weitere Informationen lesen sie bitte die [contributing guidelines](https://github.com/Juanpe/SkeletonView/blob/main/CONTRIBUTING.md). + + +## 📢 Erwähnungen + +- [iOS Dev Weekly #327](https://iosdevweekly.com/issues/327#start) +- [Hacking with Swift Articles](https://www.hackingwithswift.com/articles/40/skeletonview-makes-loading-content-beautiful) +- [Top 10 Swift Articles November](https://medium.mybridge.co/swift-top-10-articles-for-the-past-month-v-nov-2017-dfed7861cd65) +- [30 Amazing iOS Swift Libraries (v2018)](https://medium.mybridge.co/30-amazing-ios-swift-libraries-for-the-past-year-v-2018-7cf15027eee9) +- [AppCoda Weekly #44](http://digest.appcoda.com/issues/appcoda-weekly-issue-44-81899) +- [iOS Cookies Newsletter #103](https://us11.campaign-archive.com/?u=cd1f3ed33c6527331d82107ba&id=48131a516d) +- [Swift Developments Newsletter #113](https://andybargh.com/swiftdevelopments-113/) +- [iOS Goodies #204](http://ios-goodies.com/post/167557280951/week-204) +- [Swift Weekly #96](http://digest.swiftweekly.com/issues/swift-weekly-issue-96-81759) +- [CocoaControls](https://www.cocoacontrols.com/controls/skeletonview) +- [Awesome iOS Newsletter #74](https://ios.libhunt.com/newsletter/74) +- [Swift News #36](https://www.youtube.com/watch?v=mAGpsQiy6so) +- [Best iOS articles, new tools & more](https://medium.com/flawless-app-stories/best-ios-articles-new-tools-more-fcbe673e10d) + +## 🏆 Sponsoren + +Open-Source-Projekte leben nicht lange ohne ihre Hilfe. Wenn sie **SkeletonView** nützlich finden, ziehen sie bitte in Betracht, dieses +Projekt zu unterstützen, indem sie ein Sponsor werden. + +Werden sie Sponsor über [GitHub Sponsors] (https://github.com/sponsors/Juanpe) :heart: + +## 👨🏻‍💻 Autor + +[Juanpe Catalán](http://www.twitter.com/JuanpeCatalan) + +Buy me a coffee + + +## 👮🏻 Lizenz + +``` +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. +``` diff --git a/Translations/README_es.md b/Translations/README_es.md index 5a56850..9b5e446 100644 --- a/Translations/README_es.md +++ b/Translations/README_es.md @@ -18,7 +18,7 @@ • Contribuir

-**🌎 README está disponible en estos idiomas: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** +**🌎 README está disponible en estos idiomas: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md) . [🇩🇪](README_de.md)** Hoy en día, La mayoría de las apps tiene procesos asíncronos, como peticiones a una API, procesos que tardan mucho tiempo, etc. Mientras estos procesos se están ejecutando, se suele mostrar un aburrido spinner indicando que algo está pasando. diff --git a/Translations/README_fr.md b/Translations/README_fr.md index 92bf7ca..2fe96be 100644 --- a/Translations/README_fr.md +++ b/Translations/README_fr.md @@ -24,7 +24,7 @@

-**🌎 Traductions: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** +**🌎 Traductions: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md) . [🇩🇪](README_de.md)** Aujourd'hui, presque toutes les applications ont des processus asynchrones, tels que les requêtes Api, les processus de longue durée, etc. Et pendant que les processus fonctionnent, les développeurs affichent généralement une vue de chargement pour montrer aux utilisateurs que quelque chose se passe. diff --git a/Translations/README_ko.md b/Translations/README_ko.md index f4603ef..c63a30f 100644 --- a/Translations/README_ko.md +++ b/Translations/README_ko.md @@ -23,7 +23,7 @@

-**🌎 번역에 도움을 주신분들: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** +**🌎 번역에 도움을 주신분들: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md) . [🇩🇪](README_de.md)** 오늘날 거의 대부분의 앱들은 비동기 방식의 API 호출을 사용하는 프로세스를 가지고 있습니다. 프로세스가 작동하는동안 개발자들은 작업이 실행되고 있다는것을 사용자들에게 보여주기 위해서 로딩 뷰를 배치합니다. diff --git a/Translations/README_pt-br.md b/Translations/README_pt-br.md index 535317b..4b8a1b2 100755 --- a/Translations/README_pt-br.md +++ b/Translations/README_pt-br.md @@ -23,7 +23,7 @@

-**🌎 Traduções: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** +**🌎 Traduções: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md) . [🇩🇪](README_de.md)** Hoje, quase todos os apps têm processos assíncronos, como requisições de API, processos longos, etc. E enquanto os processos estão ocorrendo, normalmente os desenvolvedores usam uma view que mostra os usuarios que algo está ocorrendo. diff --git a/Translations/README_zh.md b/Translations/README_zh.md index 6008c4b..84c8dea 100755 --- a/Translations/README_zh.md +++ b/Translations/README_zh.md @@ -23,7 +23,7 @@

-**🌎 翻译: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md)** +**🌎 翻译: [🇬🇧](../README.md) . [🇨🇳](README_zh.md) . [🇧🇷](README_pt-br.md) . [🇰🇷](README_ko.md) . [🇫🇷](README_fr.md) . [🇩🇪](README_de.md)** 今天，几乎所有的应用程序都有异步流程，例如：Api请求、长时间运行的流程等。虽然流程正在运行，但通常开发人员会设置一个加载视图来向用户显示正在发生的事情。