FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Popoverを表示する その1[Xcode]

iPadでPopoverを表示する方法をご紹介します。

PopoverはiPadに固有の機能で、設定画面等の表示に使用されます。画面全体を切り替える事無く他のViewを表示できるので表示負荷が少なく、Appleも使用を推奨しています。

アプリ「6オクターブ ピアノ」では設定画面とヘルプ表示にPopoverを使用しており、
・Popoverの表示
・タイトル表示
・ボタンで他のPopoverに移動
などの機能を実装しています。

これらの機能を個別にご紹介したいと思います。



今回は基本となる「Popoverの表示」です。メイン画面内のボタンを押すとPopoverが表示されます。



まずはPopover内の表示を行う InnerViewControllerクラスを作成します。
この中では 320x400サイズのviewを作り、labelで「Popover!!」と表示しています。

PopoverViewController.h

#import

@interface InnerViewController : UIViewController

@end


PopoverViewController.m

#import "InnerViewController.h"

@interface InnerViewController ()
@end

@implementation InnerViewController

- (id)init
{
self = [super init];

// viewの設定
if (self) {
// サイズの設定
self.view.frame = CGRectMake(0,0, 320, 400);

// 背景の設定
self.view.backgroundColor = [UIColor whiteColor];

// labelを置く
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(40,50, 300,50)];
label.font =[UIFont systemFontOfSize:50];
label.text = @"Popover !!";
[self.view addSubview:label];
}

return self;
}

@end


そしてそれを呼び出すメイン側の PopoverViewControllerクラスを作成します。

PopoverViewController.h

#import
#import "InnerViewController.h"

@interface PopoverViewController : UIViewController

@end


PopoverViewController.m

#import "PopoverViewController.h"

@interface PopoverViewController () {
// 1.UIPopoverControllerの変数を定義
UIPopoverController *popController;
}

@end

@implementation PopoverViewController

- (void)viewDidLoad
{
[super viewDidLoad];

// 2.Popoverを表示させるための buttonを設定
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn1 setFrame:CGRectMake(300,50, 120,50)];
[btn1 setTitle:@"BUTTON" forState:UIControlStateNormal];
[btn1 addTarget:self action:@selector(btn1Pressed:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn1];
}

//===========================================================
// Popover表示
//===========================================================
- (void)btn1Pressed:(id)sender
{
// Popoverを作成
if (! popController) {
// 3. innerVCを定義
InnerViewController *innerVC = [[InnerViewController alloc] init];

// 4. Popoverの大きさを InnerViewControllerの大きさに合わせる
innerVC.contentSizeForViewInPopover = innerVC.view.frame.size;

// 5. Popoverのインスタンスを作成
popController = [[UIPopoverController alloc] initWithContentViewController:innerVC];
}

// 6.Popoverを表示する
[popController presentPopoverFromRect:CGRectMake(300,50, 120,50) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
}

@end


PopoverViewController側の手順は以下のようになります

  1. まずUIPopoverControllerの変数を定義しておきます。
  2. Popoverを起動するためのUIButtonを設置します。
  3. InnerViewControllerのインスタンスとして innerVCを定義します。
  4. innerVCのViewの大きさは innerVC.view.frame.sizeで取得できます(今回は320x400)。
    これをinnerVC.contentSizeForViewInPopoverに入れるとPopoverのサイズが決まります。
  5. Popoverのインスタンスを作成します。
  6. 最後に presentPopoverFromRectでPopoverを表示します。


最後の部分、presentPopoverFromBarButtonItemというメソッドもありますが、これはメイン側にTabBarがある場合に使います。
一般的なUIButtonなどからPopoverを開くには presentPopoverFromRectを使用します。
この中のCGRectMakeはPopoverの起点(小さい三角の場所)となります。UIButtonと同じCGRectを指定しておけば、UIButtonの中央が起点になります。
permittedArrowDirectionsはPopoverを表示する方向です。UIPopoverArrowDirectionAnyと指定すれば、起点からどちらの方向に表示するかが自動で決まります。


この内容でビルドして実行すると、UIButtonのタップでPopoverが表示され、Popover外部のタップでPopoverが閉じます。

次回はタイトルの表示方法をご紹介します。
関連記事

コメントの投稿

非公開コメント

Appご紹介
K app designのAppをご紹介します

ねこわけ

画面中央の猫を次々に仕分けるゲームです。

あまり計算機

あまりを計算できる割算専用の計算機です。

6オクターブ ピアノ

6オクターブ鍵盤のピアノアプリです。iPad専用。

Dynamic Drum

様々な演奏法が楽しめるドラム演奏アプリです。

クイズボタン

早押しクイズのサポートをするアプリです。

クイズボタン Pro

クイズボタンに点数表示機能が付きました。

クイズボタン HD

クイズボタンのiPad専用版。回答者ボタンが8つに増量。

ベロシティ ピアノ

タップの強弱で音量が変わるピアノアプリです。

TIMERx4

4つのキッチンタイマーを同時に動作できるアプリです。

アナデジClock

アナログとデジタルが融合した時計です。
検索フォーム
最新記事
最新コメント
カテゴリ
人気ページ
月別アーカイブ
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。