Compare commits

...

11 Commits

Author SHA1 Message Date
Juanpe Catalán 458e5fc29b Fix animation when the transition is .none (#481) 2022-01-10 16:32:00 +01:00
Juanpe a6f335df01 Bump version 1.29.0 2022-01-10 10:24:35 +00:00
Juanpe Catalán 106692fbfb Create new `SkeletonGradient constructor (#480) 2022-01-10 11:23:07 +01:00
Juanpe Catalán cb4dcfd07a Update CD.yml 2022-01-10 11:11:19 +01:00
Juanpe 419172104d Bump version 1.28.0 2022-01-10 10:09:04 +00:00
Juanpe Catalán b40a771510 Improved number of lines calculation (#479)
* Create SkeletonTextNumberOfLines

* Update README format
2022-01-10 11:07:31 +01:00
Juanpe Catalán 73b137cda6 Update CD.yml 2022-01-10 11:07:16 +01:00
Juanpe add7401058 Bump version 1.27.0 2022-01-08 12:40:21 +00:00
Tom Cheung 947e2a63c2 Add skeletonCornerRadius in SkeletonAppearance (#478)
* Add skeletonCornerRadius in SkeletonAppearance

* Remove unnecessary type casting
2022-01-08 13:39:03 +01:00
Juanpe Catalán c5462de1db Update CD.yml 2022-01-08 11:25:33 +01:00
Juanpe 00b5d614b6 Bump version 1.26.2 2022-01-08 10:22:27 +00:00
14 changed files with 142 additions and 36 deletions
+3 -9
View File
@@ -32,24 +32,18 @@ jobs:
branch: 'main'
commit_message: 'Bump version ${{ steps.publish_release.outputs.tag_name }}'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Deploy to Cocoapods
continue-on-error: true
env:
COCOAPODS_TRUNK_TOKEN: ${{ secrets.COCOAPODS_TRUNK_TOKEN }}
run: |
gem install cocoapods
set -eo pipefail
pod lib lint --allow-warnings
pod trunk push --allow-warnings
- name: Communicate on PR released
uses: unsplash/comment-on-pr@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
msg: |
Congratulations! 🎉 This was released as part of [SkeletonView ${{ steps.publish_release.outputs.tag_name }}](${{ steps.publish_release.outputs.html_url }}) 🚀
- name: Tweet the release
uses: ethomson/send-tweet-action@v1
with:
+28 -13
View File
@@ -261,7 +261,6 @@ The rest of the process is the same as ```UITableView```
![](Assets/multilines2.png)
When using elements with text, ```SkeletonView``` draws lines to simulate text.
Besides, you can decide how many lines you want. If ```numberOfLines``` is set to zero, it will calculate how many lines needed to populate the whole skeleton and it will be drawn. Instead, if you set it to one, two or any number greater than zero, it will only draw this number of lines.
You can set some properties for multilines elements.
@@ -272,6 +271,34 @@ You can set some properties for multilines elements.
| **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)
<br />
To modify the percent or radius **using code**, set the properties:
```swift
descriptionTextView.lastLineFillPercent = 50
descriptionTextView.linesCornerRadius = 5
```
Or, if you prefer use **IB/Storyboard**:
![](Assets/multiline_customize.png)
<br />
**How to define the number of lines?**
By default, the number of lines is the same as the value of the `numberOfLines` property. And, if it's set to **zero**, it'll calculate how many lines are needed to populate the whole skeleton and draw it.
However, if you want to set a specific number of skeleton lines you can do it by setting the `skeletonTextNumberOfLines` property. This property has two possible values, `inherited` which returns `numberOfLines` value and `custom(Int)` which returns the specific number of lines specified as the associated value.
For example:
```swift
label.skeletonTextNumberOfLines = 3 // .custom(3)
```
<br />
@@ -288,18 +315,6 @@ You can set some properties for multilines elements.
> as the last line.
<br />
To modify the percent or radius **using code**, set the properties:
```swift
descriptionTextView.lastLineFillPercent = 50
descriptionTextView.linesCornerRadius = 5
```
Or, if you prefer use **IB/Storyboard**:
![](Assets/multiline_customize.png)
### 🦋 Appearance
+1 -1
View File
@@ -1,6 +1,6 @@
Pod::Spec.new do |s|
s.name = "SkeletonView"
s.version = "1.26.1"
s.version = "1.29.0"
s.summary = "An elegant way to show users that something is happening and also prepare them to which contents he is waiting"
s.description = <<-DESC
Today almost all apps have async processes, as API requests, long runing processes, etc. And while the processes are working, usually developers place a loading view to show users that something is going on.
+6
View File
@@ -7,6 +7,8 @@
objects = {
/* Begin PBXBuildFile section */
F5225F2A278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift in Sources */ = {isa = PBXBuildFile; fileRef = F5225F29278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift */; };
F5225F2B278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift in Sources */ = {isa = PBXBuildFile; fileRef = F5225F29278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift */; };
F53D731826D399E100249D46 /* SkeletonTreeNode+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = F53D731726D399E100249D46 /* SkeletonTreeNode+Extensions.swift */; };
F53D731926D399E100249D46 /* SkeletonTreeNode+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = F53D731726D399E100249D46 /* SkeletonTreeNode+Extensions.swift */; };
F53D731B26D3A35100249D46 /* SkeletonExtended.swift in Sources */ = {isa = PBXBuildFile; fileRef = F53D731A26D3A35100249D46 /* SkeletonExtended.swift */; };
@@ -151,6 +153,7 @@
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
F5225F29278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SkeletonTextNumberOfLines.swift; sourceTree = "<group>"; };
F53D731726D399E100249D46 /* SkeletonTreeNode+Extensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "SkeletonTreeNode+Extensions.swift"; sourceTree = "<group>"; };
F53D731A26D3A35100249D46 /* SkeletonExtended.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SkeletonExtended.swift; sourceTree = "<group>"; };
F53D732226D3C3A800249D46 /* UILabel+SKExtensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UILabel+SKExtensions.swift"; sourceTree = "<group>"; };
@@ -519,6 +522,7 @@
F556F6B826CE262700A80B83 /* GradientDirection.swift */,
F556F6C126CE27FD00A80B83 /* SkeletonType.swift */,
F5C84883274BB6F000004D1A /* SkeletonTextLineHeight.swift */,
F5225F29278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift */,
);
path = Models;
sourceTree = "<group>";
@@ -834,6 +838,7 @@
F556F58A26CD1F3900A80B83 /* SkeletonGradient.swift in Sources */,
F556F6C326CE27FD00A80B83 /* SkeletonType.swift in Sources */,
F556F58B26CD1F3900A80B83 /* SkeletonLayer.swift in Sources */,
F5225F2B278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift in Sources */,
F556F6A226CD566C00A80B83 /* UIView+SKExtensions.swift in Sources */,
F556F69326CD506C00A80B83 /* Deprecated.swift in Sources */,
F556F6BA26CE262700A80B83 /* GradientDirection.swift in Sources */,
@@ -917,6 +922,7 @@
F556F6C226CE27FD00A80B83 /* SkeletonType.swift in Sources */,
OBJ_123 /* SkeletonLayer.swift in Sources */,
F556F6E026CE367600A80B83 /* UIView+SkeletonView.swift in Sources */,
F5225F2A278C2BCE0061A9B0 /* SkeletonTextNumberOfLines.swift in Sources */,
F556F6A126CD566C00A80B83 /* UIView+SKExtensions.swift in Sources */,
F556F69226CD506C00A80B83 /* Deprecated.swift in Sources */,
F556F6B926CE262700A80B83 /* GradientDirection.swift in Sources */,
@@ -37,5 +37,7 @@ public class SkeletonViewAppearance {
public var renderSingleLineAsView: Bool = false
public var skeletonCornerRadius: Float = 0
}
// codebeat:enable[TOO_MANY_IVARS]
@@ -29,4 +29,8 @@ public struct SkeletonGradient {
}
}
public init(colors: [UIColor]) {
self.gradientColors = colors
}
}
@@ -0,0 +1,32 @@
//
// Copyright SkeletonView. All Rights Reserved.
//
// Licensed under the MIT License (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://opensource.org/licenses/MIT
//
// SkeletonTextNumberOfLines.swift
//
// Created by Juanpe Catalán on 10/1/22.
import UIKit
public enum SkeletonTextNumberOfLines: Equatable, ExpressibleByIntegerLiteral {
/// Returns `numberOfLines` value.
case inherited
/// Returns the specific number of lines specified as the associated value.
case custom(Int)
}
public extension SkeletonTextNumberOfLines {
init(integerLiteral value: Int) {
self = .custom(value)
}
}
@@ -15,6 +15,7 @@ import UIKit
public extension UILabel {
/// Defines the skeleton paddings.
var skeletonPaddingInsets: UIEdgeInsets {
get {
paddingInsets
@@ -24,6 +25,8 @@ public extension UILabel {
}
}
/// Defines the logic for calculating the height of the skeleton lines.
/// Default: `SkeletonAppearance.default.textLineHeight`
var skeletonTextLineHeight: SkeletonTextLineHeight {
get {
textLineHeight
@@ -33,4 +36,15 @@ public extension UILabel {
}
}
/// Defines the logic for calculating the number of lines of the skeleton.
/// Default: `inherited`
var skeletonTextNumberOfLines: SkeletonTextNumberOfLines {
get {
skeletonNumberOfLines
}
set {
skeletonNumberOfLines = newValue
}
}
}
@@ -15,6 +15,7 @@ import UIKit
public extension UITextView {
/// Defines the skeleton paddings.
var skeletonPaddingInsets: UIEdgeInsets {
get {
paddingInsets
@@ -24,6 +25,8 @@ public extension UITextView {
}
}
/// Defines the logic for calculating the height of the skeleton lines.
/// Default: `SkeletonAppearance.default.textLineHeight`
var skeletonTextLineHeight: SkeletonTextLineHeight {
get {
textLineHeight
@@ -33,4 +36,15 @@ public extension UITextView {
}
}
/// Defines the logic for calculating the number of lines of the skeleton.
/// Default: `inherited`
var skeletonTextNumberOfLines: SkeletonTextNumberOfLines {
get {
skeletonNumberOfLines
}
set {
skeletonNumberOfLines = newValue
}
}
}
@@ -59,7 +59,7 @@ struct SkeletonLayer {
/// If there is more than one line, or custom preferences have been set for a single line, draw custom layers
func addTextLinesIfNeeded() {
guard let textView = holderAsTextView else { return }
let config = SkeletonMultilinesLayerConfig(lines: textView.numberOfLines,
let config = SkeletonMultilinesLayerConfig(lines: textView.estimatedNumberOfLines,
lineHeight: textView.estimatedLineHeight,
type: type,
lastLineFillPercent: textView.lastLineFillingPercent,
@@ -75,7 +75,7 @@ struct SkeletonLayer {
func updateLinesIfNeeded() {
guard let textView = holderAsTextView else { return }
let config = SkeletonMultilinesLayerConfig(lines: textView.numberOfLines,
let config = SkeletonMultilinesLayerConfig(lines: textView.estimatedNumberOfLines,
lineHeight: textView.estimatedLineHeight,
type: type,
lastLineFillPercent: textView.lastLineFillingPercent,
@@ -91,7 +91,7 @@ struct SkeletonLayer {
var holderAsTextView: SkeletonTextNode? {
guard let textView = holder as? SkeletonTextNode,
(textView.numberOfLines == -1 || textView.numberOfLines == 0 || textView.numberOfLines > 1 || textView.numberOfLines == 1 && !SkeletonAppearance.default.renderSingleLineAsView) else {
(textView.estimatedNumberOfLines == -1 || textView.estimatedNumberOfLines == 0 || textView.estimatedNumberOfLines > 1 || textView.estimatedNumberOfLines == 1 && !SkeletonAppearance.default.renderSingleLineAsView) else {
return nil
}
return textView
@@ -17,7 +17,7 @@ protocol SkeletonTextNode {
var textLineHeight: SkeletonTextLineHeight { get }
var estimatedLineHeight: CGFloat { get }
var numberOfLines: Int { get }
var estimatedNumberOfLines: Int { get }
var textAlignment: NSTextAlignment { get }
var lastLineFillingPercent: Int { get }
var multilineCornerRadius: Int { get }
@@ -35,6 +35,7 @@ enum SkeletonTextNodeAssociatedKeys {
static var paddingInsets = "paddingInsets"
static var backupHeightConstraints = "backupHeightConstraints"
static var textLineHeight = "textLineHeight"
static var skeletonNumberOfLines = "skeletonNumberOfLines"
}
@@ -48,11 +49,11 @@ extension UILabel: SkeletonTextNode {
return fontLineHeight ?? SkeletonAppearance.default.multilineHeight
case .relativeToConstraints:
guard let constraintsLineHeight = heightConstraints.first?.constant,
numberOfLines != 0 else {
estimatedNumberOfLines != 0 else {
return SkeletonAppearance.default.multilineHeight
}
return constraintsLineHeight / CGFloat(numberOfLines)
return constraintsLineHeight / CGFloat(estimatedNumberOfLines)
}
}
@@ -61,6 +62,20 @@ extension UILabel: SkeletonTextNode {
set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.textLineHeight) }
}
var skeletonNumberOfLines: SkeletonTextNumberOfLines {
get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.skeletonNumberOfLines) as? SkeletonTextNumberOfLines ?? SkeletonTextNumberOfLines.inherited }
set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.skeletonNumberOfLines) }
}
var estimatedNumberOfLines: Int {
switch skeletonNumberOfLines {
case .inherited:
return numberOfLines
case .custom(let lines):
return lines >= 0 ? lines : 1
}
}
var lastLineFillingPercent: Int {
get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.lastLineFillingPercent) as? Int ?? SkeletonAppearance.default.multilineLastLineFillPercent }
set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.lastLineFillingPercent) }
@@ -119,8 +134,18 @@ extension UITextView: SkeletonTextNode {
set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.textLineHeight) }
}
var numberOfLines: Int {
-1
var skeletonNumberOfLines: SkeletonTextNumberOfLines {
get { return ao_get(pkey: &SkeletonTextNodeAssociatedKeys.skeletonNumberOfLines) as? SkeletonTextNumberOfLines ?? SkeletonTextNumberOfLines.inherited }
set { ao_set(newValue, pkey: &SkeletonTextNodeAssociatedKeys.skeletonNumberOfLines) }
}
var estimatedNumberOfLines: Int {
switch skeletonNumberOfLines {
case .inherited:
return -1
case .custom(let lines):
return lines >= -1 ? lines : 1
}
}
var lastLineFillingPercent: Int {
@@ -78,7 +78,7 @@ extension CALayer {
insertSublayer(sublayer.contentLayer, at: index)
switch transition {
case .none:
completion?()
DispatchQueue.main.async { completion?() }
case .crossDissolve(let duration):
sublayer.contentLayer.setOpacity(from: 0, to: 1, duration: duration, completion: completion)
}
@@ -16,15 +16,15 @@ import UIKit
extension UILabel {
var desiredHeightBasedOnNumberOfLines: CGFloat {
let spaceNeededForEachLine = estimatedLineHeight * CGFloat(numberOfLines)
let spaceNeededForSpaces = skeletonLineSpacing * CGFloat(numberOfLines - 1)
let spaceNeededForEachLine = estimatedLineHeight * CGFloat(estimatedNumberOfLines)
let spaceNeededForSpaces = skeletonLineSpacing * CGFloat(estimatedNumberOfLines - 1)
let padding = paddingInsets.top + paddingInsets.bottom
return spaceNeededForEachLine + spaceNeededForSpaces + padding
}
func updateHeightConstraintsIfNeeded() {
guard numberOfLines > 1 || numberOfLines == 0 else { return }
guard estimatedNumberOfLines > 1 || estimatedNumberOfLines == 0 else { return }
// Workaround to simulate content when the label is contained in a `UIStackView`.
if isSuperviewAStackView, bounds.height == 0 {
@@ -88,7 +88,7 @@ extension UIView {
}
var _skeletonableCornerRadius: Float {
get { return ao_get(pkey: &ViewAssociatedKeys.skeletonCornerRadius) as? Float ?? 0.0 }
get { return ao_get(pkey: &ViewAssociatedKeys.skeletonCornerRadius) as? Float ?? SkeletonViewAppearance.shared.skeletonCornerRadius }
set { ao_set(newValue, pkey: &ViewAssociatedKeys.skeletonCornerRadius) }
}
}