![]() Select the Image object in the storyboard scene and display the Attributes Inspector in the utilities panel (View -> Utilities -> Show Attributes Inspector). With the image file added to the project, the Image object needs to be configured to display the image when the app runs. Locate the image file in a Finder window and drag and drop it onto the left hand panel in the asset catalog as illustrated in Figure 3-6: Within the Project Navigator panel, select the Assets.xcassets entry listed under WatchKitSample WatchKit App so that the asset catalog loads into the main panel. The image file is named and can be found in the sample_images folder of the sample code archive which can be downloaded from the following URL: Before this can be configured, however, the image file needs to be added to the project. The first step is to configure the Image object to display an image. Double click on the newly added Label object and change the text so that it reads “Hello WatchKit” such that the layout matches that of Figure 3-5:īefore testing the app, some additional attributes need to be set on the objects in the user interface. Repeat this step to position a Label object immediately beneath the Image object. Locate the Image object in the Object Library panel and drag and drop it onto the scene layout. These elements are then positioned at runtime by WatchKit based on the available display space combined with any sizing and positioning attributes declared during the storyboard design phase.įor the purposes of this example, the user interface will be required to display an image and a label. When user interface objects are added to the layout canvas they are stacked vertically. Locate and select this file to load it into the Interface Builder tool where the scene will appear as illustrated in Figure 3-4:ĭesigning the user interface for a WatchKit app involves dragging objects from the Object Library panel onto the layout canvas. This is contained within the Interface.storyboard file located under the WatchKitSample WatchKit App folder within the Project Navigator. The next step in the project is to design the user interface for the WatchKit app. Verify this by running the application on an iPhone device or iOS Simulator session before continuing. The user interface for the iOS application is now complete. ![]() This will set up recommended layout constraints so that the label remains centered both horizontally and vertically within the screen regardless of whether the application is running on an iPhone or iPad display. Select the new label in the layout canvas and display the Resolve Auto Layout Issues menu by clicking on the button in the lower right hand corner of the Interface Builder panel as indicated in Figure 3-3:įrom the resulting menu, select the Reset to Suggested Constraints option. Double-click on the label and change the text so that it reads “Welcome to WatchKit” before positioning it so that it is centered in the layout canvas as illustrated in Figure 3-2: Once loaded, locate the Label view object in the Object Library panel and drag and drop it onto the storyboard scene. Locate and click on this file to load it into the Interface Builder environment. ![]() This layout is contained within the Main.storyboard file and is listed in the Project Navigator panel on the left hand side of the main Xcode window. The next step in the project is to design the user interface for the iOS app. Report this ad Designing the iOS App User Interface ![]() On the final screen, choose a file system location in which to store the project files and click on the Create button to proceed to the main Xcode project window.Ī review of the project files within the Project Navigator panel will reveal that, in addition to the iOS app target, new folders have been added for the WatchKit Extension and the WatchKit App (Figure 3-1) each of which contains the files that will need to be modified to implement the appearance and behavior of the WatchKit app: Before clicking Next, change the Language menu to Swift and turn off the Include Notification Scene option. Click Next, set the product name to WatchKitSample, enter your organization name and identifier and make sure that the Devices menu is set to Universal so that the user interface will be suitable for deployment on all iPhone and iPad screen sizes. On the template screen choose the Application option located under watchOS in the left hand panel and select iOS App with WatchKit App. Start Xcode and, on the Welcome screen, select the Create a new Xcode project option.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |