【iPhoneアプリ開発入門】ビューの表示ツリーの概念と扱い
iOS では window を頂点としたツリー構造になっています。
一般的には window には一つのビューが追加されていて、これをルートビューと呼びます。
XCode でアプリケーション雛形をつくると、ViewContorller.swift ができますが、このビューコントローラは Main.storyboard で定義されているものでこの ViewContoroller に属するビューが、ルートビューになります。
AppDelegate.swift で
1 2 3 |
[sourcecode lang="text"] print(self.window?.rootViewController!.view); [/sourcecode] |
と記述すると
コンソールに
1 2 3 |
[sourcecode lang="text"] <UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>> [/sourcecode] |
と出力されます。
また ViewController.swift で
1 2 3 |
[sourcecode lang="text"] print(self.view); [/sourcecode] |
と記述すると、コンソールには
1 2 3 |
[sourcecode lang="text"] <UIView: 0x7ffe52d0f690; frame = (0 0; 414 736); autoresize = W+H; layer = <CALayer: 0x7ffe52d0cff0>> [/sourcecode] |
先ほどと同じ値をもったものが出力され、同じビューであると確認できます。
ビューは子をもつことが可能です。
ビューを子に追加するには addSubview を使用します。
以下のようルートビューに追加してます。
1 2 3 4 5 6 |
[sourcecode lang="text"] let view:UIView = UIView(); print(view); self.view.addSubview(view); print(self.view.performSelector("recursiveDescription")); [/sourcecode] |
コンソールには
1 2 3 4 5 |
[sourcecode lang="text"] <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>> [/sourcecode] |
とルートビューに足されたことが確認できます。
ビューは階層を持つことができるので、先ほど作った子のビューにさらにビューを
足していくようなコードをかくと
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[sourcecode lang="text"] 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")); [/sourcecode] |
入れ子になっていることがコンソールで確認できると思います。
1 2 3 4 5 6 |
[sourcecode lang="text"] 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>> [/sourcecode] |
ビューは上下の階層でだけではなく、並列に置くこともできます。
1 2 3 4 5 6 7 |
[sourcecode lang="text"] self.view.addSubview(UIView()); self.view.addSubview(UIView()); self.view.addSubview(UIView()); print(self.view.performSelector("recursiveDescription")); [/sourcecode] |
とすると以下のように並列に置かれることがコンソールで確認できます。
1 2 3 4 5 6 |
[sourcecode lang="text"] 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>>) [/sourcecode] |
UIButton なども UIView を継承しておりアプリケーションの見た目、つまり表示にかかわるものは UIView を継承したものとなります。
今回はコードで書きましたが storyboard でつくると簡単に構造ができると思います。