2011年04月12日

PickerViewの追加

アプリ「WhatTimeIsIt」でも使用していますが、PickerView
はiOSアプリの入力としては非常に便利ではあるのですが、
設定がややこしいので最初は戸惑います。私は下記のサイト
を参考にさせていただきました。


[iPhone]UIPickerViewのdatasourceとdelegateを実装する


1.まずはViewにPickerViewを貼付けます。

2.ViewControllerにPickerViewのDelegateとDataSourceを
追加します。

@interface KukuViewController : UIViewController {

3.controlを押しながらUIPickerViewDataSourceをクリック
 するとメニューが出ます。そこでJump to Definition
 選択します。(XCODE4ではダブルクリックが効きません
 でした。)

@protocol UIPickerViewDataSource
@required

// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
@end


4.requiredとなっている2つをコピーし、ヘッダにペース
 トします。最初のものがPickerViewを何行にするかで、
 次のものが各行の選択肢がいくつずつあるかです。

5.同様にcontrolを押しながらUIPickerViewDelegateをク
 リックし、Jump to Definitionを選択します。

@protocol UIPickerViewDelegate
@optional

// returns width of column and height of row for each component.
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;

// these methods return either a plain UIString, or a view (e.g UILabel) to display the row for the component.
// for the view versions, we cache any hidden and thus unused views and pass them back for reuse.
// If you return back a different object, the old one will be released. the view will be centered in the row rect
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;


6.こちらはOptionalなので何を選んでもいいのですが、
 PickerViewの選択肢のリストを設定するために
 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;

 をヘッダにコピー&ペーストします。

7.DataSourceとDelegateをFile's Ownerに関連づけます。
 xibを選択し、Interface BuilderでPickerViewを選択し
 ます。Connections inspectorでそれぞれの右にある○
 からFile's Ownerまでドラッグします。

8.ソースの部分を記述します。まずは列の設定。今回は
 1列のみにします。

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 1;
}

9:選択肢の数を設定します。

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if (component == 0) {
//3行あるとする。
return 3;
}
//エラー処理
return 0;
}


10.次に選択肢の中身ですが、私はうまい方法がわからな
 いので- (void)viewDidLoadにベタに設定しています。

- (void)viewDidLoad{
pickerStr[0] = @"First";
pickerStr[1] = @"Second";
pickerStr[2] = @"Third";


こうしておけば後でローカライズするのも簡単です。
 (もっとうまい方法があるかもしれませんが)

11.PickerViewに代入します。

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if (component == 0) {
pickerStr[row];
}
}


これで実装できたはずです。

Pickerの内容を取り出すには、
int rowIndex = [pickerView selectedRowInComponent:0]

でインデックスを取得し、配列から取得します。
posted by sasakyu at 15:02| Comment(0) | TrackBack(0) | PickerView | このブログの読者になる | 更新情報をチェックする

2011年04月09日

おすすめ図書(iPhoneSDKの教科書)

私がApp開発の学習に参考にした図書をご紹介します。

「iPhoneSDKの教科書」です。

Amazon


楽天ブックス
【送料無料】iPhone SDKの教科書

【送料無料】iPhone SDKの教科書
価格:2,940円(税込、送料別)



Object-Cの解説から、実際のアプリの作成を通じて
基本となるApp作成のノウハウが解説されていて私の
App作成時もバイブルとして活用させていただいてい
ます。

「WhatTimeIsIt」のアナログ時計の操作もこの本を
参考にさせていただいています。
ラベル:app iPhone Xcode IOS
posted by sasakyu at 22:24| Comment(0) | TrackBack(0) | iOSアプリ開発 | このブログの読者になる | 更新情報をチェックする

2011年04月08日

WhatTimeIsIt解説

App公開第1号の「WhatTimeIsIt」の解説をします。

アプリはこちらから

WhatTimeIsIt」は子供用の時計学習アプリです。
ターゲットは幼稚園年長〜小学1年生といったとこ
ろでしょうか。(2年間しかないけど・・・)

ちなみにうちの今年2年保育の幼稚園に入園する息
子にさせてみたところいまいち使い勝手がわからな
いようでした。また、小学2年生になったお姉ちゃ
んの方はスムーズに操作していました。

モードは2モードあり、アナログ時計の指している
時刻をディジタル時計で答える「とけいをよむ」と、
ディジタル時計に表示された時刻をアナログ時計で
合わせる「とけいをあわせる」です。
さて、起動すると次のような画面が表示されます。

WhatTimeIsIt-Start.png

現在の時刻を示しています。時刻は起動時の時刻
で時刻が進んでも表示は変わりません。モードは
「とけいをよむ」モードになっています。

「はじめる」ボタンを押すとピッカーが表示され
それを回転させるとディジタル時計もそれに連動
して表示が変わります。

WhatTimeIsIt-Read-Start.png

自分が思うところでピッカーを止めて「こたえあ
わせ」ボタンを押すと正解であれば○、不正解で
あれば×が画面に大きく表示されます。

WhatTimeIsIt-Read-maru.png

WhatTimeIsIt-Read-batsu.png

間違ってもまたピッカーを動かせば×の表示は消
えます。「つぎへ」ボタンをおすとアナログ時計
の指す時刻が変わります。

「とけいをあわせる」モードに切り替えて「はじ
める」ボタンを押すと次の画面のようにディジタ
ル時計がある時刻を表示しアナログ時計は12時
を指しています。

WhatTimeIsIt-Set-Start.png

青い分針をくるくると回してアナログ時計を合わ
せてください。

WhatTimeIsIt-Set-set.png

以上解説してきましたが興味を持たれた方は一度
試してみてください。

アプリはこちらから

感想等コメントいただければ今後の参考にさせて
いただきます。
posted by sasakyu at 14:48| Comment(0) | TrackBack(0) | WhatTimeIsIt | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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