メモ帳の作成(1)

2010. 07. 11
基礎からのiPhone SDK 改訂版』の次のお題はメモ帳です。

章も後半になると、それまでの内容を踏まえた上での説明になるので、細かい説明が省かれている上に、コードの枠外に説明だけで済まされている箇所も有り、コードだけ拾い読みして作っても動かないので注意が必要です。

それだけならいいのですが、今回の場合は出版社のサイトにあるサンプルコード(iPhoneBG2/SampleCode/70.01.Memo)が本書の内容と別物(おそらく作り込む前のプロトタイプか、改定前の内容かもしれません)で、概観も内容も異なっており、本書の補間として全く用を為さない代物なのが困ったところです。

まともに動くものにするのに数日を要しましたが、なんとか説明できるようになりましたので解説します。


●メモ帳の概要

474

機能としては複数行のテキストを保存できるメモ帳ですが、一章の内容としては色々機能が組み込まれています。

・テキスト編集機能

476

画面上部のテキストビューエリアをタップすると、画面下部にキーボードが出てきて内容を編集できます。

上端のツールバーには、右端に内容を確定する『Done』ボタンと、左端にはテキストビューの内容を全消去する『Clear』ボタンがあります。

・フォント選択機能

475

画面下部のツールバーにある左端の『Font』ボタンを押すと、メモ全体のフォントとサイズを選択するピッカービューが現れます。

・インフォメーション機能

478

画面下部のツールバーにある右端のインフォメーションボタンを押すとアラートが表示され、アプリケーションの情報表示と、ウェブサイトに誘導(プリセットされたURLをSafariで開く)するボタンがあります。

・アクションシート機能

477

テキスト編集モード時に、画面上部のツールバーにある左端の『Clear』ボタンを押した際に、実行の可否を問い合わせるアクションシートを表示します。


●プロジェクトの作成

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

479


●インターフェイスのレイアウトの設定

素材として用意するのは背景画像くらいで、例によってBackground.png(320x480ピクセル)にしています。

画像ファイルをプロジェクトのフォルダに入れ、XcodeのResourcesに登録します。

480

背景画像を登録したら、MainWindow.xibをダブルクリックしてInterface Builderを立ち上げます。

Interface Builderで設定する内容は、

1)背景画像(Image View)

2)上部ツールバー(Toolbar)
3)クリアボタン(Bar Button Item)
4)スペーサ(Flexible Space Bar Button Item)
5)決定ボタン(Bar Button Item)

6)下部ツールバー(Toolbar)
7)フォントボタン(Bar Button Item)
8)スペーサ(Flexible Space Bar Button Item)
9)情報ボタン(Round Rect Button)

10)ピッカービュー(Picker View)

11)テキストビュー(Text View)

となります。

489

1)背景画像(Image View)

画面全体にImage Viewを貼り込みます。
今回は上端のステータスバーと下端のツールバーは固定ですので、実際に表示されるエリアは320x416ピクセルになります。

今回は用意した素材が320x480なので、SizeはX:0、Y:0、W:320、H:480に、AttributesタブのImage ViewでImageをBackground.pngにします。

背景画像は素材と同サイズで固定なので、ViewのModeやDrawingなどはデフォルトのままです。

481

2)上部ツールバー(Toolbar)

ステータスバーの下にツールバーを貼付けます。

SizeはX:0、Y:20、W:320、H:44になります。

Attributesなど他のパラメータはデフォルトのままです。

3)クリアボタン(Bar Button Item)

デフォルトで付いてくるBar Button Itemをそのまま使います。

AttributesタブのBar ItemのTitleを『Clear』に変更します。

482

4)スペーサ(Flexible Space Bar Button Item)

クリアボタンの右側に、スペーサとしてFlexible SpaceBar Button Itemを貼ります。

5)決定ボタン(Bar Button Item)

スペーサの右側にBar Button Itemを貼りAttributesタブのBar Button ItemのIdentifierを『Done』にします。

483

プリセットされているDoneを選択することにより、ボタンが青色に、言語環境変更時に名称が自動的に変更されるようになります。

6)下部ツールバー(Toolbar)

画面下端にツールバーを貼付けます。

SizeはX:0、Y:436、W:320、H:44になります。

Attributesなど他のパラメータはデフォルトのままです。

7)フォントボタン(Bar Button Item)

デフォルトで付いてくるBar Button Itemをそのまま使います。

AttributesタブのBar ItemのTitleを『Font』に変更します。

484

8)スペーサ(Flexible Space Bar Button Item)

