I'm trying to create a CollectionView with cells. However, it seems to keep hiding the top of the first cells. Of course, I can set the top insets, however, isn't there another way to do it, or what am I doing wrong?
I've created a UICollectionViewController and set the following.
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath, object: PFObject!) -> PFCollectionViewCell? {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("ItemCell", forIndexPath: indexPath) as? BrowseCell
cell?.titleLabel.text = object["title"] as! NSString as String
// cell?.myImageView.file = (object["images"] as [PFFile]).first
cell?.clipsToBounds = true
return cell
}
override func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10
}
override func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(0, 10, 0, 10)
}
override func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSizeMake(self.view.frame.width/2-15, 100)
}
an image
Related
i have an a collection view and i use it as image slide show, but i need display in the left previous image and in the right display next image and in the middle current image
i need it same attached picture exactly:
this my code:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return arr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = myCollec.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
cell.img.image = UIImage(named: arr[indexPath.row])!
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: myCollec.frame.width, height: myCollec.frame.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
0
}
In sizeForItemAt you are setting the item width to the collection view frame width.
Change that to a value that will make the cell's not full-frame-width.
Try starting with this:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: myCollec.frame.width - 80.0, height: myCollec.frame.height)
}
I have a collection view in my VC, I scroll collection view horizontally, I want to center each cell on scroll horizontally, I have tried a code but when it scrolls it shows next cell more left then the second one .This is my code,
fileprivate let sectionInsets = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 15)
gridView.delegate = self
gridView.dataSource = self
gridView.register(ItemCollectionViewCell.self, forCellWithReuseIdentifier: "ItemCollectionViewCell")
gridView.register(UINib(nibName: "ItemCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "ItemCollectionViewCell")
gridView.showsHorizontalScrollIndicator = true
gridView.bounces = true
gridView.showsHorizontalScrollIndicator = false
gridView.showsVerticalScrollIndicator = false
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
return auctions?.properties?.count ?? 0
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
let cell:ItemCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "ItemCollectionViewCell", for: indexPath) as! ItemCollectionViewCell;
cell.propertyData = (auctions?.properties![indexPath.row])!
if auctions?.status == AuctionStatus.Live.rawValue {
cell.noOfBidsPlaced.isHidden = false
}
else {
cell.noOfBidsPlaced.isHidden = true
}
cell.populateCell()
return cell
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
let size = CGSize(width: 335 , height: 337)
return size
}
//3
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
return sectionInsets
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
{
return sectionInsets.left
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return sectionInsets.left
}
How I can scroll each cell to center perfectly?
Here is how it shows my collection on start,
Thats what it shows on scroll, it get cut from left side
Don't use static height and width.
call this function.Maybe its helpful for you:-
// func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// return CGSize(width: yourCollectionView.frame.size.width, height: yourCollectionView.frame.size.height )
// }
I am implementing a UICollectionView that needs to page horizontally. The UICollectionViewCell needs to be the same size as the UICollectionView. The cell has 2 embedded rows. The first has a UITextView and a UIButton and the second has a UITextView.
The UICollectionviewCell and the constraints work in preview for different sizes of the iPhone (e.g. 4s, 8, 8plus) but when running in the simulator paging doesn't work correctly and the cell's width, I guess, isn't centered and the cell doesn't move far enough to reach the next cell making the cell look cutoff.
I have tried the solution at this url: UICollectionView Horizontal Paging not centered
but I can't seem to get the width and centering correct. The code I'm using is below.
internal class AccessViewController : UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
//...
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! PagerContentCollectionViewCell
//Set the cell title
cell.txtTitle.text = "title"
//add a target for the call capability
cell.btnCall.addTarget(self, action: #selector(didButtonClick), for: .touchUpInside)
//description
cell.txtDescription.text = "description"
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//let i = IndexPath(item: titles.count, section: 0)
collectionView.scrollToItem(at: indexPath, at: .right, animated: true)
print("Selected")
collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let frameSize = collectionView.frame.size
return CGSize(width: frameSize.width, height: frameSize.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let frameSize = collectionView.frame.size
return CGSize(width: frameSize.width, height: frameSize.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
}
The UICollectionView width and height are 267, 153.
The UICollectioViewCell width and height 262, 150
The Section Insets are 0,0,0,0.
Any help is much appreciated.
Thanks
Edit: I added in code I was trying to use for the layout. I am probably missing something else too.
I was able to fix using these two functions:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let frameSize = collectionView.frame.size
return CGSize(width: frameSize.width, height: frameSize.height)
}
i am using collectionview to show image in full screen and allowing scrolling between different images. but when orientation will change it's not showing properly..And this is my code
override func willRotate(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval) {
// collectionView.reloadData()
collectionView.collectionViewLayout.invalidateLayout()
if visibleCell != nil {
collectionView.selectItem(at: visibleCell as IndexPath?, animated: true, scrollPosition: .centeredHorizontally)
}
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return images.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCollectionViewCell
print(cell.frame)
cell.SectionImage.image = images[indexPath.row].image
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.view.frame.width, height: self.view.frame.height)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
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
}
Use UICollectionView sizeForItemAtIndexPath method to define height and width of cell.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let leftAndRightPaddings: CGFloat = 15.0
let numberOfItemsPerRow: CGFloat = CGFloat(NUMBER_OF_ITEMS_PER_ROW)
let bounds = UIScreen.mainScreen().bounds
let width = (bounds.size.width - leftAndRightPaddings * (numberOfItemsPerRow+1)) / numberOfItemsPerRow
let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = CGSizeMake(width, width)
return layout.itemSize
}
Try it. And you will get your expected result.
First of all set the minimum spacing for cell and lines to 0.
After that return the size of cell equal to UICollectionView by using the delegate method
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
return CGSizeMake(collectionView.frame.size.width, collectionView.frame.size.height)
}
override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
dispatch_async(dispatch_get_main_queue()) {
self.collectionView.reloadData()
}
print_debug("change orientation")
}
Its work for me in the same situation.
I have 10 cells out of which the width of the 6th cell has to be different from others.I tried to change it in the flow delegate method. but something is going wrong with the spacing from 7th to 10th cell.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let widthOfCollectionView = collectionView.bounds.width - 40;
// For collectionView use "item" instead of "row"
if indexPath.item == 6{
return CGSizeMake(widthOfCollectionView,100)
}else{
return CGSizeMake(widthOfCollectionView/3, 100)
}
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10;
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return 10;
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
I made some changes to your code as follows:
import UIKit
class ViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate {
#IBOutlet weak var sampleCollectionView: UICollectionView!
let reuseIdentifier = "cell"
let insetValue: CGFloat = 5.0
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
// make a cell for each cell index path
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath)
// Use the outlet in our custom class to get a reference to the UILabel in the cell
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if indexPath.item == 6{
return CGSizeMake(collectionView.bounds.width - insetValue * 2,100)
}else{
return CGSizeMake(floor((collectionView.bounds.width - insetValue * 4)/3), 100)
}
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
return insetValue;
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
return insetValue;
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets{
return UIEdgeInsetsMake(insetValue, insetValue, insetValue, insetValue);
}
}
Final output:
To download the sample project, use the following link:
https://github.com/k-sathireddy/SampleCollectionView
For the width of small items you should return (collectionView.bounds.width - 30)/3, 5 for left inset, 5 for right inset and 2*10 for spacing = 30.
For the width of large item you should return collectionView.bounds.width - 10, 5 for left and 5 for right inset = 10.
You can replace this
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let widthOfCollectionView = collectionView.bounds.width - 40;
if indexPath.item == 6{
return CGSizeMake(widthOfCollectionView,100)
}else{
return CGSizeMake(widthOfCollectionView/3, 100)
}
}
With
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let smallItemWidth = floor((collectionView.bounds.width - 30)/3 * 1000) / 1000
let largeItemWidth = collectionView.bounds.width - 10
if indexPath.item == 6{
return CGSizeMake(largeItemWidth, 100)
}else{
return CGSizeMake(smallItemWidth, 100)
}
}
*Use floor() to round down large decimals