A simple and flexible way to add source of overlapping circular pictures, currently supports horizontal overlapping or distant pictures with great layout flexibility.

Related tags

Image OnlyPictures
Overview

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.




                         

                         

                         

                         

                         



Twitter Codecov Pods Version Platforms Issues Forks Stars Stars


Installation

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

pod 'OnlyPictures'

Explaination & Live tracker.

onlyPictures.order = .descending

Usage

Add UIView in your outlet, select it and go to Properties -> Identity Inspector, add OnlyHorizontalPictures in class property. OnlyVerticalPictures about to release soon.

     ->     

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 to UITableView -> reloadData(), it will call numberOfPictures() & 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 property to .descending to show first picture at top (recent).

            .ascending                                            .descending

                         

onlyPictures.order = .descending
.recentAt

                 .left                                                    .right

                         

onlyPictures.recentAt = .left
.alignment

                   .left                                                             .center                                                      .right

   

onlyPictures.alignment = .left
.countPosition

                   .right                                                .left

                         

onlyPictures.countPosition = .right
.gap

           .gap = 20                                      .gap = 36                                                .gap = 50

                                                    

onlyPictures.gap = 36
.spacing

    .spacing = 0                    .spacing = 2                    .spacing = 4                           .spacing = 4

        

onlyPictures.spacing = 2
.spacingColor

  .spacingColor = .gray                       .spacingColor = .white

          

onlyPictures.spacingColor = UIColor.white
.imageInPlaceOfCount
  • Set image in place of count. If this property set, count properties won't effect.

          

onlyPictures.imageInPlaceOfCount = UIImage(named:"image_name")

Properties for count

.backgroundColorForCount

onlyPictures.backgroundColorForCount = .orange
.textColorForCount

onlyPictures.textColorForCount = .red
.fontForCount

onlyPictures.fontForCount = UIFont(name: "HelveticaNeue", size: 18)!
.isHiddenVisibleCount
  • To hide count, set .isHiddenVisibleCount = true. But you can receive count in a following funtion of OnlyPicturesDelegate - pictureViewCount(value: Int).
onlyPictures.isHiddenVisibleCount = true

Things you can do additionally, Insert & Remove at First/Last/Specific-Position

  • NOTE: it's your responsibility to insert/remove image in your collection too, you used for pictures. It's similar pattern you follows using UITableView.
Insert first in .order = .descending

                    

onlyPictures.insertFirst(image: UIImage(named: "p11"), withAnimation: .popup)
Insert last in .order = .descending

                    

onlyPictures.insertLast(image: UIImage(named: "p12"), withAnimation: .popup)
Insert at specific position in .order = .descending, below added at 2nd position

                    

onlyPictures.insertPicture(UIImage(named: "p12"), atIndex: 2, withAnimation: .popup)
Remove first in .order = .descending

                    

onlyPictures.removeFirst(withAnimation: .popdown)
Remove last in .order = .descending

                    

onlyPictures.removeLast(withAnimation: .popdown)
Remove from specific position in .order = .descending, below removed from 2nd position

                    

onlyPictures.removePicture(atIndex: 2, withAnimation: .popdown)
Let's check how insertion works with dynamic images. remove is same as above.
Insert first in .order = .descending

let url = URL(string: "http://insightstobehavior.com/wp-content/uploads/2017/08/testi-5.jpg")
onlyPictures.insertFirst(withAnimation: .popup) { (imageView) in
        imageView.image = #imageLiteral(resourceName: "defaultProfilePicture")
        imageView.af_setImage(withURL: url!)
}
Insert last in .order = .descending

let url = URL(string: "http://insightstobehavior.com/wp-content/uploads/2017/08/testi-5.jpg")
onlyPictures.insertLast(withAnimation: .popup) { (imageView) in
        imageView.image = #imageLiteral(resourceName: "defaultProfilePicture")
        imageView.af_setImage(withURL: url!)
}
Insert at specific position in .order = .descending, below added at 2nd position

let url = URL(string: "http://insightstobehavior.com/wp-content/uploads/2017/08/testi-5.jpg")
onlyPictures.insertPicture(atIndex: 2, withAnimation: .popup) { (imageView) in
        imageView.image = #imageLiteral(resourceName: "defaultProfilePicture")
        imageView.af_setImage(withURL: url!)
}

Author

Kiran Jasvanee,

Skype - kiranjasvanee

LinkedIn - https://www.linkedin.com/in/kiran-jasvanee-ab363778

eMail - [email protected]

License

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

You might also like...
A beautiful and flexible text field control implementation of
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

SkyFloatingLabelTextField SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern"

WhiteAndFluffyTest - Scroll images and add them to your favourites via image page
WhiteAndFluffyTest - Scroll images and add them to your favourites via image page

Image service application Scroll images and add them to your favourites via imag

add text(multiple line support) to imageView, edit, rotate or resize them as you want, then render the text on image
add text(multiple line support) to imageView, edit, rotate or resize them as you want, then render the text on image

StickerTextView is an subclass of UIImageView. You can add multiple text to it, edit, rotate, resize the text as you want with one finger, then render the text on Image.

TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage
TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage

TextDrawer TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage. About Annotating Images TextDrawer is the easiest way