フォントボタンの右側に、スペーサとしてFlexible SpaceBar Button Itemを貼ります。

9)情報ボタン(Round Rect Button)

本書ではBar Button Itemとなっていますが、それでは情報ボタンにできないのでRound Rect Buttonを使用します。

スペーサの右側にRound Rect Buttonを貼り、AttributesタブのButtonのTypeを『Info Light』にします。

Round Rect Buttonをツールバーに貼った場合、Windowウィンドウでの選択が、

1回目:Toolbar
2回目:Bar Button Item
3回目:Round Rect Button(設定後はLight Info Button)

となっていますので注意してください。

485

10)ピッカービュー(Picker View)

下部ツーツバーの上にピッカービューを貼付けます。

SizeはX:0、Y:220、W:320、H:216になります。

11)テキストビュー(Text View)

上部ツールバーとピッカービューの間にテキストビューを置きますが、貼り込むエリアのサイズを先に求めます。

 XYWH
ステータスバー0032020
上部ツールバー02032044
テキストビューエリア064320156
ピッカービュー0220320216
下部ツールバー043632044

このエリアに上下左右に10ピクセルずつのマージンを取るとして、SizeはX:10、Y:74、W:300、H:136になります。

486

テキストビューの背景を半透明にしたいので、AttributesタブのViewにあるBackgroundをクリックし、ColorsウィンドウでOpacityを 73から成長したので 75にします。

487

念のためDrawingのOpaqueのチェックは外しておきます。

488

なお本書のP.302で『[Text Input Traits]の設定項目については、P.12を参照してください』とありますがP.73の誤りです。

この時点でのDocumentウィンドウでの階層表示は下図のようになります。

490

レイアウトが終わったので一旦保存してXcodeに戻り、アウトレットとアクションを記述します。


●アウトレットとアクションの宣言

メモの管理用に今回も独自クラスを作成します。

Xcodeの『グループとファイル』ペインの『Classes』を右クリックして、コンテキストメニューから『追加』→『新規ファイル』を選択します。

左側ペインで『iPhone OS』の『Cocoa Touch Class』を選択、右上ペインの『Objective-C class』を選択し、右下ペインの『Subclass of』を『NSObject』に設定し、名前を『Memo』としてMemoクラスを追加します。

491

Memo.hヘッダファイルにアウトレットを5つ、ピッカービューでのフォント用として配列を2つ、アクションメソッドを4つ宣言します。
(太字が追加した部分)

#import <Foundation/Foundation.h>

@interface Memo : NSObject {
    // アウトレット
    IBOutlet UITextView *memoView;    // メモ入力用のテキストビュー
    IBOutlet UIPickerView *fontPicker;    // フォント選択用ピッカービュー
    IBOutlet UIImageView *imageView;    // 背景画像用イメージビュー
    IBOutlet UIToolbar *topToolbar;    // 画面上部のツールバー
    IBOutlet UIToolbar *btmToolbar;    // 画面下部のツールバー

    // ピッカービューに表示するデータ
    NSMutableArray *fontNames;    // フォント名一覧
    NSArray *fontSizes;    // フォントサイズ一覧
}
// アクションメソッド
- (IBAction)selectFont;    // フォント選択画面の表示/非表示
- (IBAction)doneMemoEdit;    // メモ編集完了
- (IBAction)clearMemo;    // メモクリア
- (IBAction)showAbout;    // アバウト画面表示

@end

492

保存したらアウトレットとアクションの接続のため、Interface Builderに戻ります。


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

まずMemoクラスのインスタンスを作るため、LibraryウィンドウからObjectをDocumentウィンドウにドラッグ&ドロップします。

Documentウィンドウの追加したObjectを選択した状態で、InspectorウィンドウのIdentityパネルを開き、『Class Identity』の『Class』を『Memo』にします。

493

次にInspectorウィンドウのConnectionsパネルを開き、アウトレットとアクションを接続します。

494

情報ボタンのshowAboutの接続時に『Touch Up Inside』を選択するくらいで、残りは該当するアイテムに接続するだけで迷う点は無いはずです。

接続が完了したら保存します。



参考文献

基礎からのiOS SDK基礎からのiOS SDK
(2010/10/09)
鶴薗 賢吾、松浦 健一郎 他

商品詳細を見る






bose_soundlink_revolve
0 Comments
Leave a comment
管理者にだけ表示を許可する
Top
0 Trackbacks
Top
Calendar
03 | 2017/04 | 05
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

bose_soundlink_revolve
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