GUI design basics

CortezCortez Balazs KaposztasUSMember ✭✭✭

I finished my first application first part. I made it for cross platform. First i created the Core, then the android gui. Now i want to create the iPhone gui design but i dont understand the mechanism:

I want to create a title (navigation bar) on the top of all screen, with the application title and the back button for the sub screens. The home screen at the bottom there are toolbar. I didnt want to use it as a stock tab bar/ tool bar. Ohh i am confused. I placed there two button like in the tab bar or the tool bar. When i press one of them it navigate me to another screen, this two button disappear and i can do something else on this screen. But i can navigate back to the previous screen with the back button on the navigation bar. I want to use tool bar but i can't handle the touch event on it and the tab bar is different what i excepted. I want to navigate to a different screen where this tab bar not exists. Not only just slide for the proper tab screen.

In the interface builder in the Objects & Controllers section i can't use anything. What can i do for these items on it? If i select the Navigation Controller, than i set it in the AppDelegate as rootNavigationController it says, i didnt set the view. But i can't referencing the File's Owner's view with a Navigation Controller, only a view. Then i add a view to the Navigation Controller and referencing on it. But its not working again. It says i set more then once the view. If i delete the referencing, than i receive the previous exception.

Then i think, ok i create the gui with the simpliest controls from the Windows & Bars and Controls.

I place first a view. And then a navigation bar, a table view, and two button on it. I referenced the two button in the code, and the view with the File's Owner. In the code i set the two buttons TouchUpInside event. I found the this.NavigationController and i want to navigate to the new screen by PushViewController, but it is null.

I can't create the GUI to show the informations from the core. I dont understand the mechanism. How can i create an interface from different controls(NavigationController,Table View Controller and Tab Bar Controller). What can contains what. I can place a view in a NavigationController. What is different between PushViewController, set ViewControllers and set rootViewController.

If it true, what i understand from the articles the viewcontroller handle its view. And the view can we design in the interface builder. Are there any good articles which can explain these question for me?

