The Multi-OS Engine provides two options for building the UI for iOS* applications.
1) Through the UI builder which is available within Android Studio when the Multi-OS Engine is installed. Look at this article.
2) For more complex UI, you can design in XCode Interface Builder and Multi-OS Engine can generate the Java bindings in Android Studio. Letz discuss this approach in detail in this article by building the same Quiz App as in the above approach (1)
As Step 1, To create any iOS application with Multi-OS Engine, create a stock Android application like this.
Step 2: Right click on the new Android project and select "Intel Multi-OS Engine Module" to create a new iOS* module.
Step 3: Then select "Single View Application" as a starting template for your app. This app is named "QuizApp".
When you expand the project structure, you will notice these files. Letz delete the files "AppViewController", "MainUI.storyboard" and the folder "resources/layout". Because, we are going to regenerate them after designing the UI in the XCode Interface Builder. It may prompt you that there are other references and if you still want to delete these files. Go ahead and delete them.
Step 4: Remove the reference to AppViewController in the imports of Main.java file as seen below
Step 5: Right click on QuizApp project and "Open Project in XCode"
It should bring up the XCode Editor. Now the next step will presume at least basic level of UI design with XCode for iOS* apps. If you want to refresh some iOS* design skills, now is the time.
Step 6: Expand the QuizApp Project in XCode and add a new source file based on Cocoa Touch class. Follow the following screenshots and there will be two files created MyViewController.m and MyViewController.h at the end of the step.
Step 7: Now create a new user interface by right clicking on the QuizApp project. Name your Storyboard as "MainUI" because that's the name defined in the Multi-OS templates in Android Studio which is going to be connected to this interface later.
At the end of this step, you should see the new project structure like below.
Step 8: Drag a new ViewController and select the newly created MyViewController in the highlighted section.
Step 9: Pick the UI controls from the bottom right and drag them to the storyboard. For this app, we need two labels and two buttons.
Create an entry point in the Storyboard by checking "Is Initial View Controller" box on the right.
Step 10: Click on the circular icon as highlighted and this will open up the center pane and open up "MyViewController.h" file from the pane. Create the IBOutlets for the two labels and two buttons and IBActions for the two buttons. Save the project.
Step 11: Now, go back to Android Studio and right click on the "QuizApp" project and click "Generate UI Interface Bindings".
This will create a new file called "MyViewController.java" and this file will have the java bindings for all the UI controls and actions that were created in XCode. Everytime, any UI element is added/deleted or modified in XCode, then UI Interface bindings have to be generated by the above process.
Step 12: Letz add a new Java class that implements a simple logic for the Quiz App
Step 13: It is necessary to delete "@Generated" and "native" from the methods that you are going to modify. This is to imply that the originally generated code is modified.
Step 14: And then create a new object of class QuizDataSet and then initiate it in a separate method "viewDidLoad". Call the necessary methods from the above class in the action handlers defined for the two buttons. The screen below is all that required to implement the logic.
Step 15: Run the project and you will see the App in action.
And there you go! You have successfully designed your app with the XCode Interface builder and implemented in Android Studio using Java.