Volver al ranking

HamzaGhazouani/HGPlaceholders

Swift

Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project

placeholderemptyloadinguitableviewuicollectionviewempty-statestate-management
Crecimiento de estrellas
Estrellas
2.2k
Forks
158
Crecimiento semanal
Issues
21
1k2k
ene 2023mar 2024may 2025jul 2026
README

HGPlaceholders

Backers on Open Collective Sponsors on Open Collective CI Status Version License Language Supports Platform

Twitter: @GhazouaniHamza codebeat badge Documentation Readme Score

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

  • iOS 8.0+
  • Xcode 9.2

You also may like

  • HGCircularSlider - A custom reusable circular slider control for iOS application.
  • HGRippleRadarView - A beautiful radar view to show nearby users with ripple animation, fully customizable

Installation

HGPlaceholders is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'HGPlaceholders'

HGPlaceholders is also available through Carthage. To install it, simply add the following line to your Cartfile:

github "HamzaGhazouani/HGPlaceholders"

Usage

  1. Inherit your UITableView class from TableView Or inherit UICollectionView from CollectionView
  2. Call the placeholder to show
  • tableView.showLoadingPlaceholder() or collectionView.showLoadingPlaceholder()
  • tableView.showNoResultsPlaceholder() or collectionView.showNoResultsPlaceholder()
  • tableView.showErrorPlaceholder() or collectionView.showErrorPlaceholder()
  • tableView.showNoConnectionPlaceholder() or collectionView.showNoConnectionPlaceholder()

Customization

If you want to change only images, just set them in your asset with this names (the framework check firstly in the main bundle):

  • loading : "hg_default-loading"
  • no_connection : "hg_default-no_connection"
  • no_results : "hg_default-no_results"
  • error : "hg_default-error"

The framework contains different defaults placeholders:

  • Basic :

tableView.placeholdersProvider = .basic or collectionView.placeholdersProvider = .basic

  • Default :

tableView.placeholdersProvider = .default or collectionView.placeholdersProvider = .default

  • Default2 :

tableView.placeholdersProvider = .default2 or collectionView.placeholdersProvider = .default2

  • Hallowen :

tableView.placeholdersProvider = .halloween or collectionView.placeholdersProvider = .halloween // for fun :)`

If you want to change the default palceholders for all table views in your project:

class ProjectNameTableView: TableView {

    override func customSetup() {
        placeholdersProvider = .basic
    }
}
class ProjectNameCollectionView: CollectionView {

    override func customSetup() {
        placeholdersProvider = .basic
    }
}

You can also add new placeholders fully customizable, you should keep in mind that the view will take table view frame, and placeholder can have only one action, please check the example project

Creating a new theme from scratch

static var summer: PlaceholdersProvider {
        
        var commonStyle = PlaceholderStyle()
        commonStyle.backgroundColor = UIColor(red: 1.0, green: 236.0/255, blue: 209.0/255.0, alpha: 1.0)
        commonStyle.actionBackgroundColor = .black
        commonStyle.actionTitleColor = .white
        commonStyle.titleColor = .black
        commonStyle.isAnimated = false
        
        commonStyle.titleFont = UIFont(name: "AvenirNextCondensed-HeavyItalic", size: 19)!
        commonStyle.subtitleFont = UIFont(name: "AvenirNextCondensed-Italic", size: 19)!
        commonStyle.actionTitleFont = UIFont(name: "AvenirNextCondensed-Heavy", size: 19)!
        
        var loadingStyle = commonStyle
        loadingStyle.actionBackgroundColor = .clear
        loadingStyle.actionTitleColor = .gray
        
        var loadingData: PlaceholderData = .loading
        loadingData.image = #imageLiteral(resourceName: "summer-hat")
        let loading = Placeholder(data: loadingData, style: loadingStyle, key: .loadingKey)
        
        var errorData: PlaceholderData = .error
        errorData.image = #imageLiteral(resourceName: "summer-ball")
        let error = Placeholder(data: errorData, style: commonStyle, key: .errorKey)
        
        var noResultsData: PlaceholderData = .noResults
        noResultsData.image = #imageLiteral(resourceName: "summer-cocktail")
        let noResults = Placeholder(data: noResultsData, style: commonStyle, key: .noResultsKey)
        
        var noConnectionData: PlaceholderData = .noConnection
        noConnectionData.image = #imageLiteral(resourceName: "summer-beach-slippers")
        let noConnection = Placeholder(data: noConnectionData, style: commonStyle, key: .noConnectionKey)
        
        let placeholdersProvider = PlaceholdersProvider(loading: loading, error: error, noResults: noResults, noConnection: noConnection)
        
        let xibPlaceholder = Placeholder(cellIdentifier: "CustomPlaceholderCell", key: PlaceholderKey.custom(key: "XIB"))
        
        placeholdersProvider.add(placeholders: xibPlaceholder)
        
        return placeholdersProvider
    }

