SONICMOOV Googleページ

【iPhoneアプリ開発入門】ビューの表示ツリーの概念と扱い

【iPhoneアプリ開発入門】ビューの表示ツリーの概念と扱い

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

iOS では window を頂点としたツリー構造になっています。
一般的には window には一つのビューが追加されていて、これをルートビューと呼びます。

XCode でアプリケーション雛形をつくると、ViewContorller.swift ができますが、このビューコントローラは Main.storyboard で定義されているものでこの ViewContoroller に属するビューが、ルートビューになります。

ルートビュー

AppDelegate.swift で

	print(self.window?.rootViewController!.view);

と記述すると

コンソールに

	<UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>>

と出力されます。

また ViewController.swift で

	print(self.view);

と記述すると、コンソールには

	<UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>>

先ほどと同じ値をもったものが出力され、同じビューであると確認できます。

ビューは子をもつことが可能です。
ビューを子に追加するには addSubview を使用します。
以下のようルートビューに追加してます。

	let view:UIView = UIView();
	print(view);
	self.view.addSubview(view);
	print(self.view.performSelector("recursiveDescription"));

コンソールには

	<UIView: 0x7ffe52c1e030; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52c94670>>
	Unmanaged<AnyObject>(_value: <UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>>
	| <UIView: 0x7ffe52c1e030; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52c94670>>

とルートビューに足されたことが確認できます。
ビューは階層を持つことができるので、先ほど作った子のビューにさらにビューを
足していくようなコードをかくと

	var tmp:UIView!;
	for(var k=0; k<3; k++) {
		let view:UIView = UIView();
		if(k==0) {
		   self.view.addSubview(view);	   
		}
		else {
			tmp.addSubview(view);
		}
		tmp = view;	
	}
	print(self.view.performSelector("recursiveDescription"));

入れ子になっていることがコンソールで確認できると思います。

	Unmanaged<AnyObject>(_value: <UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>>
	| <UIView: 0x7ffe52c1e030; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52c94670>>
	|    | <UIView: 0x7ffe52f43e40; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52f44600>>
	|    |    | <UIView: 0x7ffe52f44010; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52f44180>>

ビューは上下の階層でだけではなく、並列に置くこともできます。

	self.view.addSubview(UIView());
	self.view.addSubview(UIView());
	self.view.addSubview(UIView());
	
	print(self.view.performSelector("recursiveDescription"));

とすると以下のように並列に置かれることがコンソールで確認できます。

	Unmanaged<AnyObject>(_value: <UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>>
	| <UIView: 0x7ffe52f44250; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52f443c0>>
	| <UIView: 0x7ffe52f446e0; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52f44460>>
	| <UIView: 0x7ffe52f448b0; frame = (0 0; 0 0); layer = <CALayer: 0x7ffe52f44a20>>)

UIButton なども UIView を継承しておりアプリケーションの見た目、つまり表示にかかわるものは UIView を継承したものとなります。
今回はコードで書きましたが storyboard でつくると簡単に構造ができると思います。

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

記事作成者の紹介

aaaa(フロントエンドエンジニア)

一般的にはプログラマと言われています。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation