SkeletonView

SkeletonView has been conceived to address this need, an elegant way to show users that something is happening and also prepare them to which contents he is waiting.

SkeletonView - Alternative for loading indicator in swift
  • language: Swift 5
  • platform: ios  / tvOs
  • device: iphone
  • license: MIT
SolidGradient
Gradient AnimatedSolid Animated

Installation

Using CocoaPods

Edit your Podfile and specify the dependency:

pod "SkeletonView"

Using Carthage

Edit your Cartfile and specify the dependency:

github "Juanpe/SkeletonView"

Using Swift Package Manager

Once you have your Swift package set up, adding SkeletonView as a dependency is as easy as adding it to the dependencies value of your Package.swift.

  dependencies: [
    .package(url: "https://github.com/Juanpe/SkeletonView.git", from: "1.7.0")
  ]

🐒 How to use

Only 3 steps needed to use SkeletonView:

1. Import SkeletonView in proper place.

import SkeletonView

2. Now, set which views will be skeletonables. You achieve this in two ways:

Using code:

avatarImageView.isSkeletonable = true

Using IB/Storyboards:

SkeletonView - Alternative for loading indicator in swift

3. Once you’ve set the views, you can show the skeleton. To do so, you have 4 choices:

(1) view.showSkeleton()                 // Solid
(2) view.showGradientSkeleton()         // Gradient
(3) view.showAnimatedSkeleton()         // Solid animated
(4) view.showAnimatedGradientSkeleton() // Gradient animated

IMPORTANT!

SkeletonView is recursive, so if you want show the skeleton in all skeletonable views, you only need to call the show method in the main container view. For example, with UIViewControllers

Extra

Skeleton views layout

Sometimes skeleton layout may not fit your layout because the parent view bounds have changed. For example, rotating the device.

You can relayout the skeleton views like so:

override func viewDidLayoutSubviews() {
    view.layoutSkeletonIfNeeded()
}

⚠️⚠️ You shouldn’t call this method. From version 1.8.1 you don’t need to call this method, the library does automatically. So, you can use this method ONLY in the cases when you need to update the layout of the skeleton manually.

Update skeleton configuration

You can change the skeleton configuration at any time like its colour, animation, etc. with the following methods:

(1) view.updateSkeleton()                 // Solid
(2) view.updateGradientSkeleton()         // Gradient
(3) view.updateAnimatedSkeleton()         // Solid animated
(4) view.updateAnimatedGradientSkeleton() // Gradient animated

🌿 Collections

Now, SkeletonView is compatible with UITableView and UICollectionView.

UITableView

If you want to show the skeleton in a UITableView, you need to conform to SkeletonTableViewDataSource protocol.

public protocol SkeletonTableViewDataSource: UITableViewDataSource {
    func numSections(in collectionSkeletonView: UITableView) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier
    func collectionSkeletonView(_ skeletonView: UITableView, identifierForHeaderInSection section: Int) -> ReusableHeaderFooterIdentifier?
    func collectionSkeletonView(_ skeletonView: UITableView, identifierForFooterInSection section: Int) -> ReusableHeaderFooterIdentifier?
}

As you can see, this protocol inherits from UITableViewDataSource, so you can replace this protocol with the skeleton protocol.

This protocol has a default implementation:

func numSections(in collectionSkeletonView: UITableView) -> Int
// Default: 1
func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
// Default:
// It calculates how many cells need to populate whole tableview
func collectionSkeletonView(_ skeletonView: UITableView, identifierForHeaderInSection section: Int) -> ReusableHeaderFooterIdentifier?
// Default: nil
func collectionSkeletonView(_ skeletonView: UITableView, identifierForFooterInSection section: Int) -> ReusableHeaderFooterIdentifier?
// Default: nil

There is only one method you need to implement to let Skeleton know the cell identifier. This method doesn’t have default implementation:

func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier

Example

func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
   return "CellIdentifier"
}

IMPORTANT! If you are using resizable cells (tableView.rowHeight = UITableViewAutomaticDimension ), it’s mandatory define the estimatedRowHeight.

UICollectionView

For UICollectionView, you need to conform to SkeletonCollectionViewDataSource protocol.

public protocol SkeletonCollectionViewDataSource: UICollectionViewDataSource {
    func numSections(in collectionSkeletonView: UICollectionView) -> Int
    func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier
}

The rest of the process is the same as UITableView

📰 Multiline text

SkeletonView - Alternative for loading indicator in swift

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.

🎨 Custom colors

You can decide which color the skeleton is tinted with. You only need to pass as a parameter the color or gradient you want.

Using solid colors

view.showSkeleton(usingColor: UIColor.gray) // Solid
// or
view.showSkeleton(usingColor: UIColor(red: 25.0, green: 30.0, blue: 255.0, alpha: 1.0))

Using gradients

let gradient = SkeletonGradient(baseColor: UIColor.midnightBlue)
view.showGradientSkeleton(usingGradient: gradient) // Gradient

Besides, SkeletonView features 20 flat colors 🤙🏼

UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...

🌟 Features

  • Easy to use
  • All UIViews are skeletonables
  • Fully customizable
  • Universal (iPhone & iPad)
  • Interface Builder friendly
  • Simple Swift syntax
  • Lightweight readable codebase

Download

SkeletonView

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *