LouisDotCom / NextItem

what to do!
0 stars 1 forks source link

Embed your view controller in a UINavigationController #6

Open cristoper opened 7 years ago

cristoper commented 7 years ago

Intro

My next suggestion after moving your Items array to a plist file (issue #5) is to embed your view controller into a UINavigationController. This is quite similar to the UITabBarController that you've already implemented in a branch. While UITabBarController manages a collection of view controllers that the user can switch between, the UINavigationController manages a hierarchy of view controllers which the user can move forward and backward between.

I'm not sure it is the best interface for your app, but since UINaviagtionController is the standard way to implement a common idiom for mobile apps (a table of data that the user can drill down to get more details), it is worth getting experience with anyway.

To get started I would set your ViewController to be the root view controller of a UINavigationController, add a "Customize" button to the toolbar in your root view controller, and show an empty UITableController when the Customize button is tapped. This can all be done in Interface Builder without writing any code. The next step (in a separate issue) will then be to present the list of items in the table view which, eventually, the user will be able to edit.

Interface Builder

Here's approximately how I added the UINavigationController in Interface Builder:

  1. Drag Navigation Controller from the Object Library to the storyboard
    • By default this brings a UINavigationController with a segue to a UITableViewController. You'll change the segue, but keep the UITableViewController.
  2. Right/ctrl click from the UINaviagtionController to your root view controller and select 'root view controller' under the section 'Relationship Segue'. This will set your ViewController as the root view controller of the UINavigationController (the first view it displays).
    • Setting the segue will automatically add a UINavigationItem to your view (with a “Title”) and will mess up the constraints on your views. It can be annoying to fix the constraints: I deleted the one between the top of the stack view and the top of its superview and replaced it with a vertical space constraint between the stack view and the Top Layout Guide.
  3. Drag a Bar Button Item (UIBarButtonItem) from the object library to the right side of the UINavigationItem. Give it a title like “Customize”
  4. Right/ctrl click from that button to the UITableViewController and select “Show” under “Action Segue”. This will create a segue which will automatically show the UITableViewController when the button is tapped -- it will also notify our code when the segue happens, which we will take advantage of later set up the table.
  5. Move the storyboard entry point so that it points to the UINavigationController

Build and run to test: tapping the “Customize” button should show an empty UITableView and put a “back” button in the toolbar. Tapping “Back” should return to your main view.

Here's a screenshot of what my storyboard looks like:

screen shot 2017-08-11 at 12 38 04 am

Further reading

My implementation

I've committed my storyboard into a branch called uinavig in my fork of your repository. If you get stuck and want to see what I did, you can download it from GitHub (save it from your browser):

https://raw.githubusercontent.com/cristoper/NextItem/uinavig/NextItem/Base.lproj/Main.storyboard

Or you can clone my repo and checkout the uinavig branch:

$ git clone https://github.com/cristoper/NextItem.git chris-nextitem
$ cd chris-nextitem
$ git checkout uinavig
$ open NextItem.xcodeproj/

If you've already cloned my fork, you can update it by simply cding to its directory and:

$ git pull
$ git checkout uinavig
LouisDotCom commented 6 years ago

Update. I moved onto this email and grabbed a copy of your Main.storyboard (thanks!) which got rid of several errors. Now, during run time the project throws a new error:

Could not cast value of type '__NSCFDictionary' (0x10999eaf8) to 'NSString' (0x105708d68).

2017-11-26 23:51:29.351056-0700 Nudge Me[34044:5859899] Could not cast value of type '__NSCFDictionary' (0x10999eaf8) to 'NSString' (0x105708d68).

(lldb)

Perhaps it's this: my items.plist differs in structure from yours (since I include priority & other values)... anyway, tomorrow I'll revert to your list and see how it goes. Yours:

Do nothing Respond to a waiting email Work on 505 yard *Mine:* Frequency low ItemID 1 Suggestion Browse a newspaper TimeSensitive all Frequency medium ItemID 2 Suggestion Drink a pint (of water) TimeSensitive all On Fri, Aug 11, 2017 at 12:50 AM, chris burkhardt wrote: > Intro > > My next suggestion after moving your Items array to a plist file (issue #5 > ) is to embed your view > controller into a UINavigationController. This is quite similar to the > UITabBarController that you've already implemented in a branch. While > UITabBarController manages a collection of view controllers that the user > can switch between, the UINavigationController manages a hierarchy of view > controllers which the user can move forward and backward between. > > I'm not sure it is the best interface for your app, but since > UINaviagtionController is the standard way to implement a common idiom for > mobile apps (a table of data that the user can drill down to get more > details), it is worth getting experience with anyway. > > To get started I would set your ViewController to be the root view > controller of a UINavigationController, add a "Customize" button to the > toolbar in your root view controller, and show an empty UITableController > when the Customize button is tapped. This can all be done in Interface > Builder without writing any code. The next step (in a separate issue) will > then be to present the list of items in the table view which, eventually, > the user will be able to edit. > Interface Builder > > Here's approximately how I added the UINavigationController in Interface > Builder: > > 1. Drag Navigation Controller from the Object Library to the > storyboard > - By default this brings a UINavigationController with a segue to a > UITableViewController. You'll change the segue, but keep the > UITableViewController. > 2. Right/ctrl click from the UINaviagtionController to your root view > controller and select 'root view controller' under the section > 'Relationship Segue'. This will set your ViewController as the root view > controller of the UINavigationController (the first view it displays). > - Setting the segue will automatically add a UINavigationItem to > your view (with a “Title”) and will mess up the constraints on your views. > It can be annoying to fix the constraints: I deleted the one between the > top of the stack view and the top of its superview and replaced it with a > vertical space constraint between the stack view and the Top Layout Guide. > 3. Drag a Bar Button Item (UIBarButtonItem) from the object library to > the right side of the UINavigationItem. Give it a title like “Customize” > 4. Right/ctrl click from that button to the UITableViewController and > select “Show” under “Action Segue”. This will create a segue which will > automatically show the UITableViewController when the button is tapped -- > it will also notify our code when the segue happens, which we will take > advantage of later set up the table. > 5. Move the storyboard entry point so that it points to the > UINavigationController > > Build and run to test: tapping the “Customize” button should show an empty > UITableView and put a “back” button in the toolbar. Tapping “Back” should > return to your main view. > > Here's a screenshot of what my storyboard looks like: > > [image: screen shot 2017-08-11 at 12 38 04 am] > > Further reading > > - Apple's View Controller Programming Guide for iOS > > - UINavigationController documentation > > > My implementation > > I've committed my storyboard into a branch called uinavig in my fork of > your repository. If you get stuck and want to see what I did, you can > download it from GitHub (save it from your browser): > > https://raw.githubusercontent.com/cristoper/NextItem/uinavig > /NextItem/Base.lproj/Main.storyboard > > Or you can clone my repo and checkout the uinavig branch: > > $ git clone https://github.com/cristoper/NextItem.git chris-nextitem > $ cd chris-nextitem > $ git checkout uinavig > $ open NextItem.xcodeproj/ > > If you've already cloned my fork, you can update it by simply cding to > its directory and: > > $ git pull > $ git checkout uinavig > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > , or mute the thread > > . >
LouisDotCom commented 6 years ago

Yes, my info.plist was causing the run time error. I am using your info.plist and the application works.

Today, I'll review your explanation of what you did in the storyboard, since I have used your version instead of manually updating mine (which I tried on my tabbed version, without success, to put it mildly).

cristoper commented 6 years ago

Yep, as you've already figured out that error is because my code expects the plist to contain an array of strings, but your plist contains an array of dicts.

One of the next steps in my tutorial will be to change the code to work with a dict like your plist already uses (so that the app can use the priority/frequency information).

chris

On 11/27/2017 12:08 AM, Louis Burkhardt wrote:

Update. I moved onto this email and grabbed a copy of your Main.storyboard (thanks!) which got rid of several errors. Now, during run time the project throws a new error:

Could not cast value of type '__NSCFDictionary' (0x10999eaf8) to 'NSString' (0x105708d68).

2017-11-26 23:51:29.351056-0700 Nudge Me[34044:5859899] Could not cast value of type '__NSCFDictionary' (0x10999eaf8) to 'NSString' (0x105708d68).

(lldb)

Perhaps it's this: my items.plist differs in structure from yours (since I include priority & other values)... anyway, tomorrow I'll revert to your list and see how it goes. Yours:

Do nothing Respond to a waiting email Work on 505 yard *Mine:* Frequency low ItemID 1 Suggestion Browse a newspaper TimeSensitive all Frequency medium ItemID 2 Suggestion Drink a pint (of water) TimeSensitive all On Fri, Aug 11, 2017 at 12:50 AM, chris burkhardt wrote: > Intro > > My next suggestion after moving your Items array to a plist file (issue #5 > ) is to embed your view > controller into a UINavigationController. This is quite similar to the > UITabBarController that you've already implemented in a branch. While > UITabBarController manages a collection of view controllers that the user > can switch between, the UINavigationController manages a hierarchy of view > controllers which the user can move forward and backward between. > > I'm not sure it is the best interface for your app, but since > UINaviagtionController is the standard way to implement a common idiom for > mobile apps (a table of data that the user can drill down to get more > details), it is worth getting experience with anyway. > > To get started I would set your ViewController to be the root view > controller of a UINavigationController, add a "Customize" button to the > toolbar in your root view controller, and show an empty UITableController > when the Customize button is tapped. This can all be done in Interface > Builder without writing any code. The next step (in a separate issue) will > then be to present the list of items in the table view which, eventually, > the user will be able to edit. > Interface Builder > > Here's approximately how I added the UINavigationController in Interface > Builder: > > 1. Drag Navigation Controller from the Object Library to the > storyboard > - By default this brings a UINavigationController with a segue to a > UITableViewController. You'll change the segue, but keep the > UITableViewController. > 2. Right/ctrl click from the UINaviagtionController to your root view > controller and select 'root view controller' under the section > 'Relationship Segue'. This will set your ViewController as the root view > controller of the UINavigationController (the first view it displays). > - Setting the segue will automatically add a UINavigationItem to > your view (with a “Title”) and will mess up the constraints on your views. > It can be annoying to fix the constraints: I deleted the one between the > top of the stack view and the top of its superview and replaced it with a > vertical space constraint between the stack view and the Top Layout Guide. > 3. Drag a Bar Button Item (UIBarButtonItem) from the object library to > the right side of the UINavigationItem. Give it a title like “Customize” > 4. Right/ctrl click from that button to the UITableViewController and > select “Show” under “Action Segue”. This will create a segue which will > automatically show the UITableViewController when the button is tapped -- > it will also notify our code when the segue happens, which we will take > advantage of later set up the table. > 5. Move the storyboard entry point so that it points to the > UINavigationController > > Build and run to test: tapping the “Customize” button should show an empty > UITableView and put a “back” button in the toolbar. Tapping “Back” should > return to your main view. > > Here's a screenshot of what my storyboard looks like: > > [image: screen shot 2017-08-11 at 12 38 04 am] > > Further reading > > - Apple's View Controller Programming Guide for iOS > > - UINavigationController documentation > > > My implementation > > I've committed my storyboard into a branch called uinavig in my fork of > your repository. If you get stuck and want to see what I did, you can > download it from GitHub (save it from your browser): > > https://raw.githubusercontent.com/cristoper/NextItem/uinavig > /NextItem/Base.lproj/Main.storyboard > > Or you can clone my repo and checkout the uinavig branch: > > $ git clone https://github.com/cristoper/NextItem.git chris-nextitem > $ cd chris-nextitem > $ git checkout uinavig > $ open NextItem.xcodeproj/ > > If you've already cloned my fork, you can update it by simply cding to > its directory and: > > $ git pull > $ git checkout uinavig > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > , or mute the thread > > . > — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or mute the thread .