Control Fun(1)~Image ViewとText Field

2010. 08. 12
はじめてのiPhoneプログラミング』の次のお題は、様々なユーザインターフェイスの実装です。

具体的には、

・イメージビューやラベルの貼付け
・テキストフィールドとスライダ、セグメンテッドコントロール、スイッチの設置
・アクションシートとアラートの実装

となります。

639

本章を読んで気になったのが、所々理解し難い訳が散見される点です。

私自身クラスリファレンスを訳していて訳者の気持ちはよく分かるのですが、できるだけ正確に訳そうとすると日本語としてまとまらないことがよくあります。

内容を完全に把握していることであれば、元の単語を置き換えて日本語として分かり易い文章に仕立てられるのですが、よく分からない場合は直訳になってしまいがちです。

それと、本文の解説と図の内容が一致していない(日本語に変えた文字列が、途中英語に戻っていたりする)など、混乱の跡も見られます。

また本書の前提条件として、オブジェクト指向プログラミングおよびObjective-Cはある程度知っているとなっているせいか、細かい説明が端折られている部分もありますので、フォローできる部分はしていきたいと思います。


●サンプルコードとの差異

新版の原書のページにある、Apress社のサイト内にサンプルコードの『Beginning iPhone Development Projects Oct 12 2009/04 Control Fun』と、私の手元にある旧版の内容が色々と異なっています。

ここでは旧版の本書内の内容について解説した後、新版のサンプルコードとの差異を考察していきたいと思います。


●プロジェクトの作成

View-based Applicationテンプレートで、プロジェクト名を『Control Fun』とします。

640


●画像の準備と貼り付け

最初に画面上部にImage Viewで画像を貼り付けます。

他コントロールのレイアウトの都合上、300x100ピクセル以下の画像を用意し、Control Funプロジェクトのフォルダに入れ、XcodeのResourcesに画像ファイルを追加します。

641

Control_FunViewController.xibをダブルクリックしてInterface Builderを立ち上げます。

LibraryウィンドウからImage Viewをドラッグ&ドロップすると全画面(ステータスバー分を引いた320x460ピクセル)になりますが、気にせずに先に進みます。

InspectorウィンドウのAttributesタブ、『Image View』の『Image』を先程追加した画像ファイルに設定します。

642

『Layout』メニューの『Size to Fit』を選択すると、画像ファイルのサイズに合わせてImage Viewが修正されます。

643

『Layout』メニューの『Alignment』→『Align Horizontal Center in Container』で、水平方向の中央揃えができますが、垂直方向の位置合わせもする必要がありますので、InspectorウィンドウのSizeタブでX:10、Y:20とします。

644

後はInspectorウィンドウのAttributesタブで、『View』の属性を設定していきます。

645

・Mode

646

ビューに対して画像をどう貼り付けるかを指定します。

詳細は『基礎からのiPhone SDK 改訂版』のP.45~46に日本語で丁寧に説明がされていますので、手元にあれば参照してください。

Scale To Fill、Aspect Fit、Aspect Fillは、ビューと画像のサイズが異なる場合にどう拡大縮小するかを設定するものなので、両サイズが同じ場合は余計な計算を入れられないように選択を回避した方が良いようです。
(サイズの異なる画像を入れ替える場合には設定する必要があります)

Redrawは再描画時の設定ですので、固定画像には関係ありません。

Center ~ Bottom Rightは、ビューに対して画像をどの位置に貼るかを示すもので、こちらも両サイズが同じ場合には意味を為しませんが、一応Centerにしておきます。
(余計な計算が入る可能性を考慮すると、Top Leftが最適なのかもしれませんけど)

・Alpha

ビューの透明度を示し、0.0が透明で1.0が不透明になります。

演出や効果として意図的に半透明にする必要がない限り、(余計な計算をさせないために)1.0のままにしておきます。

・Drawing

Opaqueはビューの背景を不透明にするパラメータで、画像とビューサイズが一致しない場合や、画像にアルファ値の設定がある場合に違いがあると本書で説明しているのですが、私が試した範囲ではOpaqueのチェックのON/OFFで表示の差異は確認できませんでした。

