How to make a UITableView look like this? - ios

I'm curious of how Youtube `s UITableViewCells are done, here is a screenshot:
Like you can see the cells are like squared and centred, how can I do that?

While you actually can use UICollectionView instead of a UITableView, this layout (YouTube App) can actually be achieved with UITableView as well.
You will need to create a custom UITableViewCell, that has few images and labels. When you create a custom UITableViewCell, you add items to the contentView property. You can then change the constraints or frame of the contentView property to achieve the effect.
Of course, there are more ways to achieve this layout, but I would follow this one:
Create a custom subclass of UITableViewCell.
Give UITableViewCell a clear background.
Give white background to the contentView UIView property of the created subclass.
Add constraints for margin between cells to contentView in UITableViewCell.
Design the layout of the cell in contentView.
It is basically not hard to create a design like this.

Use a UICollectionView instead of a UITableView
Cells are automatically centered, just create a square size.

Related

iOS: How to create a scrollable UIStackView?

How can i create something like this? I believe the labels should be buttons because i would like to click on them and then they would take me to another UIViewController.
But how can i make a stackView scrollable or this is not even a stackView?
Did you tried to adopt UICollectionView insted of StackView?
I think it could support this approach better than StackViews
stackView doesn't scroll, You need to make either a horizontal scroll view with stackview in it Or The best approach is to use UICollectionView for this.
You will then write code for navigation in didSelectItemAt method of UICollectionViewDelegate.

iOS alternative for Androids <include> tag?

How am I supposed to reuse views in iOS?
For example, I have a view that returns as a CollectionViewCell, inside of a UITableViewCell and on a specific spot in a UIViewController.
What is the recommended way to deal with this?
Do I make a xib and add a holder view everywhere I need it?
But, then to react to size changes, I need to add constraints in code, which seems to be too much hassle just for a simple inclusion of a xib.
Is there a feature in Xcode I can use?
Create an UICollectionViewCell in a XIB. Then this cell is placed inside an UICollectionView. You can place this UICollectionView basically everywhere, also inside an UITableViewCell. As the UICollectionView can be auto-layout constraint in the Storyboard the size changes automatically. No need for programmatic constraints. When you want to reuse the UICollectionViewCell just put it inside another UICollectionView in another UIViewController or UITableViewCell.
Btw: to use this just as "reusing"-feature you can disable the scrolling in the UICollectionView.

How to put UIView inside of UICollectionView?

I want to put my UIView inside of UICollectionView(on top) that on scroll it scrolls with UICollectionView content. It's possible to put it on header part in UITableView, I did it, but in UICollectionView I cannot achieve the same effect. How can I do it?
I have created GitHub repo with sample. If anyone could help me with it.
In UITableView I add UIView inside of UITableView and it stays there, but in UICollectionView it stays behind of UICollectionView. I want that it(UICollectionView sections) will stay under the UIView and on scroll all(UIView & UICollectionView sections) will scroll together.
There is no such thing as collection view footer or header, because the layout can be very different depending on your needs, but, you have a couple of function that can help you for example:
registerClass(_:forSupplementaryViewOfKind:withReuseIdentifier:)
or
registerNib(_:forSupplementaryViewOfKind:withReuseIdentifier:)
depending if you are using a nib file or not.
I'm not sure but you will also need to provide the height of the view in the layout delegate
UICollectionViewDelegateFlowLayout
you can do this by dragging your UIView on to your cellidentifier of UICOllectionView
Like i did see in snapshot:
here View is my UIView which i added to UICollectionView and it scroll with the CollectionView

Recreate this view from overcast

I love overcast and am getting into iOS development. I see this style of screen a lot.
From what I gather this is a table view with cells and then headers but how is the part at the bottom added in and also the subtitle pieces of text below each row.
I can't seem to find a way in storyboard to do this.
You can drag a UIView object into your UITableView instance in Interface Builder and then configure it the way that you want to.
When you drag a UIView into your UITableView, just drag it to the top, just above the top-most UITableViewCell in your UITableView to create a header. To create a footer, just drag it below the intended UITableViewCell. You can then resize the view and lay it out to your content.
Also, if you would like to do it programmatically, have a look at the UITableViewHeaderFooterView.
You can also create header views and footer views for sections by implementing methods of the UITableViewDelegate protocol such as: tableView:viewForHeaderInSection: and tableView:viewForFooterInSection:.

UITableViewCell customization, where to attach subviews?

when subclassing UITableViewCell to define a complete custom cell what style to set? UITableViewCellStyleDefault? Actually I don't need neither the label or the imageView, would they be allocated the same?
So when attaching my custom views to the UITableViewCell subclass, is it better to add to self, or to self.contentView?
And is it ok to do some quartz drawing in drawRect in the UITableViewCell subclass (Like background) ?
Thanks
when subclassing UITableViewCell to define a complete custom cell what style to set? UITableViewCellStyleDefault? Actually I don't need neither the label or the imageView, would they be allocated the same?
Since you are not using any of the pre-defined UILabel or UIImageView subviews of UITableViewCell, it doesn't really matter. I just use UITableViewCellStyleDefault. I do not know for sure if the UILabels or the UIImageView are allocated or not. However, since there is no way to explicitly tell the UITableViewCell not to create those subviews, I wouldn't worry about it. Even if they are created, you aren't using them so drawing the cell will not be any slower, and since cells are reused as you scroll through the table, allocating just a few extra objects once is not going to affect your overall table view performance.
So when attaching my custom views to the UITableViewCell subclass, is it better to add to self, or to self.contentView?
All of the content should be put in the UITableViewCell contentView. This will ensure that the contents behave properly when the UITableView has an index on the right or if the UITableView (or UITableViewCell) go into editing mode.
And is it ok to do some quartz drawing in drawRect in the UITableViewCell subclass (Like background) ?
The recommended approach is for the background to be placed in the UITableViewCell backgroundView property. So I would not recommend doing any drawing in the UITableViewCell subclass itself. Just use the contentView, backgroundView, and selectedBackgroundView properties. You can create a simple UIView subclass and just set that as the backgroundView of the UITableViewCell, if you like.
If you want to create a custom UITableViewCell, my experience is that it's much easier to use IB instead of code--even if you prefer using code normally. I would definitely recommend taking a look at these two links:
Creating a custom UITableViewCell in iOS 4
Custom UITableViewCell
This sounds like exactly what you're looking for -- you don't have to use the label or the image in this case, and you can make outlets to any custom UIViews that you need.
what style to set? UITableViewCellStyleDefault?
it depends on your aims. The most used style is UITableViewCellStyleDefault.
See Using Cell Objects in Predefined Styles
is it better to add to self, or to self.contentView?
developer.apple.com recommends to add subview to self.contentView (they specially call it as contentView).
is it ok to do some quartz drawing
It also depends on your aims. If you use only images or colors for background, then customize your cell view in IB, I don't see the reasons to use qurtz framework.

Resources