OnlyPictures: Practical flexible layout of circular picture viewing components

onlyPictures.order = .descending
Copy the code

Create instance of this outlet as below.

@IBOutlet weak var onlyPictures: OnlyHorizontalPictures!
Copy the code

Use DataSource for data assignment & Delegate to get indication of action performed in pictures.

onlyPictures.dataSource = self
onlyPictures.delegate = self
Copy the code

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() { } }Copy the code

• reloadData() will work similar to UITableView -> reloadData(), it will call numberOfPictures() & pictureViews(index: Int)/pictureViews(_ imageView: UIImageView, index: Int) again to reform pictures.

• 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
Copy the code

onlyPictures.recentAt = .left
Copy the code

onlyPictures.alignment = .left
Copy the code

onlyPictures.countPosition = .right
Copy the code

onlyPictures.gap = 36
Copy the code

onlyPictures.spacing = 2
Copy the code

onlyPictures.spacingColor = UIColor.white
Copy the code

onlyPictures.imageInPlaceOfCount = UIImage(named:"image_name")
Copy the code

onlyPictures.backgroundColorForCount = .orange
Copy the code

onlyPictures.textColorForCount = .red
Copy the code

onlyPictures.fontForCount = UIFont(name: "HelveticaNeue", size: 18)!
Copy the code

• 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.

onlyPictures.insertFirst(image: UIImage(named: "p11"), withAnimation: .popup)
Copy the code

onlyPictures.insertLast(image: UIImage(named: "p12"), withAnimation: .popup)
Copy the code

onlyPictures.insertPicture(UIImage(named: "p12"), atIndex: 2, withAnimation: .popup)
Copy the code

onlyPictures.removeFirst(withAnimation: .popdown)
Copy the code

onlyPictures.removeLast(withAnimation: .popdown)
Copy the code

onlyPictures.removePicture(atIndex: 2, withAnimation: .popdown)
Copy the code

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!)
}
Copy the code

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!)
}
Copy the code

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!)
}
Copy the code