skeletonview



## Welcome to SkeletonView Documentation



SkeletonView is a powerful and flexible library that provides an innovative way to display loading and empty states for your iOS app. With SkeletonView, you can create placeholders that simulate the appearance of your content while it is being loaded from a server or database. This enhances user experience by reducing the perceived loading time and providing a visually appealing user interface during data retrieval.



## Installation



SkeletonView is available for installation via CocoaPods. To install it, simply add the following line to your Podfile:


“`text
pod ‘SkeletonView’
“`



## Usage



SkeletonView provides a straightforward and developer-friendly approach to implement placeholders in your app. Here’s how you can use SkeletonView:



– Import the SkeletonView module:



– Import the SkeletonView module in your desired Swift file:


“`swift
import SkeletonView
“`



– Make your view conform to the `SkeletonViewLayoutCompatible` protocol:


“`swift
class MyViewController: UIViewController, SkeletonViewLayoutCompatible {
// Your code here
}
“`



– Enable skeleton for your view:


“`swift
myView.showAnimatedSkeleton()
“`



– Customize the skeleton view properties:



– Customize the skeleton color:


“`swift
myView.skeletonBackgroundColor = .gray
“`



– Customize the gradient color:


“`swift
myView.skeletonGradientColor = GradientColor(baseColor: .gray)
“`



– Specify the corner radius:


“`swift
myView.skeletonCornerRadius = 10
“`



– Set the duration for skeleton animations:


“`swift
myView.skeletonAnimation = SkeletonAnimationBuilder().makeSlidingAnimation(withDirection: .leftRight)
“`



– Define the default multiline spacing:


“`swift
SkeletonAppearance.default.multilineHeight = 20
“`



Note: For more advanced customization options, please refer to the library’s official documentation.



## Examples



Here are a few examples to give you a head start on how to use SkeletonView in different scenarios:



– Custom TableViewCell:



– In your UITableViewCell subclass, add the following code to enable skeleton animation for custom content:


“`swift
class MyTableViewCell: UITableViewCell, SkeletonTableViewReusableCell {
// Your code here
}
“`



– Customize the skeleton color and animation:


“`swift
myTableViewCell.skeletonBackgroundColor = .lightGray
myTableViewCell.skeletonAnimation = SkeletonAnimationBuilder().makeBreathingAnimation()
“`



– When content is fully loaded, disable skeleton animation:


“`swift
myTableViewCell.hideSkeleton()
“`



– Custom CollectionViewCell:



– In your UICollectionViewCell subclass, add the following code to enable skeleton animation for custom content:


“`swift
class MyCollectionViewCell: UICollectionViewCell, SkeletonCollectionViewReusableCell {
// Your code here
}
“`



– Customize the skeleton color and animation:


“`swift
myCollectionViewCell.skeletonBackgroundColor = .lightGray
myCollectionViewCell.skeletonAnimation = SkeletonAnimationBuilder().makePulseAnimation()
“`



– When content is fully loaded, disable skeleton animation:


“`swift
myCollectionViewCell.hideSkeleton()
“`



– Custom UIView:



– Enable skeleton animation for your custom view:


“`swift
myView.isSkeletonable = true
“`



– Customize the skeleton color and animation:


“`swift
myView.skeletonBackgroundColor = .lightGray
myView.skeletonAnimation = SkeletonAnimationBuilder().makeSlidingAnimation(withDirection: .leftRight)
“`



– When content is fully loaded, disable skeleton animation:


“`swift
myView.hideSkeleton()
“`



## Advanced Configuration



SkeletonView provides advanced configuration options that allow you to customize its behavior according to your specific needs. Here’s an overview of the advanced configuration options:



1. Gradient Direction
2. Multiline Spacing
3. User Interaction



### Gradient Direction



You can specify the gradient direction for skeleton animation by using the `SkeletonGradientDirection` enum. The available options are:



1. `leftRight`: Sliding from left to right
2. `rightLeft`: Sliding from right to left
3. `topBottom`: Sliding from top to bottom
4. `bottomTop`: Sliding from bottom to top



### Multiline Spacing



If you are using multiline skeleton views, you can adjust the spacing between each line by setting the `multilineHeight` property of `SkeletonAppearance.default` to the desired value.



### User Interaction



When skeleton animation is active, by default, user interaction is disabled to avoid any interference. However, if you want to enable user interaction for a specific view, you can set its `isUserInteractionEnabled` property to `true`. This way, users can interact with the view even when the skeleton animation is ongoing.



## Conclusion



SkeletonView offers a powerful solution that brings life to your loading and empty states, making your app feel more responsive and visually appealing. By utilizing this library, you can provide a better user experience while loading content in your iOS app.

For further details and comprehensive guidance, refer to the official documentation of SkeletonView.

We would love to hear your feedback or answer any questions you may have. Please feel free to contact our support team for any assistance. Happy developing!