Recreate this view from overcast - ios

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

Related

Customs UIView's in TableViewController

I've some difficulties to understand how this UIViewController is made. I think a scheme of the UIView's used in this UIViewController will help me to understand
Here is the screenshot of the UIViewController
I want to make something like that : put an UIView with UILabel, UIImageView, UITextField,... inside a TableView, between two cells.
You can't put normal views between cells. You can use various types of custom cells to get the look you want, but a table view manages its view hierarchy and you absolutely cannot add your own views to it.
You can use UITableViewController with static cells for this layout scheme and perform this layout directly from storyboard.
Alternatively you can put custom views inside vertical stack view and put it all into scrollview.
You can create your own customised tableHeaderFooterView and cells. Then you will only need to register them to the tableView and do logic on the cellForRowAt and headerFooterViewInSection methods.

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

how to make a space at the bottom of a UITableView in a UITableViewController

I want to add a footer to the UITableView, there are two ways, either footer for the section, or footer for the UITableView. Both don't work for me because I want to footer always at the bottom of the screen. In other words, floating footer.
That's why after searching, people suggest to but the footer under the UITableView. I would need to resize the UITableView and add the footer through IB under it. That makes sense and that's what I am asking for.
Kindly I have a specific problem and It's not about footer at all
My problem is that I couldn't create constrains for the UITableView that locates inside UITableViewContoller, whenever I click Ctrl + drag, I don't see the options that I would normally see.
Is that because I'm working with UITableViewController?
This is a screenshot of my hirechy
Again I would like to resay that my problem is not about footers, my problem is about how to resize the UITableView in a UITableViewController
I created a sample project with a fixed footer. You can download it here. What I have added is:
ContainerView 100%
- TableView 90% of the ContainerView and constraints to the ContainerView
- View 10% of the ContainerView and constraints to the ContainerView
You shouldn't resize the UITableView of an UITableViewController object : your tableview is in fact your main view.
If you want to put a empty space that can't be scrolled below an UITableView, you should use an UIViewController instead.
Add an UITableView and an UIView to this UIViewController object.
Set the left, right, and bottom constraints aligned to its superview for the UIView, and fix its height with a fourth constraint. Add the left, right and top constraints aligned to its superview for the UITableView, and set the vertical space between the view and the tableview to 0 with a constraint.
Yes, you are correct. You cannot add a footer on a UITableViewController. For this I recommend using a UIViewController.
Follow these steps if you want to add a footer:
create UIViewController
Add footer to the bottom and add constraints to the bottom border.
Add UITableView to the UIView, and add constraints to the footer.
Also for the controller, just create two classes within the same file, and make one of them as a UITableViewController and the footer as regular class within the file.
If you just want space you should just use UIViewController. Add UITableView inside that, and put constraints on that.
This is one approach, and there maybe many other. Please let me know if I can help you any further.

How would I create an "About" page like this for my app? How do I have a UITableView (grouped) under a UIView?

Take this about page for Things:
I'm having trouble creating something similar. I just want a UITableView under a UIView with a UIImageView and a UILabel in it.
If I use a UIViewController and so I can position the UITableView downward, I get this error: "Static table views are only valid when embedded in UITableViewController instances."
If I use a UITableViewController with a grouped style and use contentInset on self.tableView to move it down ([self.tableView setContentInset:UIEdgeInsetsMake(150,0,0,0)];) I can't figure out how to place a view above it. If I try to attach anything to self.view it crashes (obviously). Same happens if I attach anything to self.tableView.
I then tried making the UIView the header of my UITableView section (I only need one section) but I can't get it to move up enough. It just sits inside the UITableView almost.
How do I have a UITableView (grouped style) exist with a UIView above it?
This can be achieved easily using the tableHeaderView property of UITableView. If you are using Interface Builder (which it looks like you are), then you can just drag a UIView above the table view and it will be set as the table's header view. All you need is a UITableViewController; no need for UIViewController and manually laying it out.
That's because the view probably isn't placed on top of the table but rather within the table's section 0 header. Or, even more likely, the view in question is just a regular UITableViewCell with a 0 alpha background.
Either of these options would allow the top view to be scrolled out of frame as the user scrolls under every condition.
I recommend [MDAboutController] (https://github.com/mochidev/MDAboutController)
It's easy to integrate and you don't have to waste any time configuring the UITableView.

UISegementController in top of UITableView

I would like to add a UISegmentController in the top of my UITableViewController, just like in the AppStore.
I have tried googleing this but either I am search for the wrong things, or too view have written about this.
How can I do this, keeping it in the top with a different design than the UINavigationBar.
For style add segmentCont.segmentedControlStyle=7; which is same as the picture style.
It may not be a UITableViewController. It might be just a UIViewController with a segment control at the top of the XIB and a tableview placed underneath the segment control. That way, you could scroll the table view without scrolling the segment control.
I believe that is a custom header cell for the tableview. You should start by created a custom header with your segmented control inside that.
I think that's a ToolBar with UISegmentedControl or just UISegmentedControl and UITableView under it. You can place them (UISegmentedControl + UITableViewController) on UIScrollView and disable scroll for UITableView. You should make appropriate contentSize for your scrollview.

Resources