例えば、貼り付ける画像ファイルの白の部分を透明化し、ビューのサイズを300x150ピクセルに拡大、Alphaを0.50として、既存のビューの下に背景が青色のビューを追加します。

Interface Builderのビューウィンドウの表示では、OpaqueがOFFの場合、

649

このように拡大したビューの余白分も含め、既存ビューが半透明になり、OpaqueをONにすると、

648

本書の説明にある通り、Alpha値に関わらず追加した下のビューは透けないのですが、iPhone Simulatorで試してみると、

647

OpaqueのON/OFFに関わらず、上図のように半透明化された表示になります。
(iPhone Simulatorのリセットや、ビルドメニューの『すべてのターゲットをクリーニング』を試しても変わりませんでした。実機でも同様です)

この現象の理由は分かりませんが、理論上透明化する必要が無い場合はOpaqueに設定しておくことにします。

Hiddenはビューを非表示にするオプションで、初期状態は隠しておきたい場合などに使うものと思われます。

Clear Context Before Drawingは、実際の描画前に以前の内容をクリアするオプションですが、使い道がぱっと思いつきません。

Clip Subviewsは、親ビューに対してサブビューがはみ出る際に、親ビューの領域を無視してサブビューを描画するか、親ビューからはみ出た領域をカットオフするかを決めるものです。

サブビューを持たない、あるいは親ビューからサブビューがはみ出ることが無い場合は、チェックをせずに(クリッピングに必要な)無駄な演算を省きましょう。

Autoresize Subviewsは最近追加されたオプションなのか、これまでの本には説明されていません。

Clip Subviewsと異なり、親ビューからはみ出る際には収まるように縮小するものですので、普段はチェックを外して構わないと思います。

・Interaction

User Interaction Enabledはユーザ操作を受け付けるかどうかで、今回の場合はただ表示するだけですからチェックは外しています。

Multiple Touchはマルチタッチに対応するかどうかですので、チェックは外したままにします。


●テキストフィールドとラベルの設置

続いてテキストフィールドとラベルを設置します。

名前と数値を入力する2つのテキストフィールドを想定したもので、ラベルは表示のみで変化はしません。

LibraryウィンドウからText FieldとLabelを2つずつドラッグ&ドロップで置いていきますが、本書内ではガイドラインを使った設置方法が解説されています。

サンプルコードでのサイズと位置は下表のようになります。

 XYWH
Label (Name)351325121
Text Field (Name)9412920631
Label (Number)201716621
Text Field (Number)9416820631

レイアウトが済みましたらラベルの属性を設定します。

InspectorウィンドウのAttributesタブで、『Label』の『Text』を『Name:』と『Number:』に設定するだけで、他はデフォルトで構いません。

気になる方は、『View』の『Drawing』でデフォルトでチェックされているClear Context Before Drawing、Clip Subviews、Autoresize Subviewsのチェックを外してください。

Opaqueはデフォルトでチェックが外れていて、チェックを入れるとラベルの領域が黒く塗り潰されますので、そのままにしておきます。

650

次にテキストフィールドの属性を設定します。

本書内でも各項目の説明がありますし、『基礎からのiPhone SDK 改訂版』のP.72~73に一覧表で説明がされていますので、手元にあれば参照してください。

変更する項目は、未入力時に表示されるテキスト(Placeholder)と、入力時に利用するキーボードの設定だけです。

気になる方は、『View』の『Drawing』でデフォルトでチェックされているClear Context Before Drawing、Clip Subviews、Autoresize Subviewsのチェックを外してください。

Opaqueはデフォルトでチェックが外れていて、チェックを入れると入力したテキストが表示できなくなるので、そのままにしておきます。

未入力時に表示されるテキストはInspectorウィンドウのAttributesタブで、『Text Field』の『Placeholder』をそれぞれ『Type in a name』と『Type in a Number』とします。

キーボードの設定は『Text Input Traits』で行います。

名前のテキストフィールドは、先頭文字を大文字にするために『Capitalize』を『Words』に、通常の文字入力なので『Keyboard』を『ASCII Capable』に、『Return Key』は『Done』とします。

651

数字のテキストフィールドは『Keyboard』を『Number Pad』にするだけです。

652


●隠しボタンの設置

