サイトのトップへ戻る

Multi-OS Engineドキュメント 日本語訳

サイト内検索

Xcode のストーリーボードを使ってUIを作成する

複雑なUIの場合、デザインにはXcodeのInterface Builderを使い、Android Studio上でのJavaバインディングの生成には Multi-OS Engineを使います。 このトピックでは、この手法を使って簡単なクイズアプリを作成する方法について説明します。



1. Create a Stock Android Application

./img/1-1.png

2. 新たに Multi-OS Engine モジュールを作成する

Android project を右クリックし、 New > Multi-OS Engine Module の順に選んで新規 iOS モジュールを作成します。

./img/2-1.png

“Multi-OS Engine” カテゴリー内にある“Single View Application with Storyboard”を選びます。

./img/2-2.png

各項目に入力して “Keep Xcode Project”を選びます。

./img/2-3.png

モジュール名とパスには“ios”を使うように変更します。

./img/2-4.png

3. 不要なファイルを削除する

ビューコントローラーとストーリーボードを一から作成するので、既に生成されているものを削除しましょう。 “ui” パッケージと “MainUI.storyboard” ファイルを選んで、それらを削除しましょう。

./img/3-1.png

“Main” クラスを開き、正しくないAppViewControllerのインポートを削除します。

./img/3-2.png

4. Xcode プロジェクトを編集する

Android Studioのビューを“Project”に変更します。

./img/4-1.png

“ios” モジュールを右クリックし、 “Multi-OS Engine Actions” > “Open Project in Xcode”の順に選びます。

./img/5-1.png

Xcodeの画面上で、削除された“MainUI.storyboard”ファイルへの参照が残っているのでそれを削除します。

./img/6-1.png

5. ビューコントローラーとストーリーボードを削除します

“QuizApp” グループを右クリックし、 “New File...”を選びます。

./img/6-2.png

“iOS” > “Source” カテゴリー内の“Cocoa Touch Class”を選びます。

./img/6-3.png

クラス名を “MyViewController” に変更し、 “UIViewController”のサブクラスにします。

./img/6-4.png

Xcode の対象の (QuizApp) ディレクトリに保存します。(これを既定の保存場所にする必要があります)

./img/6-5.png

もう一つ新たなファイルを作成しますが、今度は “iOS” > “User Interface” カテゴリから“Storyboard” を作成します。

./img/6-6.png

それを同じ場所に “ストーリーボード”として保存します。

./img/6-7.png

6. ストーリーボードを編集する

編集のためにストーリボードを開き、大きな空白となっているエディタ領域に“View Controller”をドラッグインします。

./img/7-1.png

Attributes inspector内で、“Is Initial View Controller” チェックボックスにチェックを入れます。

./img/7-2.png

Identity inspector内で、ビューコントローラーのクラスを MyViewControllerに変更します。

./img/7-3.png

7. UI 要素を追加する

“label” を検索してそれをビューコントローラーのビューにドラッグインすることで、ラベルを二つ追加してください。

./img/8-1.png

同じ操作でボタンを二つ追加してください。

./img/8-2.png

各ラベルとボタンをダブルクリックしてテキストを編集し、それらをドラッグして最終位置に再配置します。

./img/8-3.png

ビューコントローラーのビューを選択し、“Resolve Auto Layout Issues” メニュー内で “Add Missing Constraints”を選びます。

./img/8-4.png

8. UI 要素をコントローラーに紐付けする

アシスタントエディター上で“MyViewController.h”を開き、各コントローラーに ctrl + Drag操作をしてストーリーボードエディタからMyViewControllerのソースコードへコピーします。

./img/9-1.png

各ラベルのアウトレットを追加します。一つは questionLabelとして、もう一つは answerLabelとして設定します。

./img/9-2.png

各ボタンのアクションを追加します。一つは showQuestionとして、もう一つは showAnswerとして設定します。

./img/9-3.png

結果は以下のようになります。

./img/9-4.png

9. ターゲットを編集する

プロジェクトナビゲーター内で “QuizApp” プロジェクトを選び、ターゲットリスト内で“QuizApp”を選びます。 “General” タブ内で、Versionと Build と Main Interface の項目を設定します。

./img/10-1.png

10. Java コードを編集する

Android Studioに戻り、 MyViewController.hを選んで右クリックし、 “Multi-OS Engine Actions” > “Synchronize to Java”の順に選びます。

./img/11-1.png

生成したバインディング保持するパッケージを求められます。

./img/11-2.png

QuizDataSetという名前の新規Javaクラスを追加します。

public class QuizDataSet {
        private ArrayList<String> questions = new ArrayList<>();
        private ArrayList<String> answers = new ArrayList<>();

        public QuizDataSet() {
                questions.add("What is the State Capital of California?");
                questions.add("What is the capital city of New York");
                questions.add("Which state is the Niagara Falls located in?");

                answers.add("Sacramento");
                answers.add("New York City");
                answers.add("New York");
        }

        public String getQuestion(int idx) {
                return questions.get(idx);
        }

        public String getAnswer(int idx) {
                return answers.get(idx);
        }

        public int getSize() {
                return questions.size();
        }
}
./img/12-1.png

編集のためにMyViewController クラスを開きます。二つのアクション “showQuestion” と“showAnswer”が表示されます。

./img/13-1.png

@Generated アノテーションと native キーワードを削除します。コードを以下のように変更してください:

private QuizDataSet quiz = new QuizDataSet();
private int quizIdx = 0;

@Selector("showAnswer:")
public void showAnswer(UIButton sender) {
        answerLabel().setText(quiz.getAnswer(quizIdx));
}

@Selector("showQuestion:")
public void showQuestion(UIButton sender) {
        quizIdx = (quizIdx + 1) % quiz.getSize();
        questionLabel().setText(quiz.getQuestion(quizIdx));
        answerLabel().setText("???");
}
./img/14-1.png

ファイルの先頭へ移動し、アノテーションを以下のように変更してください。:

./img/14-2.png

11. アプリケーションを実行する

ios モジュールの実行構成を選択し、 Runをクリックします。

./img/15-1.png