iOS Views
From Xojo Documentation
Contents
Views are where you design the layout of the iOS screen by adding controls. This is similar to a Window in desktop projects or a WebPage in web projects. You simply drag controls from the Library onto the View, positioning them as appropriate. Note that iOS uses a feature called Auto-Layout to determine how the controls move on the screen as the device size or orientation changes.
Use the Insert button or menu to add new Views to your project. You can change the way the view layout appears by using the Portrait/Landscape buttons or by clicking the Device Type button to change the size of the device to various iPhone and iPad sizes. Note that these only affect the preview and do not alter how the app runs. If you want to control Portrait/Landscape support for your app, do it in for the appropriate Screen. Otherwise the Layout Editor for a View works as described in the Layout Editor topic.
Add event handlers to the controls the same way you do in desktop and web projects: choose the "+" button in the Layout Editor toolbar and select "Add Event Handler". A view can have several event handlers: Activate, Close, Deactivate, Open, Resized and ToolbarPressed.
Below are commonly used events, properties and methods used with iOS Views. Refer to iOSView in the Language Reference for the complete list.
Events
- Called when the view is first opened or redisplayed after another view that was displayed over it is closed.
- Called when the view is closed.
- Called when the view is deactivated by either closing it or displaying another view on top of it.
- Called when the view first opens. This is typically where you will do initialization such as setting up toolbars.
- Called when the view size changes, which can occur when the device orientation changes. You can use this to reposition controls or perhaps show an entirely different view.
- Called when a button on the Navigation Bar or the Toolbar is pressed.
Properties
The Behavior section of the View Inspector has these properties you can use: BackButtonTitle, NavigationBarVisible, TabTitle and Title.
- BackButtonTitle is the title that appears on a subsequent view to get back to this view. For example, if this view contains Notes, then you might set BackButtonTitle to "Notes" so that if a later view displays details for a note (by pushing onto this view), its back button will show "Notes" instead of just "Back". When you then click the "Notes" button, the new view closes and this view reappears.
- The Title property is the title of the view.
- TabTitle is the title that is displayed when the View is displayed on a tab.
- The Title and BackButton are only displayed if the Navigation Bar is visible (NavigationBarVisible is ON or True).
Methods
- Call this method to close the view. The initially displayed view cannot be closed.
- This method is used to display new views as shown below.
- Returns the width and height of the view area as a Size.
Usage
Displaying a New View
You are often going to have more than just a single view for your app. Additional views are most often displayed by "pushing" them onto the current view. This puts the new view onto the view stack so that the back button (in the Navigation Bar) on the new view can be used to go back to the original view. You do this using the PushTo method.
For example, say you have a view called NotesView and a view called NoteDetailView and you want NoteDetailView to appear when the user clicks on a note displayed in NotesView. This code on NotesView displays NoteDetailView:
The previous view can be displayed by the user tapping the back button in the Navigation Bar (if enabled) or by closing the new view in your code:
Changing the Current View
There may be times when you want to change the current view but do not want to push to it because you do not want it to be part of the view navigation stack. This situation can occur with a startup login screen, for example. You can have the login view be displayed by default and when the user successfully logins in, you can change the base screen to a new view so that the navigation stack is not available. You can directly change the current screen to a new view by using the iOSApplication.CurrentScreen property like this:
The above example simple switches to a new view, but you can also switch the screen to point to a new tab or split (on an iPad). To switch to a new tab, you have to create a new iOSTab and then add your views to the tabs. This example adds two tabs to a tab and then makes it the current screen:
Var mv As New MainView
mv.Title = "Main"
tab.AddTab(mv)
Var v2 As New View2
v2.Title = "Tab 1"
tab.AddTab(v2)
App.CurrentScreen.Content = tab
Similarly, this example adds two views to a split and then makes it the current screen:
Var master As New MainView
split.Master = master
Var detail As New DetailView
split.Detail = detail
App.CurrentScreen.Content = split
Displaying a Modal View
A modal view is a view that is also displayed without being "pushed" onto the current view. A modal view cannot have toolbars and should not have other views pushed onto it. You can show and close a modal view using a Declare command to specific CocoaTouch APIs. To display a view modally:
// Display ModalView modally
Declare Sub presentViewController Lib "UIKit" _
Selector "presentViewController:animated:completion:" _
(parentView As Ptr, viewControllerToPresent As Ptr, animated As Boolean, completion As Ptr)
presentViewController(Self.Handle, v.Handle, True, Nil)
A button on the modal view is needed to close it:
Declare Sub dismissViewController Lib "UIKit" _
Selector "dismissViewControllerAnimated:completion:" _
(parentView As Ptr, animated As Boolean, completion As Ptr)
dismissViewController(Self.Handle, True, Nil)
Adding Toolbar Buttons
A view can have a Navigation Bar, which displays at the top of the view, or a toolbar which displays at the bottom of the view. In a horizontally regular environment, a navigation bar can also display within a view that doesn’t extend across the screen, such as one pane of a split view controller.
Refer to UserGuide:iOS Toolbars for more information.
Example Projects
- Examples/Navigation/NavigationExample
- Examples/Navigation/PushToExample
- Examples/Navigation/SplitViewExample
See Also
iOSView class; UserGuide:iOS UI, UserGuide:iOS Screens, UserGuide:iOS Toolbars topics