Number Padの様にキーボードにReturn Keyを持たないキーボードの場合、使い終わった後にキーボードを片付ける(ファーストレスポンダを放棄する)為のアクション(ボタン)が必要になります。

明示的なボタンを設置する方法もありますが、ここではテキストフィールド以外の画面全体の領域(正確にはキーボードの表示領域は応答できませんが)をタップすると応答するような隠しボタンを設置します。
(※サンプルコードではViewのクラスをUIControlにする別の手法が取られています)

LibraryウィンドウからRound Rect ButtonをViewウィンドウにドラッグ&ドロップし、画面全体を覆うように(X:0、Y:0、W:320、H:460)に拡大します。

Layoutメニューから『Send To Back』を選択し、最後面に移動します。

InspectorウィンドウのAttributesタブで、『Button』の『Type』をCustomにし、ボタンを透明化します。
(非表示(Hidden)にするのとは異なり、操作を受け付けることができます)

気になる方は、『View』の『Drawing』でデフォルトでチェックされているClear Context Before DrawingとAutoresize Subviewsのチェックを外してください。


●アウトレットとプロパティ、アクションの宣言

パーツのレイアウトが済んだので、Interface BuilderからXcodeに戻りコードの記述を行います。

まずControl_FunViewController.hを開いて、アウトレットとプロパティ、アクションを宣言します。
(太字が追加した部分)

#import <UIKit/UIKit.h>

@interface Control_FunViewController : UIViewController {
    IBOutlet UITextField *nameField;
    IBOutlet UITextField *numberField;
}
@property (nonatomic, retain) UITextField *nameField;
@property (nonatomic, retain) UITextField *numberField;

- (IBAction)textFieldDoneEditing:(id)sender;
- (IBAction)backgroundClick:(id)sender;

@end

653

設置したパーツの内、イメージビューとラベルは固定表示なので、アウトレットとしては2つのテキストフィールドとなり、それぞれnameField、numberFieldとします。

そして入力された値を得る為の同名プロパティも宣言します。

アクションは、テキストフィールドへの入力が完了した場合の処理としてtextFieldDoneEditing:、隠しボタンがタップされた場合の処理としてbackgroundClick:メソッドを宣言します。


●プロパティとアクションの実装

Control_FunViewController.mを開き、宣言したプロパティとアクションを実装します。
(太字が追加した部分)

#import "Control_FunViewController.h"

@implementation Control_FunViewController

@synthesize nameField;
@synthesize numberField;

- (IBAction)textFieldDoneEditing:(id)sender {
    [sender resignFirstResponder];
}

- (IBAction)backgroundClick:(id)sender {
    [nameField resignFirstResponder];
    [numberField resignFirstResponder];
}

/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
    }
    return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/

/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/

/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)dealloc {
    [super dealloc];
}

@end

654

テキストフィールドへの入力が完了した場合の処理であるtextFieldDoneEditing:と、隠しボタンがタップされた場合の処理であるbackgroundClick:は、ともにresignFirstResponderでファーストレスポンダの放棄を行ってキーボードを片付けています。
(resignFirstResponderについては『メモ帳の作成(2)~テキストビュー』を参照してください)

backgroundClick:はReturn Keyの無いNumber Pad用ですが、ASCII Capableでも同じ操作で応答できるようにしています。 


●アウトレットとアクションの接続

Interface Builderに戻り、DocumentウィンドウでFile's Ownerを選択し、InspectorウィンドウのConnectionsタブを開きます。

アウトレットとアクションを以下のように接続します。

・Outlets

nameField → Nameテキストフィールド
numberField → Numberテキストフィールド

・Received Actions

backgroundClick: → 隠しボタン(Touch Up Inside)
textFieldDoneEditing: → 両テキストフィールド(Did End On Exit)

655

接続が完了しましたら、保存してビルドと実行を行い動作を確認してください。

656



参考文献

はじめてのiPhone3プログラミングはじめてのiPhone3プログラミング
(2009/12/17)
Dave Mark、Jeff LaMarche 他

商品詳細を見る






QuietControl 30 wireless headphones
0 Comments
Leave a comment
管理者にだけ表示を許可する
Top
0 Trackbacks
Top
Calendar
10 | 2017/11 | 12
Sun Mon Tue Wed Thu Fri Sat
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

Author:水月杏香
永遠の初心者プログラマ。

