Implementing A Mail app-like User Interface - ios

I am trying to implement a user interface that is similar to the iPhone's Mail app.
The main screen displays a table. From the table the user can select a cell, at which point the next screen is launched. At the bottom, there is a bar showing a short text and an icon.
The second screen displays the details of the cell. It will also be a table display. The bottom bar shows icons associated to this screen.
What kind of layouts do I use to implement this in Xcode?
1. Do I use a View controller, add a View and embed a TableView and a Toolbar inside that view?
2. Do I use a Table View Controller and add a Table View inside it and use the bottom tool bar that comes with the table view?
In the Table View Programming Guide for iOS, under 'Recommendations for Creating and Configuring Table Views,' it says 'Use an instance of a subclass of UITableViewController to create and manage a table view.' When I use this, the bottom bar can only be fixed or disappear when going back and forth between two screens via segue. That makes me wonder whether I should just use a View controller which is against the recommendation.

Use a UIViewController
Why?
If you are going to display more than a tableView then it is recommended to use a UIViewController for the storyboard.
UIViewController are much more flexible. I guess your confusion comes from the following documentation line:
Use an instance of a subclass of UITableViewController to create and
manage a table view
This does not mean you must to drag and drop a UITableViewController on the storyboard. It means your class need to inherit from UITableViewController or at least implement the deleguate and datasource methods.
You would use UITableViewController only and only if you need to display a tableView.

Related

Use XLForm with a toolbar

I want to launch a XLForms view controller as a Form Sheet. I want the controller to have a toolbar at the top and then the XLForm tableview underneath it. How?
The view controller isn't a navigation controller and so I need to add a toolbar at the top (or bottom) where I can add buttons. So how do I do this?
It turns out that this is not too difficult. I just wish that it was documented somewhere.
All the sample code I could find showed the top view controller inheriting from XLFormViewController. In this case, the IB controller only requires a topline view.
I wanted to expand the view controller to have other components in it other than just a "View" object. I wanted a toolbar across the top and a couple of other things.
So, here's how I did it. I'm not sure that this is the best approach but it did work.
Create the View Controller in IB and add all the components you want.
Include a TableView object someone in your design
Go into the "Assistant Editor" and hook the TableView object to the "tableView" object defined in XLFormViewController.h by ctrl-dragging and dropping on the IBOutlet tableView object.
All other controls work as usual.
Important:
Do not treat the tableView object like a regular object. In other words, do not implement UITableViewDataSource and UITableViewDelegate methods.
Hope this helps.

Interface Builder : cannot assign custom class to table view controller

