This is what I am able to make through a tutorial
This is the Screenshot of the app
But I have to make 1st and every 3rd Cell to be full width. How I supposed to do it?
The code is this
class MainViewController: UICollectionViewController
{
// data source
let publishers = Publishers()
private let leftAndRightPaddings: CGFloat = 32.0
private let numberOfItemsPerRow: CGFloat = 2.0
private let heigthAdjustment: CGFloat = 100
// MARK: - View controller life cycle
override func viewDidLoad() {
super.viewDidLoad()
let width = (CGRectGetWidth(collectionView!.frame) - leftAndRightPaddings) / numberOfItemsPerRow
let layout = collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = CGSizeMake(width, heigthAdjustment)
print(width.description)
}
// MARK: - UICollectionViewDataSource
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return publishers.numberOfPublishers
}
private struct Storyboard
{
static let CellIdentifier = "PublisherCell"
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(Storyboard.CellIdentifier, forIndexPath: indexPath) as UICollectionViewCell
return cell}
}
You need to implement this func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize method in your UICollectionViewDelegateFlowLayout
Related
I made the gallery using UICollectionView.
If you lower the screen, the image should continue to come out and stop at 20.
The code was constantly updated.
However, the function collectionView (_: layout: sizeForItemAt :) that sets the size of the cell did not work.
Therefore, only 20 images are displayed continuously.
On viewDidLoad()
if let layoutt = artCollectionView?.collectionViewLayout as? PinterestLayout
{
layoutt.delegate = self
}
cell setting
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HomeCollectionViewCell", for: indexPath) as? HomeCollectionViewCell,
let arts = self.artList else { return HomeCollectionViewCell() }
if arts.count > indexPath.row
{
let model = arts[indexPath.row]
cell.imgView.sd_setImage(with: URLHelper.createEncodedURL(url: model.thumburl), completed: nil)
}
return cell
}
return cell size
extension HomeViewController : PinterestLayoutDelegate
{
func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath:IndexPath) -> CGFloat
{
return CGFloat(300.0)
}
}
Currently, the function only executes once when the app starts. Do you know how to run that function every time I want?
You need to implement UICollectionViewDelegateFlowLayout.
You can read more about the protocol here:
UICollectionViewDelegateFlowLayout protocol
Example:
extension viewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 50, height: 300)
}
}
If you look at the prepare() method of PinterestLayout class, you can see the below code
guard
cache.isEmpty == true,
let collectionView = collectionView
else {
return
}
When you reload the colectionView the cache is no longer empty, so it returns back without altering the layout.
So just remove the cache value when prepare is called.
Add removeAll() before guard
cache.removeAll()
Please follow the steps to install PinterestLayout in UICollectionView below.
Set PinterestLayout to your collection view.
let layout = PinterestLayout()
collectionView.collectionViewLayout = layout
Setup layout
layout.delegate = self
layout.cellPadding = 5
layout.numberOfColumns = 2
Implement methods of PinterestLayoutDelegate
extension CustomCollectionVC: PinterestLayoutDelegate {
func collectionView(collectionView: UICollectionView,
heightForImageAtIndexPath indexPath: IndexPath,
withWidth: CGFloat) -> CGFloat {
let image = images[indexPath.item]
return image.height(forWidth: withWidth)
}
func collectionView(collectionView: UICollectionView,
heightForAnnotationAtIndexPath indexPath: IndexPath,
withWidth: CGFloat) -> CGFloat {
let textFont = UIFont(name: "Arial-ItalicMT", size: 11)!
return "Some text".heightForWidth(width: withWidth, font: textFont)
}
}
When data is loaded invalidate layout as well as reload data on collection view.
collectionView.collectionViewLayout.invalidateLayout()
collectionView.reloadData()
Observation:
func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath:IndexPath) -> CGFloat
try this instead of above:
func collectionView(collectionView: UICollectionView,
heightForImageAtIndexPath indexPath: IndexPath,
withWidth: CGFloat) -> CGFloat
I've been researching on how to embed my own custom decimal keyboard into a UIView. i've found below image, which i would like to recreate. However i'm not sure on how and what is the best way to get started with such? is it just to create multiple UIButton and then handle it in a method or is there a smart way to recreate such ?
A collectionView is a great way to do this. Create a new storyboard, put a UICollectionViewController in there. Then create a UICollectionViewCell with an UILabel (for digits and a dot) and an UIImage (for the delete button).
Here's my UICollectionViewController code for this:
import UIKit
protocol KeypadDelegate: class {
func did(tapOnKeypad key: KeypadKey)
}
enum KeypadKey {
case number (value: Int)
case backspace
}
class KeypadViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
// MARK: - Properties.
weak var delegate: KeypadDelegate?
// MARK: - Lifecycle.
override func viewDidLoad() {
super.viewDidLoad()
collectionView?.register(cellReuseID: KeypadCVCell.reuseID)
}
// MARK: - UICollectionView DataSource.
override func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 12
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "KeypadCVCell", for: indexPath) as! KeypadCVCell
switch indexPath.row {
case 0...8:
cell.configure(number: String(indexPath.row + 1))
case 9:
cell.setBlank()
case 10:
cell.configure(number: "0")
case 11:
let image = UIImage(named: "btn_keypad_backspace")
cell.configure(image: image)
default:
break
}
return cell
}
// MARK: - UICollectionView Delegate.
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
switch indexPath.row {
case 0...8:
let key: KeypadKey = .number(value: indexPath.row + 1)
delegate?.did(tapOnKeypad: key)
case 9:
break
case 10:
let key: KeypadKey = .number(value: 0)
delegate?.did(tapOnKeypad: key)
case 11:
delegate?.did(tapOnKeypad: .backspace)
default:
break
}
}
// MARK: - UICollectionView Delegate FlowLayout.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = collectionView.bounds.width / 3
let height = collectionView.bounds.height / 4
return CGSize(width: width, height: height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
}
class KeypadCVCell: UICollectionViewCell {
// MARK: - Outlets.
#IBOutlet weak var numberLabel: UILabel!
#IBOutlet weak var backspaceImageView: UIImageView!
// MARK: - Configuration.
func configure(number: String) {
self.numberLabel.text = number
self.backspaceImageView.isHidden = true
}
func configure(image: UIImage?) {
self.numberLabel.isHidden = true
self.backspaceImageView.image = image
}
func setBlank() {
self.numberLabel.isHidden = true
self.backspaceImageView.isHidden = true
}
}
Create a single UIButton action outlet, connect all the buttons to it, check the senders title value, convert it to Int, if not possible it's the comma or if title text is empty it's the backspace.Or create a separate function for the backspace. That would be a relatively easy, clutter free way to do it and wouldn't take much more than a dozen lines of code.
I have a UICollectionView that I added to my UIViewController in my Storyboard.
It contains a UICollectionViewCell of class BookCell and reusable identifier BookCell.
bookArray gets passed in the prepareForSegue method from the previous ViewController
cellForItemAtIndexPath never gets called. I have attempted to declare BookCollectionVC as delegate and dataSource both in Storyboard and in viewDidLoad, as you can see commented out, but that does not change anything.
I have read multiple SO answers pertaining to cell size, to the number of items in the section, to the multiple ways of declaring delegate and dataSource and have tried/double checked all of them.
Any ideas?
class BookCollectionVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var collection: UICollectionView!
var bookArray = [String]()
override func viewDidLoad() {
super.viewDidLoad()
// collection.delegate = self
// collection.dataSource = self
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCellWithReuseIdentifier("BookCell", forIndexPath: indexPath) as? BookCell {
// This never gets called
let bookIsbn = bookArray[indexPath.row]
cell.configureCell(bookIsbn)
return cell
} else {
return UICollectionViewCell()
}
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
print(bookArray.count)
return bookArray.count
}
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let screenSize: CGRect = UIScreen.mainScreen().bounds
let screenWidth = screenSize.width
let cellWidth = screenWidth / 4
return CGSizeMake(cellWidth,cellWidth)
}
As a test, don't use an if-let. Just get the cell value and print it. What is its type? Have you properly assigned the cells to be the custom class (BookCell) in your StoryBoard?
My UICollectionViewCell doesn't look nice even I implement autolayout and some setting in UICollectionViewCell inspector.
My setting is like this
My UICollectionViewCell autolayout
My ImageView autolayout
My code
PopularViewController.swift
import UIKit
import Alamofire
class PopularViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
var users: [JSON] = []
#IBOutlet var collectionView: UICollectionView!
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//#warning Incomplete method implementation -- Return the number of items in the section
return users.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("UserCell", forIndexPath: indexPath) as! PopularCollectionViewCell
cell.user = self.users[indexPath.row]
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
Alamofire.request(.GET, "http://128.199.160.213/datetick/users.json").responseJSON { (request, response, json, error) in
if json != nil {
var jsonObj = JSON(json!)
if let data = jsonObj["users"].arrayValue as [JSON]?{
self.users = data
self.collectionView.reloadData()
}
}
}
}
}
PopularCollectionViewCell.swift
class PopularCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var profilePicture:UIImageView!
var user:JSON?{
didSet{
self.setupUser()
}
}
func setupUser(){
if let urlString = self.user?["profilePhoto"]{
let url = NSURL(string: urlString.stringValue)
self.profilePicture.hnk_setImageFromURL(url!)
}
}
}
My output
I know its late to reply but it might be useful for others.
You can reduce the size using UICollectionViewDelegateFlowLayout. You have already inherited this class in your PopularViewController
Use Following function to do so
//To Show 3 items per row
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSize(width: (collectionView.frame.size.width - 3)/3, height: 110)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 1
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 1
}
Not sure what's going on. Could this be a collectionView bug on iOS 8? The black at the top should not be there...
View Controller Code:
class SearchViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
#IBOutlet var collectionView: UICollectionView!
// MARK: - VC Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
var viewNib = UINib(nibName: "SearchFiltersCollectionReusableView", bundle: nil)
collectionView.registerNib(viewNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "filter")
var viewNib2 = UINib(nibName: "SearchResultCollectionViewCell", bundle: nil)
collectionView.registerNib(viewNib2, forCellWithReuseIdentifier: "searchCell")
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - CV Datasource
func numberOfSectionsInCollectionView(collectionView: UICollectionView!) -> Int {
return 2
}
func collectionView(collectionView: UICollectionView!, numberOfItemsInSection section: Int) -> Int {
var itemsCount = section == 1 ? 10 : 0
return itemsCount
}
func collectionView(collectionView: UICollectionView!, cellForItemAtIndexPath indexPath: NSIndexPath!) -> UICollectionViewCell! {
var cell = collectionView.dequeueReusableCellWithReuseIdentifier("searchCell", forIndexPath: indexPath) as UICollectionViewCell
return cell
}
// MARK: - CV Delegate
func collectionView(collectionView: UICollectionView!, viewForSupplementaryElementOfKind kind: String!, atIndexPath indexPath: NSIndexPath!) -> UICollectionReusableView! {
var section = indexPath.section
var identifier = indexPath.section == 0 ? "nav" : "filter"
var view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: identifier, forIndexPath: indexPath) as UICollectionReusableView
return view
}
// MARK: - CV DelegateFlow
func collectionView(collectionView: UICollectionView!, layout collectionViewLayout: UICollectionViewLayout!, sizeForItemAtIndexPath indexPath: NSIndexPath!) -> CGSize {
var width = collectionView.bounds.size.width
return CGSizeMake(width, 70)
}
func collectionView(collectionView: UICollectionView!, layout collectionViewLayout: UICollectionViewLayout!, referenceSizeForHeaderInSection section: Int) -> CGSize {
var width = collectionView.bounds.size.width
var height : CGFloat = section == 0 ? 240.0 : 70.0
return CGSizeMake(width, height)
}
}
Try setting the view controller automaticallyAdjustsScrollViewInsets property to NO.