Wish List
WACOM


ARC
Technical Q&A
情報プロパティリストキー
Start Developing iOS Apps Today
BOSE

QuietControl 30 wireless headphones
Reference
NSApplicationDelegateプロトコル
NSArrayクラス
NSAutoreleasePoolクラス
NSBundleクラス
NSBundle UIKit追加分
NSCalendarクラス
NSCoderクラス
NSCodingプロトコル
NSCopyingプロトコル
NSDataクラス
NSDateクラス
NSDateFormatterクラス
NSDictionaryクラス
NSEntityDescriptionクラス
NSEnumeratorクラス
NSErrorクラス
NSExceptionクラス
NSFetchRequestクラス
NSFileHandleクラス
NSFileManagerクラス
NSIndexPathクラス
NSIndexPath UIKit追加分
NSKeyedArchiverクラス
NSKeyedUnarchiverクラス
NSKeyValueCodingプロトコル
NSLocaleクラス
NSManagedObjectクラス
NSManagedObjectContextクラス
NSManagedObjectModelクラス
NSMutableArrayクラス
NSMutableCopyingプロトコル
NSMutableDictionaryクラス
NSMutableSetクラス
NSNotificationクラス
NSNotificationCenterクラス
NSNullクラス
NSNumberクラス
NSObjectクラス
NSObject UIKit追加分
NSObjectプロトコル
NSPersistentStoreクラス
NSPersistentStoreCoordinatorクラス
NSPredicateクラス
NSPropertyListSerializationクラス
NSRunLoopクラス
NSSetクラス
NSStringクラス
NSString UIKit追加分
NSTimerクラス
NSTimeZoneクラス
NSURLクラス
NSURLProtectionSpaceクラス
NSURLRequestクラス
NSUserDefaultsクラス
NSValueクラス

UIActionSheetクラス
UIActionSheetDelegateプロトコル
UIActivityIndicatorViewクラス
UIAlertViewクラス
UIAlertViewDelegateプロトコル
UIApplicationクラス
UIApplicationDelegateプロトコル
UIBarButtonItemクラス
UIBarItemクラス
UIButtonクラス
UIColorクラス
UIControlクラス
UIDatePickerクラス
UIDeviceクラス
UIEventクラス
UIFontクラス
UIGestureRecognizerクラス
UIImageクラス
UIImageViewクラス
UIKit Function
UILabelクラス
UINavigationControllerクラス
UINavigationItemクラス
UIPickerViewクラス
UIPickerViewDataSourceプロトコル
UIPickerViewDelegateプロトコル
UIPinchGestureRecognizerクラス
UIResponderクラス
UIScreenクラス
UIScrollViewクラス
UISearchBarクラス
UISearchBarDelegateプロトコル
UISegmentedControlクラス
UISliderクラス
UISwipeGestureRecognizerクラス
UISwitchクラス
UITableViewクラス
UITableViewCellクラス
UITableViewControllerクラス
UITableViewDataSourceプロトコル
UITableViewDelegateプロトコル
UITapGestureRecognizerクラス
UITextFieldクラス
UITextFieldDelegateプロトコル
UITextInputTraitsプロトコル
UITextViewクラス
UITextViewDelegateプロトコル
UIToolbarクラス
UITouchクラス
UIViewクラス
UIViewControllerクラス
UIWebViewクラス
UIWebViewDelegateプロトコル
UIWindowクラス

AVAudioPlayerクラス
AVAudioPlayerDelegateプロトコル

CADisplayLinkクラス
CAEAGLLayerクラス
CALayerクラス

CGAffineTransform
CGBitmapContext
CGColor
CGColorSpace
CGContext
CGGeometry
CGImage
CGPath

EAGLContextクラス
EAGLDrawableプロトコル

Foundation Constants
Foundation Data Types
Foundation Functions

MPMediaItemクラス
MPMediaItemArtworkクラス
MPMediaPlaylistクラス
MPMediaPropertyPredicateクラス
MPMediaQueryクラス
MPMusicPlayerControllerクラス

Randomization Services

System Sound Services
Amazon


OpenGL ES
SQLite
Monthly Archives
Recent Comments
Recent TrackBacks
RSS Link
Visitors
QR Code
QR