Posts

  • JohnMiller.1234JohnMiller.1234 John Miller USMember ✭✭✭
    edited May 2013

    @Cortez,

    I will try and address the questions I can, but you really should break this up a little. It's too much for one post on how to do something. Also, its very unclear to me what you are actually trying to do. It looks like you posted a lot of frustration, rather than clear cut questions that are answerable...

    I want to create a title (navigation bar) on the top of all screen, with the application title and the back button for the sub screens.

    You use a UINavigationController to do this. The UINavigationController needs to contain other items. It also needs a root controller to start displaying first.

    The home screen at the bottom there are toolbar. I didnt want to use it as a stock tab bar/ tool bar. Ohh i am confused.

    I am confused too. I don't understand what you are asking/doing here. Can you please clarify this?

    I placed there two button like in the tab bar or the tool bar. When i press one of them it navigate me to another screen, this two button disappear and i can do something else on this screen. But i can navigate back to the previous screen with the back button on the navigation bar. I want to use tool bar but i can't handle the touch event on it and the tab bar is different what i excepted.

    It sounds like you are able to navigation to another screen, and navigate back. Is that correct?

    You said you want to use the tool bar, but you can't handle the touch event on it. What do you want to use a tool bar for?

    Why is the tab bar different than what you expected, what did you expect?

    Could you explain, simply and in a clear way, what exactly you are trying to do? Could you post a screen shot of what you want it to look like? You can design it in Interface Builder and than paste that screenshot in here.

    Are there any good articles which can explain these question for me?

    You could start with the Documentation section of this website. Here are a few relevant articles:

    http://docs.xamarin.com/guides/ios/getting_started/hello,_mvc

    http://docs.xamarin.com/recipes/ios/content_controls/tab_bar

    http://ijoshsmith.com/2010/10/09/using-uinavigationcontroller-in-monotouch/

    Thanks

  • CortezCortez Balazs Kaposztas USMember ✭✭✭

    Sorry John. I wrote a lot of thing. I try to reduce it.

    For UINavigationController:
    1)If i want to use more then one screen, like in the stock iPhone Settings Menu - You start the Settings, you click on the General, then Keyboard and so on - then you need definitely an UINavigationController. This is absolutely necessary to navigate between the screens because this control doing it?

    2) > The UINavigationController needs to contain other items

    What kind of items? Basically if in the Interface builder i drag Navigation Bar form the Windows & Bars section it has immediately an Navigation Item in the Objects Treeview, a Title Label. If i add a button to the navigation bar it absorb the button as Bar Button Item. I used these items. Are there more items? I mean for every screen. If i have 3 screen then i have for example a Title what is static for every screen and 3 UIViewController or something for every screen and two back button to navigate to the home screen? By the way. For every screen needed one UINavigationController, or one is enough. This one i set to the rootNavigationController on the first screen and this navigate the user through the three screen?

    Toolbar on the home screen at the bottom.

    If i can use a basic toolbar it is enough. But i dont know how handle the event if the user touch the tool bar item. The tab bar is something else what i like to do. The tab bar's position at the bottom is fix. If the user touch the one tab then only the main content changes, the tab bar doesn't move only the touched tab bar item will highlight. or selected. It is also a possible way but i thought something else.

    It sounds like you are able to navigation to another screen, and navigate back. Is that correct?

    Absolutely.

    what exactly you are trying to do

    I explain. There is a main screen. Call it Home Screen. On this screen i need a Navigation Bar on the top and a tool bar at the bottom. In the middle i need a table view. When i start the application, the core doing something, for example searching Prime numbers (2,3,5,7,11,...) and show these numbers in the table view. The table view will be complex(i need to show 2 static and 2 variable label for each row). But now this is enough. On the toolbar if i touch the first item - call it Settings - the app navigate to the another screen ( the searching paused) and we can set for example the interval for the searching( between 200 and 3 million). Then we can navigate back to the Home Screen with the back button on the navigation screen. After that the searching continues. The second tool bar item is a simple About menu. If we touch it then navigate to another screen(like the Settings tool bar item pressing) and there are some label with information about the application.

  • JohnMiller.1234JohnMiller.1234 John Miller USMember ✭✭✭
    edited May 2013

    @Cortez, I think it would be worth trying to start with something simpler. You are trying to learn a lot of pieces at once.

    Consider downloading this sample and play with it a little. That will teach you about the NavigationController.

    https://github.com/xamarin/monotouch-samples/tree/master/Hello_MultiScreen_iPhone

    Learn how to go back and forth, and how to add an additional screen to that example.

    Once you have that, I think you will learn quickly how to add a table to that and extend it. But you need you to grab the basics of each control first before you try and build a complicated 5 piece screen. Consider reading what how a NavigationController works, what a UIBarButtonItem is, etc.

    Here is an overview of the Navigation Controller:
    http://docs.xamarin.com/recipes/ios/content_controls/navigation_controller

    This tutorial walks you through the basics of a IB related table:

    http://docs.xamarin.com/guides/ios/user_interface/tables/part_5_-_using_xcode,_interface_builder,_and_storyboards

    That might help as well.

  • CortezCortez Balazs Kaposztas USMember ✭✭✭

    I saw this Hello_MultiScreen_iPhone sample application. I read all of the aritcles and tutorials. After that i try to write a sample code. But this is difficult to use more Controls on the same screen(Table View,Navigation Bar,Tool Bar). There aren't sample that show me. Oh sorry now i realized. I want to use tool bar not tab bar. I explained why. But i used every time tab bar on the bottom, not tool bar. I didn't find touch event for the tab bar, now i know why, but can't find Touch event for the tool bar button, only Touches/Began/Cancelled/Ended/Moved. I think i should use these methods.

    By the way. This sample application for the navigationController i can't set the title:
    `
    public override bool FinishedLaunching(UIApplication app, NSDictionary option)
    {
    window = new UIWindow(UIScreen.MainScreen.Bound);
    UINavigationController rootNavigationController = new UINavigationController();
    rootNavigationController.Title="TPF";
    HomeScreen homeScreen = new HomeScreen();

     rootNavigationController.PushViewController(homeScreen, false);

    this.window.RootViewController = rootNavigationController;
    this.window.MakeKeyAndVisible ();
    return true;

    }
    `

    I experince that it is not necessary to set a back button for the screens in this case. But i can't set the Title of the NavigationController, the Navigation Bar. I need to add a nagivation item and its title should i set?

    Its ok. After that i drop a TableView on the Home Screen. But to the TableView belongs a TableViewSource or something and a Delegate i think? If i simply drop the TableView on the Home screen i think it is not necessary. I need to define a TableViewSource for it and a delegate.

    I will be read the other articles. Thanks a lot John. Are you visiting this topic in the future?

  • CortezCortez Balazs Kaposztas USMember ✭✭✭

    Now i do it like in the Hello_MultiScreen_iPhone. On the Home Screen there are a table view with a toolbar on the bottom(not tab bar). I create two button on it ( Settings, About) as i explained. An i could catch the Click event. This part is perfect. But i cant set the title of the rootViewController.

    Another thing. I got it. As i thought before there only one NavigationController for every screen? It is correct? It has a stack and two procedure, pop and push. The window show every time the first element(View) on the top. If you call the PushViewController. It push the definied ViewController in the stack and then this ViewController is on the top of the stack, the first element. And the window show this ViewController's view. Right? After you touch the back button on the navigation bar, the navigation Controller calls the pop procedure.

Sign In or Register to comment.