2014年07月20日

IBでボタンのラベルを複数行表示

xcodeのInterface Builder(IB)で、ボタンのテキストラベルを複数行にする手順です。

Step1> ボタンの配置


Storyboardのビューにボタンを配置し、サイズを大きく広げます。(図1)

mlbutton0.png

図1ボタンを配置

Step2> ボタンのカラー変更


わかりやすくするためにテキストとバックグラウンドのカラーを変更します。(図2)

mlbutton1.png

図2 ボタンのカラー変更

Step3> タイトル・テキストを複数行で入力


複数行のタイトル・テキストを入力します。改行は[option]キー + [return]で入力します。(図3)

mlbutton2.png

図3 テキストの入力(複数行)

Step4> 改行モードの変更


改行モードを"Word Wrap"に変更します。(図4)

mlbutton3.png

図4 改行モードの変更

以上です。IBでボタン・タイトルが3行で表示されているのが確認できますね。




タグ:ios7 IB xcode5
posted by ayagu at 13:21| Comment(0) | iOS | このブログの読者になる | 更新情報をチェックする

2014年05月13日

IBで作ったカスタム・ビューをStoryboardで再利用する

xcode5 Interface builder(以下IB) で、xibファイルとして作成したカスタム・ビューをStoryboardに配置してIB内で再利用する方法を紹介します。Storyboadの変わりに別のxibファイルを使っても同様の結果です。

0. 準備


xcode で新規アプリケーション・プロジェクトを「Simple View Application」テンプレートを選択して作成してください。ここでは[Product Name]をCVSampleとして作成します。

1. カスタム・ビューの作成


最初にカスタム・コントロールを作成します。

Step1> xibファイルの作成


xcode プロジェクトの左ペイン、[Project Navigator] の [CVSample] グループを右クリック、[New File…]を選択します。[iOS] → [User Interface] → [View]を選択して、[Next] ボタンをクリック。[Device Family] を[iPhone]にして[Next]ボタンをクリック。[Save As]を「CustomView」として[Create]ボタンをクリックし、CustomView.xib ファイルを作成します。

Step2> IBでカスタム・ビューをレイアウト


CustomView.xib をIB エディターで開き、右パネル[Attribute Inspector]の[Simulated Metrics]>[Size]を「Freeform」、[Orientation]を「Portrait」、[Status Bar][Top Bar][Bottom Bar]を「None」に設定し、Viewを希望のサイズにドラッグします。(図1)
Object Library からUIコントロールを選択してViewに配置します。(ここでは例として、Segmented Controlとラベル)。

CustomView0.png
図1カスタム・ビューのレイアウト

Step3> CustomViewクラスを作成


[Project Navigator]から「CustomView.xib」を右クリック、メニューの[New File…]を選択し、[iOS]>[Cocoa Touch]から[Objective-C class]を選択し、[Next]ボタンをクリック。[Sub class of]を「UIView」にして、[Class] には.xibと同じ名前「CustomView」を入力、[Next]ボタンをクリックして、クラスファイルのヘッダーと実装ファイルを作成します。

Step4> xibのクラスをCustomViewクラスに設定


CustomView.xibをクリックして、IBのレイアウト・エディターに戻り、[Identity Inspector]の[Custom Class]>[Class]を「CustomView」に設定します。(図2)

CustomView1.png
図2 xibのクラスを設定

2. Storyboardにカスタム・ビューを配置


[Project Navigator]から[CustomView.xib]を選択し、IBを表示します。[Object Library]から「View」を任意の位置にドラッグし、カスタム・ビューがそこに収まるようにリサイズして配置します。配置したUIView を選択して、[Identity Inspector]の[Custom Class]>[Class]にカスタム・ビュークラス名「CustomView」を入力します。(図3)
CustomView2.png
図3 Storyboardに配置

3. 問題点(課題)の確認


この時点で、シミュレーターで実行してみます。メイン・ビューに配置・設定したはずのカスタム・ビューは表示されず、ブランクのままです。
それもそのはず、CustomView クラスはロードされても、xibファイルをロードしていません。

4. xib ファイルのロード (CustomView.mファイル)


3の課題を解決するには、以下の手順でコードを CustomView.mファイルに追加します。

Step1> サポート・メソッド(スタティック)の追加


xibをロードするコードを記述するスタティック・サポート・メソッド、loadInstanceOfViewFromNibを記述します。ここに標準的こxibファイルをロードするコードを書きます。

Step2> awakeAfterUsingCoder:aDecoder メソッドをオーバーライドする


