[iOS] カスタムUIViewControllerで画面の中を制御する (2)

前回の続き、カスタムUIViewControllerで画面の中を制御する (1)

【開発環境】 Xcode4, iOS4.3

スイッチを操作すると、コンソールにログを出力するところまで作成しました。
今回は、スイッチを操作した際に、ラベルの文字列を変えてみましょう。


■ラベルをプログラムから操作できるように、変数に関連づけます。
１．[〜ViewController.h]を開きます。赤枠のようにプログラムを追加します。
インスタンス変数「_label」、プロパティの宣言「label」を追加します。
※プロパティにIBOutletという識別子は、プログラム的に特別な意味はなく、Interface Builderからプロパティを利用する際に指定します。

２．[〜ViewController.m]を開きます。@implementation 〜ViewControllerの次ぐらいに、赤枠のようにプログラムを追加します。
プロパティをインスタンス変数と関連づけて実装します。
プロパティ「label」を通じて、インスタンス変数「_label」を操作することができ、クラス内部をカプセル化（隠蔽化）することができます。

３．[〜ViewController.xib]を開きます。作成したプロパティとラベル(UILabel)を関連づけます。
①[File's Owner]を選択します。
②[Connections Inspecter]をクリックします。[〜ViewControllerクラスで利用できるアウトレット(プロパティ)とアクション(メソッド）一覧が表示されます。
③[label]アウトレットをラベルまでドラッグします。

関連づけれると、このように変わりますが。

これでプログラムからラベルを操作できるようになります。

■スイッチを操作した時に、ラベルの文字列を変えてみる
１．前回作成したメソッドの中に次ぎのようにプログラムを追加します。

・メソッドの引数[sender]は、イベント発生元のスイッチであるので、変数型をキャストして、UISwitch(スイッチ)の型に変換します。
・スイッチの状態を知るには、UISwitchのプロパティ[on]を利用します。
・ラベルの文字列を変えるには、UILableのプロパティ[text]を利用します。


実行して、スイッチを操作してみると、ありゃ・・・ラベルの文字が小さすぎて見えない。

[〜ViewController.xib]を開き、ラベルを選択して、四隅の●をドラッグしてサイズを広げます。

これでバッチリラベルが表示されました。

次回、タブバーコントローラにカスタムアイコンをつける

[Mac] Macの便利なスクリーンショットのショートカットキー

Macには便利なスクリーンショットを簡単に撮れるショートカットキーがあります。

3種類紹介します。どれもデスクトップに画像(PNG形式)で保存されます。

●画面全体を撮るときは、
[Command + Shift + 3]

●指定領域だけ撮りたいとき
[Command + Shift + 4] でマウスカーソルが変わるので、ドラッグで撮りたいところを選択します。

●ウィンドウだけ撮りたいとき

　[Command + Shift + 4]で、さらに[Space]を押します。

　マウスカーソルを移動させて、撮りたいウィンドウに乗せます。

　青色が被さったところが撮られます。

ブログにスクリーンショットをアップロードしたいときに活用しています。

[iOS] カスタムUIViewControllerで画面の中を制御する (1)

前回、カスタムUIViewControllerをつくる

[開発環境] Xcode4, iOS4.3

前回、作成したカスタムUIViewControllerの画面にスイッチとラベルを追加しました。
今度は、スイッチをON/OFFにすると、ラベルの内容が変わるようにしてみます。

さてプログラムを書いていきましょう。

■スイッチの状態(ON/OFF)が変わったときに呼ばれるメソッドを作ります。

１．[カスタムUIViewControllerの〜.h]を開き、メソッドを宣言します。「-(IBAction) <メソッドの名前>:(id)sender;」を追加します。メソッドの名前は自由につけれますが、引数と戻り値は合わせてください。senderには、イベントが発生したオブジェクトが入ります。今回は、UISwitchのオブジェクトです。

２．[カスタムUIViewControllerの〜.m]を開き、

「-(IBAction) <メソッドの名前>:(id)sender;」の定義を追加します。

末行あたりの@endの前くらいです。

■作成したメソッドをスイッチの状態が変わったときに呼ばれるようにする。

1．[カスタムUIViewControllerの〜.xib]を開き、

①で[File's Owner]を選択して、

②でコネクションインスペクターをクリックします。

③で作成したメソッドところで○をスイッチまでドラッグします。

2．ドラッグを離すと、スイッチのイベントが一覧が表示されます。[Value Changed]を選択します。

■ちゃんと呼ばれているかコンソールで確認してみる

１．作成したメソッドの中に、コンソールにログを出力する関数を追加します。

NSLog(@"〜出力するメッセージ");

２．アプリを実行する

３．コンソールを表示するには、Xcodeの下側にある[▲]ボタンをクリックします。

４．赤枠がコンソールです。

5．スイッチを押してみると、ログが表示されます。

次回、作成したメソッドの中で、ラベルの内容を変えるプログラムを追加してみます。

＜補足＞

「#pragma mark - 〜〜〜〜」って何だろう？

これを使うと、Xcodeでのメソッド一覧表示に見出しをつけてくれる

次回、カスタムUIViewControllerで画面の中を制御する (2)

[iOS] カスタムUIViewControllerをつくる

前回、UIViewとUIViewControllerの違い

[開発環境] Xcode4, iOS 4.3

カスタムUIViewControllerで新しい画面を作って、最初に作ったタブバーコントローラに追加します。

１．プロジェクト名のフォルダとこで、右クリックします。メニューが表示されるので、[New File...]をクリックします。

２．左エリアで[iOS]-[Cocoa Touch]を選択して、[UIViewController subclass]を選択します。[Next]ボタンを押します。

3．ここはそのままで、[Next]ボタンを押します。

4．カスタムUIViewControllerの名前をつける。".m"というのが、iOS開発で使うObjective-Cというプログラミング言語のソースファイルの拡張子になります。○○○ViewController.mとつけておけば、後から見たときに一目でUIViewControllerということが分かります。名前はなんでもいいです。[Save]ボタンを押します。

４．すると、3つファイルが追加されます。それぞれのファイルは、

・〜.h、〜.m：プログラムを書くファイル

・〜.xib：画面設計のファイル

5．"〜.m"ファイルを選択すると、なにやらたくさん書かれています。よく使う機能がひな形として用意されています。

6．"〜.xib"ファイルを選択すると、真っ白画面です。

 ７．試しにスイッチとラベルを追加します。

８．[プロジェクトナビゲーション]から[MainWindow.xib]を選択します。前に作成したタブバーコントローラに追加します。作成したカスタムUIViewControllerは、UIViewController (View Controller)のサブクラスなので、仮にView Controllerをタブバーコントローラに追加しておきます。

９．[アイデンティティインスペクター]を開き、UIViewController (View Controller)に対応するUIViewControllerのクラスを変更します。さっき作成した"〜ViewController"を選択することで、このタブを選択したときにカスタムUIViewControllerの画面が表示されます。ここでは、Viewとしか表示されていませんが、実行するとちゃんと表示されます。

１０．[→ Run]ボタンを押して、シミュレータを起動してみる。ちゃんとカスタムUIViewControllerの画面に置いた、スイッチとラベルが表示されています。

次回、カスタムUIViewControllerで画面の中を制御する (1)

[Mac] Chromeでタブのプレビュー

Chromeで開いているタブをすべてプレビューできるんですね。

（バージョン10.0で試しています）

１．URLに"about:flags"と入力すると、隠し設定画面が表示されます。

　一番上の[タブの外観]のとこで[有効にする]をクリックします。

２．画面一番下までスクロールして、[再起動]ボタンをクリックします。

再起動後、三本指で↓にスワイプすると、タブのプレビューが表示されます。

なかなか便利だぬ〜

[Mac] 時間差でスクリーンショットを撮る

Mac標準のグラブを使うと時間差でスクリーンショットが撮れます。

1．Spotlightからグラブを起動します。

２．グラブのメニューから[取り込み]-[タイマー]を選択します。

３．[タイマーを開始]ボタンを押して、時間差でスクリーンショットを開始します。

４．スクリーンショットが撮れると、そのプレビューが表示されます。

５．メニューから[ファイル]-[別名で保存...]で、スクリーンショット画像を保存できます。

おしまい。

[iOS] UIViewとUIViewControllerの違い

前回、タブバーコントローラにタブを追加する

[開発環境] XCode4、iOS4.3

画面の中にペタペタ、スイッチやスライダーを張ってみた。

これら全部、UIViewという基本的な画面部品からできています。UIViewという基本クラスを継承(機能を引き継いで)してラベル、スイッチ、スライダーが作られています。UIViewだと真っ白い画面だけですが、その中に、UIViewの仲間を追加して画面を作ります。

もう一つ、UIViewControllerというものがあります。
UIViewControllerは、画面を管理するものです。UIViewの画面を他の画面に切り替えたり、UIViewの画面の中を制御したりして、画面を管理します。

その一例がタブバーコントローラで、これもUIViewControllerという基本クラスからできています。タブで複数の画面を切り替えられます。

次回、カスタムUIViewControllerをつくる

[iOS] タブバーコントローラにタブを追加する

前回の続き、タブバーコントローラをつけてみる


[開発環境] XCode4、iOS4.3

タブバーコントローラにタブの追加／削除をしてみる。

１．追加するには、[オブジェクトライブラリ]から[View Controller]を挿入したいタブの間までドラッグします。

２．タブが増えます。削除したい場合は、タブを選択して[Delete]キーで消せます。間違って消したときは、[Command+Z]で戻せます。

3．実行してみると、ちゃんとタブが増えています。ただ、中身のビューは追加していないので真っ白です。

次回は、UIViewとUIViewControllerの違い

[iOS] タブバーコントローラをつけてみる

前回の続き、XCode4でプロジェクトを作成する

[開発環境] XCode4、iOS4.3

タブバーコントローラで複数画面を簡単に切り替えれるようにしてみる。

画面下にある[Item 1]と[Item 2]と二つの画面を切り替えれるようにする。

１．iPhoneの画面をデザインするには、親画面にあたる[MainWindow.xib]をプロジェクトナビゲーションから選択します。すると、画面中央に白紙のiPhoneの画面が表示されます。画面にコントローラを追加するためのパネルを表示させるには、Xcodeのツールバーの[Viewの右側のアイコン]をクリックします。

２．表示されたパネルの[箱のアイコン]をクリックすると、コントローラ一覧（オブジェクトライブラリ）が表示されます。これらのコントローラをiPhone画面にドラッグすることで追加できます。

３．[オブジェクトライブラリ]から[Tab Bar Controller]を空いたスペースにドラッグします。もう一つiPhoneの画面が表示されます。

４．タブバーコントローラのそれぞれの画面にラベルを追加してみます。今、タブが２つ表示されているので、２つの画面にラベルを追加してみます。タブコントローラの[Item 1]タブをクリックします。タブがちゃんと選択できていると、タブ全体の色が青っぽくなります。

５．[オブジェクトライブラリ]から[View]を追加します。これで、タブバーコントローラ内に、ラベルなどを追加できるようになります。

6．同じようにして、[オブジェクトライブラリ]から[Label]を追加します。ラベルの内容を変えるには、ダブルクリックすることで編集できます。

７．同じようにして、もう１つのタブの画面もラベルを追加します。
（[View]を追加して、[Label]を追加します）

８．最後にウィンドウとタブバーコントローラを関連づけます。画面左側の[Window]を選択します。

９．画面右上の[→]アイコンをクリックして、[コネクションインスペクター]を表示させます。次に、[Outlets]の中の[rootViewController]の●を、画面左側の[Tab Bar Controller]までドラッグします。

９．[→ Run]をクリックして起動させてみる。ちゃんとタブで画面の切り替えができています。

次回、タブバーコントローラにタブを追加する