Context
I am trying to create something similar to a Table view using UICollectionView.
I am using Xcode7 and storyboarding.
The way I do it is that I drag the collection view across the entire controller view.
And then I drag the entire cell across the row and align it with the right and left boundaries.
Problem
But, when I place a label inside the cell, then it gets displayed correctly only when the device is in a horizontal position.
When the device is vertical, it gets cut off at the left boundary.
Question
How do I ensure that the width of the collection view cell matches that of the container width?
1) Implement the function of cell size and return the collection width:
-(CGSize) collectionView: (UICollectionView*) collectionView layout:(UICollectionViewLayout*) collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*) indexPath {
CGFloat height = 50; //set the wanted height
return CGSizeMake(collectionView.frame.size.width,height);
}
2) Reload the collection when the screen size change (i.e. orientation change).
It is because you are not using autolayout. You can achieve this entirely in storyboard or through code.
Using Storyboard
Add UICollectionView in your UIViewController in storyboard.
Drag UICollectionView to fill up in your UIViewController.
Add Constraints as shown in image.
Drag UICollectionView to fill up in UICollectionView.
Add UILabel (Or whatever you want to have in cell). Also add constraints in that element.
Build and run.
Related
I have a question - how to add a view as a subview of UITableViewCell but on top of all other views?
Here is an example of what I'm trying to achieve:
The image should scroll with the cell - save it's position relatively to scroll view (table view in this case).
If the cell is to small in height then the emojis overlay will be cut by the cell on top of current one, so how can I add this emojis overlay as a subview but at the same time display it on top of every cell? I've tried bunch of variants for now and nothing is working for me.
Just adding as a subview of the current window is not working for me because this overlay should scroll with the cell.
Tried code:
view.layer.zPosition = 5
cell.contentView.insertSubview(view, aboveSubview: cell.contentView)
cell.contentView.bringSubview(toFront: view)
UIApplication.shared.keyWindow?.addSubview(view)
Try to set cliptobouds = false for your cell.contentview and cell itself.
Otherwise if it is single overlay which you want to be on top of every cell then better implement UISrollViewDelegate and position the overlay accordingly.
I have a UITableView with cells that have inside a UICollectionView.
Now all works great except of UICollectionViewCell scrolling i want that the height of table view cell follow the Collection view cell content.
In simple word i want scrolling in table view but not inside single cell i need to display all contents of UIcollectionViewCell without scrolling inside it.
Thanks
You have to calculate the collectionviews' heights and set a height constraint on each of them. then add top and bottom constraints from the collectionviews to their superviews (the tableviewcells / their contentviews) and let autolayout do its work.
don't forget
tableView.estimatedRowHeight = 44 // or something similar
tableView.rowHeight = UITableViewAutomaticDimension
in the controller's viewDidLoad to make the automatic row height calculation work.
I have a UIImageView on my ViewController, I also placed a CollectionView below it in storyboard. I populate the collectionView and with data and when I run the app, only the collectionview section scrolls, while the image view remains static on the page even while scrolling through the list of collectionView items. I wan the whole screen content to scroll up when the top item of collectionView is reached. How do i do this in objective-c. If it will be with a scroll view, how do ii implement this?
Images below illustrate how it is on iPhone music app in the radio tab section, which contains banner and collection view below, when i scroll up the banner moves out of sight above, and the collection view appears and the remaining content. that's what i want, the banner shouldn't be static
Have a UIScrollView as a parent for for image view and collection view. And your image view and collection view inside the scrollview. Now set contentSize property of the parent scrollview.
var size : CGSize
let height = imageView.frame.height + heightOfCollectionView // heightOfCollectionView is height calculated from total number of cells/sections present in collection view
size = CGSizeMake(self.view.frame.width,height) //assuming
scrollView.contentSize = size
Set this is viewDidLayoutSubviews of your view controller
By looking at the screenshots you can create a collectionview cell just to present that image view and put that cell at the top.
I have a custom UITableViewCell subclass with width of 300.
Since the cell is 20pt shorter than the table view, When the cells get loaded, its placed on the left most position, is there a way to center this custom cell to the tableview's center?
I tried cell.center = self.tableView.center in cellForRowAtIndexPath, but it wont work. any idea?
You can pad your custom cell with 10px to the left so it will only appear to be centered, so you just make the width 310 and move everything else inside by 10 px.
a) Resize your UITableView to 300 and center it.
or
b) Make your cell's width same as UITableView's width. Make your custom cell's background color clearColor. Add one more view to your custom cell subclass that will contain every other view and add every view in that view. Think of this like an illusion where the cell is actually wider but it's contents are centered in a fake view.
I have a grouped tableView in my iPad-app, and I've been trying to set cell.imageView.center = cell.center to center the image instead of putting it to the leftmost position. This is apparently not possible without a subclass of the UITableviewCell(If someone could explain why, that'd also be appreciated.. For now I just assume they are 'private' variables as a Java-developer would call them).
So, I created a custom tableViewCell, but I only want to use this cell in ONE of the rows in this tableView. So in cellForRowAtIndexPath I basically write
cell = [[UITableViewCell alloc]initWith//blahblah
if(indexPath.row == 0)
cell = [[CustomCell alloc]initWith//blahblah
This is of course not exactly what I'm writing, but that's the idea of it.
Now, when I do this, it works, but the first cell in this GROUPED tableView turns out wider than the rest of them without me doing anything in the custom cell. The customCell class hasn't been altered yet. It still has rounded corners though, so it seems it knows it's a grouped tableView.
Also, I've been struggling with programmatically getting the size of a cell, in cellForRowAtIndexPath, I've tried logging out cell.frame.size.width and cell.contentView.frame.size.width, both of them returning 320, when I know they are a lot wider.. Like, all the rows are about 400 wide, and the first cell is 420 or something. It still writes out 320 for all the cells..
This code will not work for a couple of reasons:
cell.imageView.center = cell.center;
Firstly, the center is relative to its superview. I believe the cells superview is the tableView. The imageView's superview will be the content view of the cell. Therefore the coordinate systems are different so the centens will be offset. E.g. the 3rd cell down will have a center of 0.5 widths + 3.5 heights. You should be able to ge around this issue by doing:
cell.imageView.center = CGPointMake( width / 2 , height / 2 );
The second issue is related to how the table view works. The table view manages its cells view's. The width of a cell is defined by the table view's width and the height is defined by the table view's row height property. This means the cell itself has no control over its size.
You can however size its subviews, but you must do this after the cells size has been set (otherwise you can get strange results). You can do this in layout subviews (of the custom UITableViewCell class). See this answer.
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.frame = ....
}
When layoutSubviews is called the cells frame has been set, so do your view logging here instead of cellForRowAtIndexpath.
As for the GROUPED style. Im not sure if this is designed to work with custom views. I suspect it sets the size of its cells to its own width minus a 20 pixel margin on each size, then applies a mask to the top and bottom cells in a section to get the rounded effect. If you are using custom view try to stick with a standard table view style.