OnlyPictures
A simple and flexible way to add source of overlapping circular pictures, currently supports horizontal overlapping or distant pictures with great layout flexibility.
Install / Use
/learn @KiranJasvanee/OnlyPicturesREADME
THIS PROJECT IS NO LONGER MAINTAINED. STILL ONE ONLY BEST UI SOLUTION FOR UIKIT DEVELOPERS.
SOON WILL COME UP WITH SWIFTUI
STILL CONTRIBUTORS ARE WELCOME. KINLDY SEND PULL REQUESTS FOR ANY IMPROVEMENTS NECESSARY.
<p align="center"> <img src="promo/onlyPictures/only_pictures1.png" style="width: 500px;" width="500" /> </p> <br /> <br /> <p align="center"> <img src="promo/general/recent_left_colorful.png" style="width: 220px;" width="220" /> <img src="promo/general/left_scroll_colorful.gif" style="width: 280px;" width="280" /> <img src="promo/general/recent_left_with_gap_colorful.png" style="width: 260px;" width="260" /> </p> <p align="center"> <img src="promo/general/recent_right_colorful.png" style="width: 220px;" width="220" /> <img src="promo/general/right_scroll_colorful.gif" style="width: 280px;" width="280" /> <img src="promo/general/recent_right_with_gap_colorful.png" style="width: 260px;" width="260" /> </p> <p align="center"> <img src="promo/URL_images/URL_images_allocation.gif" style="width: 220px;" width="220" /> <img src="promo/Insert_and_remove/descending_work/append_and_reload_when_scroll.gif" style="width: 280px;" width="280" /> <img src="promo/Insert_and_remove/descending_work/append_and_reload_when_count.gif" style="width: 260px;" width="260" /> </p> <p align="center"> <img src="promo/Insert_and_remove/descending_work/insert_at_first_when_count.gif" style="width: 220px;" width="220" /> <img src="promo/Insert_and_remove/descending_work/insert_at_last_when_scrollable.gif" style="width: 280px;" width="280" /> <img src="promo/Insert_and_remove/descending_work/insert_at_specific_position_when_count.gif" style="width: 260px;" width="260" /> </p> <p align="center"> <img src="promo/Insert_and_remove/descending_work/remove_from_first_when_count.gif" style="width: 220px;" width="220" /> <img src="promo/Insert_and_remove/descending_work/remove_from_last_when_scrollable.gif" style="width: 280px;" width="280" /> <img src="promo/Insert_and_remove/descending_work/remove_from_specific_position_when_count.gif" style="width: 260px;" width="260" /> </p> <br /> <br /> <p align="center"> <a href="https://twitter.com/Kiranjasvanee"> <img src="https://img.shields.io/badge/contact-@kiranjasvanee-blue.svg?style=flat" alt="Twitter"> </a> <a href="https://github.com/KiranJasvanee/OnlyPictures/blob/master/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat" alt="Codecov" /> </a> <a href="https://cocoapods.org/pods/OnlyPictures"> <img src="https://img.shields.io/cocoapods/v/OnlyPictures.svg?style=flat" alt="Pods Version"> </a> <a href="http://cocoapods.org/pods/OnlyPictures/"> <img src="https://img.shields.io/cocoapods/p/OnlyPictures.svg?style=flat" alt="Platforms"> </a> <a href="https://github.com/KiranJasvanee/OnlyPictures/issues"> <img src="https://img.shields.io/github/issues/KiranJasvanee/OnlyPictures.svg" alt="Issues"> </a> <a href="https://github.com/KiranJasvanee/OnlyPictures"> <img src="https://img.shields.io/github/forks/KiranJasvanee/OnlyPictures.svg" alt="Forks"> </a> <a href="https://github.com/KiranJasvanee/OnlyPictures"> <img src="https://img.shields.io/github/stars/KiranJasvanee/OnlyPictures.svg" alt="Stars"> </a> <a href="https://github.com/KiranJasvanee/OnlyPictures"> <img src="https://img.shields.io/badge/Language-Swift-yellow.svg" alt="Stars"> </a> </p>
Installation
OnlyPictures is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'OnlyPictures'
Explaination & Live tracker.
<p align="center"> <img src="promo/onlyPictures//live_tracker_3.gif" style="width: 260px;" width="260" /> </p> <p align="center"> <img src="promo/onlyPictures/explanation.png" style="width: 700px;" width="700" /> </p> <p align="center">onlyPictures.order = .descending
</p>
Usage
Add UIView in your outlet, select it and go to Properties -> Identity Inspector, add OnlyHorizontalPictures in class property. OnlyVerticalPictures about to release soon.
<img src="promo/general/UIVIew_outlet.png" style="width: 220px;" width="220" /> -> <img src="promo/general/identity_inspector_class_property_assignment.png" style="width: 220px;" width="220" />
Create instance of this outlet as below.
@IBOutlet weak var onlyPictures: OnlyHorizontalPictures!
Use DataSource for data assignment & Delegate to get indication of action performed in pictures.
onlyPictures.dataSource = self
onlyPictures.delegate = self
DataSource Methods
extension ViewController: OnlyPicturesDataSource {
// ---------------------------------------------------
// returns the total no of pictures
func numberOfPictures() -> Int {
return pictures.count
}
// ---------------------------------------------------
// returns the no of pictures should be visible in screen.
// In above preview, Left & Right formats are example of visible pictures, if you want pictures to be shown without count, remove this function, it's optional.
func visiblePictures() -> Int {
return 6
}
// ---------------------------------------------------
// return the images you want to show. If you have URL's for images, use next function instead of this.
// use .defaultPicture property to set placeholder image. This only work with local images. for URL's images we provided imageView instance, it's your responsibility to assign placeholder image in it. Check next function.
// onlyPictures.defaultPicture = #imageLiteral(resourceName: "defaultProfilePicture")
func pictureViews(index: Int) -> UIImage {
return pictures[index]
}
// ---------------------------------------------------
// If you do have URLs of images. Use below function to have UIImageView instance and index insted of 'pictureViews(index: Int) -> UIImage'
// NOTE: It's your resposibility to assign any placeholder image till download & assignment completes.
// I've used AlamofireImage here for image async downloading, assigning & caching, Use any library to allocate your image from url to imageView.
func pictureViews(_ imageView: UIImageView, index: Int) {
// Use 'index' to receive specific url from your collection. It's similar to indexPath.row in UITableView.
let url = URL(string: self.pictures[index])
imageView.image = #imageLiteral(resourceName: "defaultProfilePicture") // placeholder image
imageView.af_setImage(withURL: url!)
}
}
Delegate Methods
extension ViewController: OnlyPicturesDelegate {
// ---------------------------------------------------
// receive an action of selected picture tap index
func pictureView(_ imageView: UIImageView, didSelectAt index: Int) {
}
// ---------------------------------------------------
// receive an action of tap upon count
func pictureViewCountDidSelect() {
}
// ---------------------------------------------------
// receive a count, incase you want to do additionally things with it.
// even if your requirement is to hide count and handle it externally with below fuction, you can hide it using property `isVisibleCount = true`.
func pictureViewCount(value: Int) {
print("count value: \(value)")
}
// ---------------------------------------------------
// receive an action, whem tap occures anywhere in OnlyPicture view.
func pictureViewDidSelect() {
}
}
Reload
.reloadData()
reloadData()will work similar toUITableView -> reloadData(), it will callnumberOfPictures()&pictureViews(index: Int)/pictureViews(_ imageView: UIImageView, index: Int)again to reform pictures.
Properties
.order
- Pictures works based on
LIFO- Last In First Out, means last added will be shown at top (recent). - If your array contains pictures in
ascending, it will show last picture OR in other words last appended picture at top (recent). - If your array contains pictures in
descending, set.order propertyto.descendingto show first picture at top (recent).
.ascending .descending
<img src="promo/order_property/ascending.png" style="width: 160px;" width="180" />  
Related Skills
openhue
346.4kControl Philips Hue lights and scenes via the OpenHue CLI.
sag
346.4kElevenLabs text-to-speech with mac-style say UX.
weather
346.4kGet current weather and forecasts via wttr.in or Open-Meteo
tweakcc
1.6kCustomize Claude Code's system prompts, create custom toolsets, input pattern highlighters, themes/thinking verbs/spinners, customize input box & user message styling, support AGENTS.md, unlock private/unreleased features, and much more. Supports both native/npm installs on all platforms.