- (id) awakeAfterUsingCoder:(NSCoder*)aDecoderをオーバーライドします。このメソッドはxibファイルがロードされたときに呼び出されます。厄介なことにStoryboardからロードされたときと、上記のloadInstanceOfViewFromNibメソッドで呼ばれたときにも呼び出されます。そのままでは、無限ループになってしまうので、Storyboardにレイアウトした張りぼてのUIView(プレースホールダー)としてロードされたときを検出して、xibロード時のコールが無限ループになるのを防ぎます。
また、プレイスホールダーとしてのUIViewに指定したプロパティを新しくロードしたCustomViewに受け継ぐ処理が入っています。これは必要なだけ記述してください。以上、このサンプルの追加のコードは以下の通りです。

// サポート・メソッド
+ (CustomView*)loadInstanceOfViewFromNib {
return [[[NSBundle mainBundle] loadNibNamed:@"CustomView" owner:nil options:nil] lastObject];
}

// オーバーライド
- (id) awakeAfterUsingCoder:(NSCoder*)aDecoder {
BOOL loadedFromSimpleVuew = ([[self subviews] count] == 0);
if (loadedFromSimpleVuew) { // プレース・ホールダーViewの検出
CustomView* customView = [CustomView loadInstanceOfViewFromNib];

// IBでプレース・ホールダーに設定したプロパティをコピー
customView.frame = self.frame;
customView.autoresizingMask = self.autoresizingMask;
customView.alpha = self.alpha;
customView.userInteractionEnabled = self.userInteractionEnabled;
// ... その他、必要なだけのプロパティをコピーする
return customView;
}
return self;
}


以上です。トラップを少し回避するだけで、再利用可能なカスタム・ビューが使えるようになりました。カスタム・ビューに配置したオブジェクトのハンドリング等は、適時、行ってください。

posted by ayagu at 15:05| Comment(0) | iOS | このブログの読者になる | 更新情報をチェックする

2014年04月15日

iOS7 - スクロールとちょっとだけ Auto Layout (2)

前回「iOS7 - スクロールとちょっとだけ Auto Layout (1)」でスクロールのできる画面ができました。
投稿の最後に告知しましたように、このプロジェクトにはAuto Layout に関する問題が、まだ、解決されていない状態です。

ストーリーボードをよく見ると、ドキュメントアウトラインの上部に赤い丸の白抜き矢印、キャンバスのビューにはオレンジの枠が表示されています。(図1)
これらは、制約の指定が適切でないために、正しいレイアウトの数値が算出できないことを警告しています。
incomplete_constraints.png
図1 不完全なレイアウト

ドキュメントアウトラインの赤い丸をクリックすると詳細が表示され、修正する場合のガイドとなります。(図2)
docoutline_const_error.png
図2 ドキュメントアウトライン

レイアウトの修正


とういうことで不完全なのか検証してみましょう。

前述のドキュメント・アウトラインを見ると、「スクロールのコンテンツの幅と高さが曖昧」と言うメッセージです。(図3)
ambiguous_size.png
図3 ドキュメント・アウトラインのメッセージ

これまでの作業で、ラベルやテキストフィールドが配置されているコンテンツ・ビューには、まだ、制約の設定は行っていません。
そのため、デフォルトの挙動である、Auto Resizing Maskからの制約の自動生成が行われています。

この曖昧さを解消するために、コンテンツエリアの幅と高さを制約で固定します。
図5に示すとおり、コンテンツ・ビューを選択してから、ピンツールをクリックします。WidthとHeightのチェックボックスをチェックして、[Add 2 Constraints]ボタンで追加します。
width_height_constraints.png
図5 Width,Heightの固定

2つの制約を追加したとたんに、オレンジ色の枠はブルーに変わり、ドキュメント・アウトラインのエラー・サインは消えました。(図6)
fixed_ambiguous_constraints.png
図6 制約を追加した結果

シミュレーターを起動して確認し、正常にスクロールすることを確認してください。

Auto Layout は比較的、新しく規定された概念です。デバッガーもありません、しかしスタンダードとして定着していくにつれてしかし今後は、重要な概念として安定して広く使用されるようになると思います。問題が起こっても、エラー/警告メッセージくらいしか出しませんし、デバッガーもありません。Xcode5も期待通りに動作しない時もがあります。これまでのアップルの充実した開発環境になれ親しんでいる我々には多少戸惑うものがありますが、これはスタンダードとして定着してゆくにつれて、徐々に整っていくものと思われます。

今回は、Auto Layout のごくさわりだけを紹介しましたが、機会を改めて、詳しく説明したいと思っています。

次回は、画面がスクロール可能になったのを踏まえて、キーボードに隠れたテキストフィールドを、入力可能な位置に再配置する方法を考えます。
posted by ayagu at 08:07| Comment(1) | iOS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。