I am trying to create a simple app for iOS that uses a tab bar controller to present either a map view or a table view. Both the map view and the table view have the same navigation bar button items:
A Logout button on the left, and Refresh, Add New buttons on the right side of the navigation bar. So I have started experimenting the idea of having a parent controller called LocationViewController, which inherits from the UIViewController.
For the table view, I have a controller called TableViewController: LocationViewController, and another controller called MapViewController: LocationViewController.
On the storyboard, I added a set of two buttons (for refresh and add new) to the top header section of each view (very small, may be hard to see). See the image attached below:
There is no problem for me to assign the custom view controller MapViewController to my map view panel, but I cannot find the custom controller class TableViewController in the panel (see the below screenshot)
I found a similar post on stackoverflow, and a reboot solved that problem, which I also tried, but did not solve my problem at all.
You have added youe buttons in the wrong place. I do not know the right name for the bar, but it contains "associated objects". What you want to achieve should look something like this :
Unfortunatelly, you cannot add two UIBarButtonItems to one side of navigation bar via interface builder. You can either drag a UIView instead of UIBarButtonItem to that "slot" and add two UIButtons there, or you ca add multiple buttons from code.
Also, it seems that the name of your question is a bit misleading :) After carefull reread of your post I found the "right" question.
Answer - you have added a UITableViewController in your storyboard, but your class doesn't inherit from UITableViewController. If you want to keep the base class, you will have to make it a "plain" UIViewController and add a UITableView to it. Note, that this way you won't be able to have prototype cells.
You may need to subclass it from UITableViewController. Replace the UIViewController parent class for UITableViewController, like this:
class ViewController: UITableViewController {
Then make sure you selected the View Controller where blue color is all around it and then you can place the name of the class that inherits from UITableViewController.

How to create a separate view in Storyboard to be included programmatically in UITableView?

I have a UIViewController with a UITableView that is fed with data from the local database. When the user first launches the app (after installing) the table view is empty and I display a UIView in the middle of the table view that contains a UIImage, a UILabel and a UIButton (a call to action).
The first version of this view I built programmatically, which was no good to me because every time I tweaked something I had to build the app again. Then I switched to the storyboard but had to drag a UIView to the middle of my tableView. It is working now but I don't like the way it is, I can't edit my table view cells without having to move the UIView out of the table view.
I'd like to have a way to build this view entirely separated from my tableView (or even from my view controller in question) and then reference it in the viewDidLoad call of my view controller.
Unfortunately Xcode does not allow us to drag views directly to the storyboard so I'm pretty lost here.
Please tell me if I haven't been clear enough. I appreciate any help you could give me.
UPDATE: It'd be particularly awesome to me if I could also create a custom Swift class for this view of mine and reference it in the storyboard. And then in my viewDidLoad I could simply instantiate my custom view.
Thanks in advance.
Create a XIB file in which you can drag a view (without a view controller).
In your code you can load the XIB using NSBundle.mainBundle().loadNibNamed("MyXibName", owner:self, options:nil).
In the XIB file you can give the UIView a custom class (like you can do with view controllers in storyboard).
You then of course have to retrieve the view from the array returned by loadNibNamed and cast it to your custom class.

set size of tableview in ios storyboard

I want my ViewController to be shared by a tableView and a TextView, where the TextView would appear beneath the TableView. But the TableView insists on taking over the entire scene/screen. How do I set the height of the TableView in the storyboard so I can make room for my TextView? (Please notice that I am not asking for a footer, which is actually what I am trying to change from)
The problem is that you are using a UITableViewController, which means that you get a scene with a full-screen UITableView.
To avoid this, use a normal UIViewController scene and just insert the UITableView into the interface manually (and configure its delegate and dataSource to point to the view controller).
UITableViewController is just a convenience. It doesn't do anything for you that you can't do yourself with a normal UIViewController. And in your situation, it is an inconvenience instead of a convenience.
Add a container view to your ViewController and link to an "external" UITableView instead of the provided UIView that comes with it when your drop it into your storyboard.
Send data via the segue, get it back via a delegate.
This way you can freely design your View with very little headaches.

How to place a button below a UITableView managed by UITableViewController

I have a screen with a table view managed by a controller based on UITableViewController. I would now like to affix a button to the bottom of the screen so that it does not scroll along with the table view cells.
Replacing the UITableViewController with a plain UIViewController is not an option, as I want to include a UIRefreshControl. From what I have read, using a UIRefreshControl without a UITableViewController is currently not possible without resorting to any hacks / relying on undocumented behaviour.
I tried using a UIToolbar provided by the navigation controller which my table view controller is contained in, but there are two problems with that approach:
I only want the toolbar with the button to be present in the top level table view. However, I have not found an elegant way to only show the toolbar for the top level table view. I want the toolbar to animate out of the screen to the left together with the table view when I drill down.
I have not found a way to increase the height of the toolbar. Would I have to put the button in a dummy UIView?
This is approximately what I am aiming for:
http://pic.rockmynews.com/img/free-iphone-app.png
Another idea is using a container view controller containing the button at the bottom and the table view controller above it as its child view controller. But that seems a lot of work for something this simple.
So what is the best way to do this? Any recommendations?
Create the UIView container view. But also create a UIViewController subclass to manage the container. Then, add your existing table view controller as a child view controller and add the table view as a subview. Now you can control all of the subviews and positions while still having automatic refresh control operation.
Just use
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
and return a UIView for the desired button. and
tableView:heightForFooterInSection
and return the footer height
If you aren't willing to use a container view controller, you could use a third-party pull to refresh control like https://github.com/samvermette/SVPullToRefresh instead. This has the added benefit of being backwards compatible with iOS 5, if you want to support it.
You can use a UITableViewController. Just override viewDidLoad and then resize the tableView to make room for your extra view and then add your view programmatically. Make sure to set the right resizing mask so that things look correct on different screen sizes. (Easily tested in the Simulator by trying it out on the iPhone4 and iPhone5)

Resources