ピッカービュー(UIPickerView)の使い方

今回は、iPhone特有のユーザーインターフェースであるピッカービューの使い方について説明する。

pickerview.png
ピッカービューの例

(1)ビューにピッカービューを追加
Interface Builderでビューにピッカービューを追加する。

(2)UIPickerViewクラスのインスタンスを作成
ビューコントローラクラスにUIPikerViewクラスのインスタンスを作成し、(1)で追加したピッカービューにアウトレットを接続する。
※以降の説明では、このインスタンスを self.picker とする

(3)UIPickerViewDelegateプロトコルを宣言
ビューコントローラのヘッダファイルにUIPickerViewDelegateプロトコルの宣言を追加する。


@interface ViewController : UIViewController <UIPickerViewDelegate>


(4)デリゲートを設定するコードを追加

ビューコントローラのviewDidLoadなどに、ピッカービューのデリゲートを設定する。

// delegateの設定
self.picker.delegate = self;


(5)デリゲートを解除するコードを追加
ビューコントローラのviewDidUnloadなどに、デリゲートを解除するコードを追加する。

// delegateを解除
self.picker.delegate = nil;


(6)コンポーネントの数を設定するコードを追加
ビューコントローラにコンポートの数を返すメソッドを追加する。コンポーネントとは、上記の例で3つの列に別れているように、ピッカーの列を表す。この例では、3つの列が存在するので、3を返す。


// ピッカービューのコンポーネントの数を返す
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView { 
    return 3; 



(7)行の数を設定するコードを追加
ピッカービューの行数を返すメソッドを追加する。コンポーネント毎に異なる数にしたい場合、以下のように引数のcomponentで切り替えれば良い。


// ピッカービューの行の数を返す
- (NSInteger) pickerView: (UIPickerView*)pView numberOfRowsInComponent:(NSInteger) component { 

    switch (component) {
        case 0: return 100;
        case 1: return 400;
        case 2: return 400;
    }
    return 0; 
}


(8)タイトル(各行の文字)を設定する
ピッカービューに表示する文字を返すメソッドを追加する。コンポーネント毎にタイトルを変更したい場合は、引数componentで分岐すれば良い。


// ピッカービューの行のタイトルを返す
- (NSString*)pickerView: (UIPickerView*) pView titleForRow:(NSInteger) row forComponent:(NSInteger)component { 

    switch (component) {
        case 0: return [NSString stringWithFormat:@" %d cm", 100 + row];
        case 1: return [NSString stringWithFormat:@" %d m", row * 10];
        case 2: return [NSString stringWithFormat:@" %d m", row * 10];
    }
    return @""; 
}


(9)行選択時の処理を追加する(任意)
行選択時(ピッカーの選択値が変更された時)の処理を追加する。引数のrowに新しく選択された行のインデックス、componentにコンポーネントのインデックスが設定される。選択された値に応じて処理したいコードをここに記述する。


// ピッカービューの行選択時の処理
- (void) pickerView: (UIPickerView*)pView didSelectRow:(NSInteger) row  inComponent:(NSInteger)component { 

 }


(10)選択値の変更(任意)
選択値をコードから変更したい場合は以下のメソッドをコールする。
第1引数に選択行のインデックス、第2引数にコンポーネントのインデックスを設定する。複数のコンポーネントに対して値を変更する場合は、複数回コールすれば良い。


[self.picker selectRow:0 inComponent:0 animated:YES];


以上で完成。他にも、表示幅を変更したり様々なことができるが、ここでは最低限のコードのみを記述した。UITableViewControllerもそうだが、この手のコードでUIを作成するのはどうも苦手。やりたいことに対してやたら手順が多い上メソッド名が長いので、この年になるとまず覚えられない(笑)

手っ取り早くiOS5へ移行したい方にはこの本がオススメ!
変更箇所だけ抜粋されていて説明も分かりやすいので流し読みできます。(↓)
【送料無料】詳解iOS5プログラミング

【送料無料】詳解iOS5プログラミング
価格:2,940円(税込、送料別)




このエントリーをはてなブックマークに追加

テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

iPhoneアプリ紹介
パズルナビ for パズドラ 2016
最強のコンボツール!
colorization-large-icon.png

スクリーンショットを読み込むとコンボを自動計算してくれるパズドラの攻略アプリです。


AirRuler
(簡易距離計)

リモートで簡単に距離を測定できるアプリ!
colorization-large-icon.png

目標地点に向けてiPhoneを傾けるだけで簡単に距離を測定できます。ゴルフの距離測定機能付きパターの代わりにも使えます。


補色残像アート
~見えない色が見えてくる~
白黒なのにカラーに見えてしまう不思議な映像を体験しよう!
colorization-large-icon.png

補色残像という目の錯覚を利用して、白黒写真がカラーに見える不思議な映像を作成できます。作成した映像は、アニメGIFに変換したり、Twitterに投稿することもできます。


タイピング革命
フリック練習はタイピング革命で!ネットランキングで盛り上がろう!
icon-l-typing.jpg

オンラインランキング上のプレイを閲覧できるリプレイ機能付き!フリック入力とローマ字入力に完全対応したタイピング練習アプリです。初心者も安心のトレーニングモード付き。

★なんと!あのAppBank様に紹介して頂きました!!
typing-sale-led.gif


簡単3Dカメラ
iPhoneで手軽に3D写真を楽しもう!平行法/交差法/アナグリフ/グラグラ3Dに対応。
icon-l-3d.jpg

2枚の写真を撮影するだけで、裸眼で立体視できる3D写真が作成できます。85円でステレオ写真もアナグリフも楽しめるのは簡単3Dカメラだけ!

プロフィール

あらきんぐ☆

Author:あらきんぐ☆
はじめまして。あらきんぐです。
4月からiPhoneを購入し、その魅力に取り付かれて、気がついたらアプリ開発の道へ!仕事でプログラム開発をしていますが、基本「動けばOK!」な適当エンジニアです。適当でもアプリは作れる!っていう事を、ブログを通じて証明していきたと思います。

最新記事
最新コメント
最新トラックバック
カテゴリ
FC2カウンター
全記事表示リンク

全ての記事を表示する

Twitter
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
アクセスランキング
[ジャンルランキング]
コンピュータ
455位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
63位
アクセスランキングを見る>>
オススメ商品
iPhone/iPodと一般オーディオを繋ぐ貴重なアイテム!
アプライドオリジナルアイテム MBB...

アプライドオリジナルアイテム MBB...
価格:3,980円(税込、送料別)

開発中級者にオススメ!「こんなことができるんだ!」と驚かされる一冊
【送料無料】iPhone...

【送料無料】iPhone...
価格:1,500円(税込、送料別)

安い!シンプル!カッコいい!
希少なiPhone対応キーボード内蔵ケース