[iOS]下からニョキッと表示されるDatePickerの実装

DatePickerViewってUIViewにのっけて全画面表示するのは簡単ですが、下半分だけキーボードみたいにせり上がるタイプのはけっこう面倒ですよね。色々サンプルやライブラリなどもあるかと思いますが、応用も効くので自分で実装してみるのも良いかと思います。今回は全ソースだと長くなってしまいますので、キモの部分だけご説明したいと思います。

実はAppleの公式にDateCellというサンプルがあります。これはテーブルのセルを選択した際に下からDatePickerがせり上がるようなサンプルとなっていますが、これを参考にして単純に一枚のUIViewにボタンとラベルを貼り付けて同様の動きをするサンプルを作成しました。

ニョキッとDatePicker

以下がせり上がる部分の抜粋となりますので、公式と合わせてご参考頂けたらと思います。

-(void)showUpDatePicker
{
    self.pickerView.date = [self.dateFormatter dateFromString:self.labelDate.text];
    
    //このサンプルはDatePickerのオンオフをViewへのAdd有無で判定している。前提としてloadViewではalloc,initまでしておいてaddSubViewはしない。
	if (self.pickerView.superview == nil)
	{
	    //ここで初めてaddSubViewする。注意点はself.viewに対してではなくself.view.window
    	[self.view.window addSubview: self.pickerView];
    		
        CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
        CGSize pickerSize = [self.pickerView sizeThatFits:CGSizeZero];
        CGRect startRect = CGRectMake(0.0,
                                      screenRect.origin.y + screenRect.size.height,
                                      pickerSize.width, pickerSize.height);
        //startRectはようは隠し座標。画面のさらに下の座標を設定しておいて見えなくしているだけ                              
        self.pickerView.frame = startRect;
		
		CGRect pickerRect = CGRectMake(0.0,
									   screenRect.origin.y + screenRect.size.height - pickerSize.height,
									   pickerSize.width,
									   pickerSize.height);

		//ここからアニメーション処理の開始
		[UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.3];
		
        [UIView setAnimationDelegate:self];
		
		//表示場所の座標を改めて指定してやる。y座標がポイント
        self.pickerView.frame = pickerRect;
		
		//DatePickerが表示できるようにスペースを空けてあげる
        CGRect newFrame = self.view.frame;
        newFrame.size.height -= self.pickerView.frame.size.height;
        self.view.frame = newFrame;
        
	    [buttonShow setTitle:@"closeDatePicker" forState:UIControlStateNormal];
        
        //アニメーションが実行される
		[UIView commitAnimations];

    }else{
    
    	//閉じる場合の処理(内容は割愛)
        [self showDownDatePicker];
    }
    
}

また全ソースコードはgithubより取得してください。

harusou-apps/DatePickerShowAnimatedSample

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>