【Objective-C】XcodeでiPhoneアプリを作る基礎を学ぶ3【『初めてのiOSアプリケーション』その1】

Xcode


Xcodeもセグエまでやってみると、なんとなーくXcodeのつかみくらいは理解できたと勝手に思い上がり、Appleが公開している初めてのiOSアプリケーションドキュメントを読みながらやってみた。

が、全然わからない。

頭が割れる。

なので、チンプンカンプンで解らないところは思いっきり削除してるので、ドキュメント自体も一度読んでみることをオススメします。

あと、前回までののXcode記事には目を通しておいてね。



初めてのiOSアプリケーション(PDF)


前回の記事


Xcodeでアプリを作る基礎を学ぶ2【画像の読み込みとセグエ】 | naonotes.com(ナオノーツ)


新規でドキュメントを作成


今回は1から始めて行くので、ドキュメントを新規作成する。

Xcodeを起動するとWelcome to Xcodeという画面が開くので、Create a new Xcode projectをクリック。


skitchbsdask



Single View Applicationを選択し、Nextをクリック。


skitch2h5Xhu



Product Nameはドキュメントと同じ、HelloWorldにし、Include Unit Testsのチェックを外し、Nextをクリック。


skitch3rWilJ



保存先を決めると新しいプロジェクト、HelloWorldが開くので、




ユーザーインターフェース要素を追加


View Controllerにボタンやラベルなどのユーザーインターフェース要素を追加する。


テキストフィールドの追加


右下の箱マークをクリックしてその下のメニューにTextFieldを表示させ、TextFieldをView Controllerにドラッグアンドドロップする。


skitch2XkFpH



View ControllerにTextFieldが追加されたので、大きさを変更する。

TextFieldの右側にある白い□を右側にドラッグアンドドロップして幅を広げる。


skitchPSMRvY



大きさが変更された。

ドラッグしている最中に青い点線が現れるので、それにあわせると綺麗に大きさをそろえることが出来る。


skitchODInMD



Attributes Inspecter(右上にあるViewと書いてあるところの下にある)をクリック。

Alignmentを中央揃えに。

PlaceholderにYour Nameと入力。

CapitalizationをWordに。

Return KeyをDoneにする。


skitchMwzyys



PlaceholderにYour Nameと入力すると、テキストフィールドに薄くYour Nameと表示される。

操作するユーザーに、テキストフィールドに何を入力したらいいか視覚的に理解させる機能。


Capitalizationは、英文入力補助。

初めの文字を大文字にしたり等。

日本語のアプリケーションなら必要ないところだと思うけど、ドキュメントにあわせてWordにした。



ラベルの追加


左下のメニューからLabelをドラッグアンドドロップし、LabelをView Controllerに追加する。


skitchP0J9kY



追加したら右側真ん中の□を右側は時にドラッグアンドドロップして幅を広げる。


skitchP5EXjG



幅が広がった。


skitchRR3JAD



左寄せだと見た目がよくないので中央揃えにする。

Attributes InspecterのAlignmentの中央揃えをクリックすると、Labelの文字が中央に移動する。


label



ボタンの追加


Round Rect ButtonをView Controllerにドラッグアンドドロップしてボタンを追加する。


skitchHk0n8G



ボタンが追加された。


skitchrUtsxZ



ボタンの名前を変更する。

Attributes InspecterのTitleの下にあるボックスのButtonをHelloに変更する。


skitchnbxRzR



シミュレータで確認


iOSシミュレータでどう見えるか確認する。

iPhone 6.0 Simulatorになってるか確認し、Runボタンをクリックする。


skitchFCYSY7



配置したとおりにユーザーインターフェースが表示されればOK。

ただし、ボタンを押しても何もおこらないし、テキストフィールドをタップするとキーボードが現れて文字入力が可能だが、キーボードを消すことも出来ない。

あくまでUI(見た目)のみの完成。


skitchKfEcrR



次回から内部動作を作成


UIが完成したので、今度は名前を入力したときや、ボタンを押したときにどうのような動作をするかを設定していきます。

ここからが難しいんよ(;´Д`)w



【Objective-C】XcodeでiPhoneアプリを作る基礎を学ぶ3【『初めてのiOSアプリケーション』その1】」への4件のフィードバック

  1. bavarotti1981

    コメントすらなんと書いていいのやら・・・。
    ユーザーインターフェイスの意味が再確認できました。
    次回からは動きが出てくるのですね・・・。

    このシリーズは必ず全部読みます。プログラミングなんて何も分かりませんが、ディベロッパーの方を尊敬する心が芽生えてきました(笑)

    返信
    1. 葛葉 キョウジ(管理人) 投稿作成者

      よくアプリなんて作れるなと思ってましたが、
      Xcodeをやってみてその気持ちがもっと強くなりましたw

      返信
  2. makの枕草子

    楽しみにしていますよ〜〜〜。
    と言っても、大変でしょうが;

    白黒Macの時に、”Pascal”覚えて、Mac用アプリを作ろうとして挫折した25年前の記憶が蘇ってきますwww。

    返信
    1. 葛葉 キョウジ(管理人) 投稿作成者

      Xcode楽しいんですよね!
      でも、なかなか理解できなくて(;´Д`)
      しかもアクセス数がひどいもんで(-_-;)
      過去記事に抜かれるレベルですw
      でも楽しいので書きまくりますw

      返信

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)