UIのパーツを触ってみる
今日のメニュー
- UIの配置
- アクションとその反映
- 他のUIパーツ
プログラミングのHello Worldまでが今日の目標です。
UIの配置
iOSにはUIのパーツが何種類かあり、どこに何を配置しているかという情報は拡張子が.xibのファイルに保存されています。
左のカラムからそのファイルをクリックすると、次のような画面になると思います。
んで、右上のViewと書かれたセグメントの右のボタンをクリックすると、右からにゅいっとビューが出てきます。
そこからLabelをドラッグして貼付けます。
次はその下の項目のRound Rect Buttonも同じようにドラッグします。
⌘+Sで一回保存しておきましょう。
これでUIの配置はひとまず終了です。
アクションとその反映
次は配置したパーツをソースコードに反映させます。
MPAViewController.hを左カラムから選びます。
んで、次のようにコードを書いてください。
※一部は多分自動的に書いてあります。
では簡単に仕組みを説明して行きます。
iOSはObjective-Cという言語で動いています。そしてObjective-CはCやC++をオブジェクト指向に拡張したものという風になっています。
ソースは主に二種類で、
- クラスやメソッドの宣言をする.hファイル
- メソッドの中身を書く.mファイル
です。
.hファイルを一行ずつ解説しましょう。
一行目:
@interface MPAViewController : UIViewController
@interfaceはクラスを宣言するときの最初の言葉です。続いて、MPAViewControllerがクラス名、
そのあとのUIViewControllerは親クラスです。
親クラスとはなんぞやとか、UIViewControllerとは何ぞやとかを説明しだすとキリがないので、
今から自分たちが作って行くものは、基本的にiOS SDKに最初から入っている機能を拡張して行くものだと考えてください。
二行目：
IBOutlet UILabel *myLabel;
ここでは、クラス変数を定義します。UILabelがクラス名、*myLabelが変数名です。
IBOutletは、今のところあまり気にしないでください。
今回はUILabel型の myLabelというラベルにhello worldを表示させます。先ほど作ったラベルと
アクションの接続はその後行います。
五行目：
-(IBAction)myPushButton:(id)sender;
この行はメソッドの定義を行っています。
-(IBAction)はメソッドの戻り値の型
myPushButton:はメソッド名
(id)sender; は引数です。
id型はC言語におけるvoid型のような物で、どのようなオブジェクトにも型を姿を変えます。
使うときは適宜キャストする必要があります。
今回、このメソッドはボタンを押されたときに呼び出されるように次で接続を行います。
UIパーツとメソッド、変数の接続
さきほど作ったxibファイルと.hファイルを接続しましょう。
再び左カラムより.xibファイルを選択します。
左から二つ目のカラムにPlaceholdersという欄があると思います。その欄のFile's Ownerを左クリックすると
下のような画面が出てきます。
myLabelの右側の丸い部分をにゅいっとドラッグして、Labelまで持ってきて離す。すると配置したLabelと.hファイルで定義したmyLabelが接続されます。
次にmyPushButtonも同様に、今度は配置したボタンまでドラッグします。離すといくつかの選択肢が出てくると思うので、
ButtonTouchDownを選択します。
これで接続は終了です。多分下の画像みたいになってると思います。
保存するのをお忘れなきよう。
メソッドの実装
それではボタンをクリックしてhello worldと表示するソースを実装しましょう。
MPAViewController.mを開きます。
そして次のソースコードを追加します。
これは、自分で定義したmyLabelというインスタンスに、 Hello Worldという文字列をセットしなさい
というメソッドを呼び出しています。
Objective-Cのメソッド呼び出しは
[インスタンス名 メソッド名:引数, ….];
で行います。見た目が気持ち悪いですが。
それでは、実行してみましょう。
ボタンを押して、以下のようになれば成功です。
Hello Worldがちゃんと表示されてないですが、
.xibファイルから、ラベルの大きさをいじるときちんと表示できます。
他のUIパーツ
今から書く
0 件のコメント:
コメントを投稿