iPad Techfirm Lab

One more thing…

8月 2, 2010

　　　　　　こんにちは！YuiChiLoです 　　　　　　　　

Split Viewを縦方向で2ペインにする

By YuiChiLo

　　　　　　



Split Viewは、２つの隣り合ったペインから成る１つのフルスクリーンビューです。

横方向の場合はマスタペインと詳細ペインが表示されますが、縦方向の場合は詳細ペインのみの表示となります。

しかし、「設定」アプリのように縦方向の場合でもマスタペインを表示したい場合があります。

今回はその方法をご紹介します。



やることは３つです。

  1. UISplitViewControllerのサブクラスを作成
  2. willAnimateRotationToInterfaceOrientationをオーバーライド
  3. 横方向の場合のみ、最後に親クラスのwillAnimateRotationToInterfaceOrientationを呼ぶ



３番目がポイントです。



UISplitViewControllerのサブクラスのwillAnimateRotationToInterfaceOrientationでは以下のようにします。

縦／横それぞれの場合にマスタペインと詳細ペインの表示位置とサイズを変更します。

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {

	UIViewController* master = [self.viewControllers objectAtIndex:0];
	UIViewController* detail = [self.viewControllers objectAtIndex:1];

	CGRect masterFrame = master.view.frame;
	CGRect detailFrame = detail.view.frame;

	if(interfaceOrientation == UIInterfaceOrientationPortrait ||
	   interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {

		// 縦
		masterFrame.size.width = 320;
		masterFrame.size.height = 1024;
		masterFrame.origin.x = 0;
		masterFrame.origin.y = 0;

		detailFrame.size.width = 448;
		detailFrame.size.height = 1024;
		detailFrame.origin.x = 321;
		detailFrame.origin.y = 0;

		[master.view setFrame:masterFrame];
		[detail.view setFrame:detailFrame];

	}
	else {
		// 横

		masterFrame.size.width = 320;
		masterFrame.size.height = 768;
		masterFrame.origin.x = 0;
		masterFrame.origin.y = 0;

		detailFrame.size.width = 704;
		detailFrame.size.height = 768;
		detailFrame.origin.x = 321;
		detailFrame.origin.y = 0;

		[master.view setFrame:masterFrame];
		[detail.view setFrame:detailFrame];

		[super willAnimateRotationToInterfaceOrientation:interfaceOrientation duration:duration];
	}
}


ポイントとなるのは横方向の時の処理で、親クラスのwillAnimateRotationToInterfaceOrientationを呼んであげます。
これを指定しないとマスタペインと詳細ペインのつなぎ目のバーの直角となり丸みが消えてしまいます。


これらの指定で以下のように横、縦方向でも常に２ペインになります。

横方向の場合



縦方向の場合



以上です。

Category: Tips, iPad

Tagged:

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

22 Tweets

26 Responses

  1. » イギリス版SIMフリー　iPhone4　到着！！　セッティング編　（MicroS..ほかニュース19件(08月03日) | iPhone-Dev.jp より:
    2010/08/03 07:05

    [...] も1番簡単な方法をまた採用してきました！ Comex氏素晴らしい！！対応しているデバイスはiPhone 3GiPhone 3GSiPhone 4iPod touch 2GiPod touch 3GiPad… Split Viewを縦方向で2ペインにする | iPad Techfirm Lab [...]

  2. aa より:
    2010/12/09 17:48

    4.2では動作しませんでした

  3. Hiroko igarasi より:
    2011/04/26 17:14

    こんにちは。上記の方法でsplitview縦に分割しているのですがどうしても反映されません。
    全体のソースを見せて頂きたいのですが。
    ちなみにviewの色を変えてみましたが、そちらは反映されます。
    よろしくおねがいいたします。

  4. 初心者 より:
    2011/11/05 00:38

    UISplitViewControllerのサブクラスの作成する場所を教えてください。
    delegate,rootviewcontroller,detailcontrollerという三つのどれですか。
    あるいは、新しくファイルを作らないといけないですか
    よろしくおねがいいたします。

Leave a Reply

Additional comments powered by BackType

カレンダー

2012年2月
月 火 水 木 金 土 日
« 11月    
 12345
6789101112
13141516171819
20212223242526
272829  

人気エントリー