Adding a custom placeholder to an existing theme

   private static var starWarsPlaceholder: Placeholder {
       var starwarsStyle = PlaceholderStyle()
       starwarsStyle.backgroundColor = .black
       starwarsStyle.actionBackgroundColor = .clear
       starwarsStyle.actionTitleColor = .white
       starwarsStyle.titleColor = .white
       starwarsStyle.isAnimated = false
       
       var starwarsData = PlaceholderData()
       starwarsData.title = NSLocalizedString("\"This is a new day, a\nnew beginning\"", comment: "")
       starwarsData.subtitle = NSLocalizedString("Star Wars", comment: "")
       starwarsData.image = #imageLiteral(resourceName: "star_wars")
       starwarsData.action = NSLocalizedString("OK!", comment: "")
       
       let placeholder = Placeholder(data: starwarsData, style: starwarsStyle, key: PlaceholderKey.custom(key: "starWars"))
       
       return placeholder
   }
   
   let provider = PlaceholdersProvider.summer 
   provider.addPlaceholders(MyUtilityClass.starWarsPlaceholder) 

Documentation

Full documentation is available on CocoaDocs.
You can also install documentation locally using jazzy.

Author

Hamza Ghazouani, hamza.ghazouani@gmail.com

License

HGPlaceholders is available under the MIT license. See the LICENSE file for more info.

Repositorios relacionados
danilowoz/react-content-loader

⚪ SVG-Powered component to easily create skeleton loadings.

TypeScriptnpmMIT Licensereactloader
skeletonreact.com
14k424
Juanpe/SkeletonView

☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

SwiftMIT Licenseswiftskeleton
12.9k1.1k
dvtng/react-loading-skeleton

Create skeleton screens that automatically adapt to your app!

TypeScriptnpmMIT Licensejavascriptreact
4.2k162
ethanhua/Skeleton

A library provides an easy way to show skeleton loading view like Facebook and Alipay

JavaMavenandroid-libraryandroid-ui
3.7k459
axe312ger/sqip

"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.

TypeScriptnpmThe Unlicensewebperfwebperformance
sqip.vercel.app
3.4k86
tigerAndBull/TABAnimated

A skeleton screen loading framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架,包含快速植入,低耦合,兼容复杂视图等特点,提供国内主流骨架屏动画的加载方案,同时支持上拉加载更多、自定制动画。)

Objective-CMIT Licenseobjective-cios
3.4k539
egoist/vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.

JavaScriptnpmsvgloading
create-content-loader.now.sh
3k136
Ovi/DummyJSON

DummyJSON.com provides different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favorite framework and library without worrying about writing a backend.

EJSOtherjsonjson-api
dummyjson.com
2.9k299
joe-bell/plaiceholder

Beautiful image placeholders, without the hassle.

TypeScriptnpmApache License 2.0blurhashplaceholder
plaiceholder.co
2.3k74
mrousavy/react-native-blurhash

🖼️ A library to show colorful blurry placeholders while your content loads.

KotlinMIT Licenseblurhashreact-native
blurha.sh
2.2k87
mfrachet/rn-placeholder

🏖️ Display some placeholder stuff before rendering your text or media content in React Native

TypeScriptnpmMIT Licensereactreact-native
mfrachet.github.io/rn-placeholder/
2.1k182
aschuch/StatefulViewController

Placeholder views based on content, loading, error or empty states

SwiftMIT Licenseuiviewcontrollerstate-management
2.1k143