A Xcode plugin to add highlight to the instances of selected symbol.
A Xcode plugin to add highlight to the instances of selected symbol.

Auto Highlight Symbol About Xcode 8 Xcode 8 does't support plugins anymore, but there is a workaround, use at your own risk. Xcode can highlight insta

Full aspect ratio grid layout for iOS
Full aspect ratio grid layout for iOS

Greedo Layout for iOS A library that computes what size the UICollectionView cells should be to display images in a variable height fixed aspect ratio

Kanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera.
Kanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera.

Kanvas Kanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera.

TripUp is an open source, photo storage and sharing app made for privacy conscious users.
TripUp is an open source, photo storage and sharing app made for privacy conscious users.

TripUp is an open source, photo storage and sharing app made for privacy conscious users.

Source code for iOS app
Source code for iOS app "Photos for VK" — albums and photos manager for social network VKontakte

VK Photos (formally Photos for VK) VK Photos is an iOS app for manage albums and photos in social network VKontakte (vk.com) Screenshots Disclaimer ⚠️

Comments
  • Modified README.md to add Swift syntax highlighting

    Modified README.md to add Swift syntax highlighting

    Hey! I found this via the trending Swift repos. This looks pretty interesting... thanks for creating this! I added Swift syntax highlighting to the README to make it a little easier to read.

    opened by dingwilson 2
  • Code base updated for xcode 10.2 & swift 5.0

    Code base updated for xcode 10.2 & swift 5.0

    Existing code base does not build in swift 5.0 Xcode10.2. Please merge this pull request and release a new pod version supporting Xcode10.2 & swift 5.0

    opened by ratulSharker 1
  • Add text (label) at bottom of each picture and scroll it within the pictures

    Add text (label) at bottom of each picture and scroll it within the pictures

    Hi, is it possible to put e.g. the name (any label) at the bottom of each picture and scroll it with the pictures ? Did anyone had success with that ? Thanks!

    opened by LoopingLouieX 0
  • NSAttributedStringKey' .font to .zone?

    NSAttributedStringKey' .font to .zone?

    extension String {
        fileprivate func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
            let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
            
    **// Error: Type 'NSAttributedStringKey' (aka 'NSString') has no member 'font'; did you mean 'zone'?**
            let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font: font], context: nil)
            
            return boundingBox.height
        }
        
        fileprivate func width(withConstrainedHeight height: CGFloat, font: UIFont) -> CGFloat {
            let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
    
    **// Error: Type 'NSAttributedStringKey' (aka 'NSString') has no member 'font'; did you mean 'zone'?**
            let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font: font], context: nil)
            
            return boundingBox.width
        }
    }
    
    opened by masuhara 1
Owner
Kiran Jasvanee
iOS Tech Lead at SmartSense
Kiran Jasvanee
Simple camera application for iOS that uploads pictures to WebDAV server or Dropbox quickly. Available on the AppStore.

Upupu Simple camera application for iOS that uploads pictures to WebDAV server or Dropbox quickly. Also available on the AppStore. Features Easy and f

Xcoo 65 Nov 15, 2022
LoremPicsum - Simple UIKit based app for displaying grid of pictures

LoremPicsum - Simple UIKit based app for displaying grid of pictures

Paweł Dziennik 0 Jan 20, 2022
NASAPictureOfTheDay - An app that displays pictures from the NASA APOD API

NASA Picture of the day This is an app that displays pictures from the NASA APOD

Dhaval Rajani 0 Jan 29, 2022
Swift image slideshow with circular scrolling, timer and full screen viewer

?? ImageSlideshow Customizable Swift image slideshow with circular scrolling, timer and full screen viewer ?? Example To run the example project, clon

Petr Zvoníček 1.7k Dec 21, 2022
How to create a circular and rectangular ImageView with similar image?

chapter11CircularAndRectangularImage How to create a circular and rectangular ImageView with similar image? I add two imageView in Main.storyboard I a

ahmetbostanciklioglu 0 Jan 8, 2022
iOS Swift class to create circular or rounded avatar images

SwiftyAvatar iOS Swift 3.0 UIimage class Create awesome circular avatar images! IBInspectable attributes accessible from the identity inspector. Round

Dimitrios Kalaitzidis 183 Dec 17, 2022
CachedAsyncImage is the simplest way to add cache to your AsyncImage.

SwiftUI CachedAsyncImage ??️ CachedAsyncImage is AsyncImage, but with cache capabilities. Usage CachedAsyncImage has the exact same API and behavior a

Lorenzo Fiamingo 278 Jan 5, 2023
Lightweight and customisable async image loading in SwiftUI. Supports on-disk storage, placeholders and more!

Asyncrounously download and display images in Swift UI. Supports progress indicators, placeholders and image transitions. RemoteImageView Asyncrounous

Callum Trounce 192 Dec 7, 2022
A Swift implementation of fastimage. Supports PNG, GIF, and JPEG.

ImageScout ImageScout is a Swift implementation of fastimage. It allows you to find the size and type of a remote image by downloading as little as po

Reda Lemeden 967 Dec 30, 2022
DGImageView - Asynchronous image downloader with cache. Supports gif too

DGImageView Installation Usage DGImageView Asynchronous image downloader with cache. Supports gif, memory cache, disk cache features. Installation Xco

donggyu 1 Jan 1, 2022