A rolling image banner view for app display some promotion elements, support remote image and auto rolling. You can use both autolayout and programming to create the banner view.
- Image banner
- Remote image and local banner
- Tapped block
- page control
- auto rolling
- autolayout support
Reindeer is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "Reindeer"
To run the example project, clone the repo, and run pod install
from the Example directory first.
If you want to get remote images as your banner content, you can just write a image url in the images array. In this case, you should customize a remote image fetcher, you can use SDWebImage or Kingfisher. Here has a usage with Kingfisher:
banner.setRemoteImageFetche({ (imageView, url, placeHolderImage) -> Void in
imageView.kf_setImageWithURL(NSURL(string: url)!, placeholderImage: placeHolderImage)
})
If you want to programming use banner view, it's better if you use a autolayout tool, such as: SnapKit.
bannerController.view.snp_makeConstraints { (make) -> Void in
make.edges.equalTo(self.bannerWrapView)
}
A full programming usage example:
- define a banner controller first
var _bannerController: BannerPageViewController?
- init the banner controller
func initRollingBanner() {
_bannerController = BannerPageViewController()
if let bannerController = _bannerController {
self.addChildViewController(bannerController)
// the `self.bannerWrapView` can be replaced with the view you want to add the banner.
self.bannerWrapView.addSubview(bannerController.view)
bannerController.view.snp_makeConstraints { (make) -> Void in
make.edges.equalTo(self.bannerWrapView)
}
bannerController.didMoveToParentViewController(self)
bannerController.interval = 5
bannerController.placeholderImage = UIImage(named: "banner_holder")
bannerController.setRemoteImageFetche({ (imageView, url, placeholderImage) -> Void in
imageView.kf_setImageWithURL(NSURL(string: url)!, placeholderImage: placeholderImage)
})
bannerController.setBannerTapHandler({ (index) -> Void in
print("image with index \(index) tapped")
})
}
}
- render the banner, and start rolling
if let bannerController = _bannerController {
anotherBanner.images = [
"https://cdn-ifnotalk-com.alikunlun.com/images/3/cd/cbf38bc67d58fb61c42a14f6b468c.jpg",
UIImage(named: "reindeer-1"),
UIImage(named: "reindeer-2")
]
anotherBanner.startRolling()
}
You can clone this repo and see the storyboard usage, don't forget to run pod install
first, because the example use Kingfisher as image fetcher and SnapKit layout in programming.
if let banner = segue.destinationViewController as? BannerPageViewController {
// (Optional) Set the rolling interval, 0 means no auto-rolling
banner.interval = 5
// (Optional) Set placeholder image
banner.placeholderImage = UIImage(named: "placeholder")
// (Optional, Need with Remote Images) Set remote image fetcher
banner.setRemoteImageFetche({ (imageView, url, placeHolderImage) -> Void in
imageView.kf_setImageWithURL(NSURL(string: url)!, placeholderImage: placeHolderImage)
})
// (Optional) Set banner tapped hander
banner.setBannerTapHandler({ (index) -> Void in
print("banner with index \(index) tapped.")
})
// (Need) Set images
banner.images = [
"https://cdn-ifnotalk-com.alikunlun.com/images/3/cd/cbf38bc67d58fb61c42a14f6b468c.jpg",
UIImage(named: "reindeer-1"),
UIImage(named: "reindeer-2")
]
// (Optional) Start auto rolling
banner.startRolling()
}