Skip to content

3.1 UIView

punchdrunker edited this page Jun 17, 2016 · 23 revisions

View Programming Guide for iOS | iOS Viewプログラミン グガイド

UIView Class Reference

UIView クラスは大きく分けて以下の役割を持っています。

  • 独自のコンテンツ描画 (画面上に表示するオブジェクトとしての役割)
  • 各 View を管理するコンテナ
  • アニメーション
  • イベント処理 (タップやピンチインなど)

画面上に表示するもの自身としての役割と、階層構造で UIVeiwを管理している、という点をまず抑えてください。 以下では UIView の利用方法と仕組みについて説明します。

コンテンツの描画

画面上にオリジナルのコンテンツを表示するまでを解説します。

UIViewをコード上で利用する

UIViewの初期化は、「コード上で行う方法」と storybaord や xib のように 「Interface Builderを利用する方法」とがあります。 今までの章でstorybaord上にパーツを配置していた例がありますが、これが後者の「Interface Builderを利用する方法」にあります。

ここでは、コード上からUIViewを利用する方法を解説します。

初期化

UIView のイニシャライザ は -initWithFrame: で、このメソッドを用いて初期化を行います。 引数として渡す frame は CGRect型の値を渡します。CGRectは 原点(origin) と大きさ(size) の二つの要素を持つ構造体で、 UIViewの位置と大きさを定義して渡します。例えば以下のようにすると、原点が (10, 100), 大きさが (200, 50) のUIViewを作ることができます。

CGRect frame;
frame.origin.x = 10;
frame.origin.y = 100;
frame.size.width = 200;
frame.size.height = 50;
UIView *view = [[UIView alloc] initWithFrame:frame];
プロパティ

UIViewにはいくつかのプロパティがあります。詳しくはクラスリファレンス(UIView Class Reference)をごらんください。

よく利用するプロパティは例えば以下のようなものがあります。

プロパティ名 解説
backgroundColor Viewの背景色を表すプロパティです。デフォルトでは透明です。Viewがちゃんと表示されているのかどうかの確認をしたい場合は適当な値を入れてデバッグなどをします。
hidden Viewの表示/非表示 を切り替えるパラメータです。view.hidden = YES; とするとViewが非表示になります。 
frame, bounds 共にViewの位置と大きさに関するプロパティです。frameは親Viewの座標系に対する位置と大きさ、boundsは自分の座標系に対する位置と大きさを返します。基本的にはframeで位置やサイズを調整するのでframeを利用するケースの方が多いです。
Viewを配置する

Viewを配置して画面上に表示します。iOSではViewを階層構造で管理していて、あるViewがあり、その上に重ねていく、という手順でViewを表示します。またこの際の注意点として必ず一つrootとなるviewが必要になります。

UIViewControllerを利用して画面を作ることが多いと思うのですが、UIViewControllerには一つviewが割り当てられているので、このviewに追加していきます。

viewを追加するにはaddSubviewを利用します。

何かの ViewControllerのviewDidLoad あたりで実行してください。

UIView *view = [[UIView alloc] initWithFrame... ]; // UIViewの初期化
view.backgroundColor = [UIColor blueColor]; // デフォルトでは透明なので配置されてもわからない。そこで適当な色を入れておく
[self.view addSubview:view]; // viewを追加. self.viewはUIViewControllerのプロパティ

UIViewのサブクラス

アプリ内でコンテンツを表示しようとした時、UIViewのみでは矩形と背景色くらいしかパラメータがなく不便です。そこでUIKitには様々なUIViewのサブクラスが含まれています。よく利用するものについて以下で紹介します。

img

(fig subclassess.png) 様々なViewを配置したサンプル

クラス名 解説
UILabel view上にテキストを表示するサブクラスです。label.text = @"text comes here!!"; のようにしてテキストを表示することができます。リンクハイライトなどのリッチな表現の場合はUITextViewを利用します。
UIButton ボタンを表すクラスです。他のViewでもタップなどのインタラクションは取れるのですが、UIButtonはタップ時の暗転やタップ状態の判別も行ってくれます。何かボタンを設置する場合はこのクラスを使うケースが多いです。
UITextField 1行のみの入力を行う際に利用するクラスです。入力された際の検知はUITextFieldDelegateを介して行います。
UIImageView 画像を表示する際に利用するUIImageViewのクラスです。プロパティのimageにUIImageインスタンスを渡すことで画像を表示できます。
UITextView リッチなテキストの表示、入力を行う際に利用するクラスです。テキストの変更などはUITextViewDelegateを利用して取得します。

演習 1

上の図(subclassess.png)のように幾つかのViewを表示するアプリケーションを作ってみてください。 UIImageViewに表示する画像は何でも構いません。サンプルで利用した図はhttps://raw.githubusercontent.com/mixi-inc/iOSTraining/master/SampleProjects/3.1/MixiViewSample/MixiViewSample/ojisan.pngにあるのでこちらでも構いません。 ベースとなるプロジェクトの制約も特にありません。

解答は https://github.com/mixi-inc/iOSTraining/tree/master/SampleProjects/3.1/MixiViewSampleにあります。

ヒント

  • Viewを追加できているか不安なときはbackgroundColorを代入するとよくわかります。(その色の物が表示されていればviewは表示されている)
  • viewのサブクラスごとに表示の方法が違うので注意が必要です。例えば UILabelにテキストをセットするときは label.text = ... で表示できますが、UIButtonではできません。それぞれの使い方はリファレンスを調べたり、検索したりしてください。

subViews

ある viewA に重ねられた viewB は ViewA の SubView となります。viewB は viewA の subViews に管理されます。

subViews

演習

演習 1 の続きを利用します。演習 1で複数のUIコンポーネントを配置したと思います。その中から UIImageView だけを取り除いてください。その際、subviewに含まれる各viewがUIImageViewのクラスかどうかを判断して取り除いてください

ヒント

  • for の高速列挙を使ってください。for ( UIView *view in subviews ) { ....
  • [obj isKindOfClass:[UIView class]] を使うことで obj が UIView クラスなのかを判定できます。
  • UIViewを取り除く時は [view removeFromSuperview] を使ってください

解答は演習1の解答と同じくhttps://github.com/mixi-inc/iOSTraining/tree/master/SampleProjects/3.1/MixiViewSample に含まれています。MixiFirstViewController.m の中にコメントアウトされているので、そのコメントアウトを外すと確認できます。

tag

UIView インスタンスは NSinteger の tag というプロパティを持っています。ここに数値をセットすることで、View を高速に検索することが出来ます。

UIView *subView = [view viewWithTag:8];

このコードを実行することで view とその subView を深さ優先検索し該当 view があればそこで検索を終了します。

また、タグを使うことによって、ボタンのイベント処理を一つのメソッドにまとめることが出来ます。

tag

このような場合、sender.tag で処理を振り分けることで、ボタンごとにメソッドを宣言実装する必要がなくなります。

view の追加/削除

今までに出てきた addSubview/removeFromSuperView の他にも view を insert するメソッドがあります。

  • insertSubview:atIndex: subViews の index を指定
  • insertSubview:aboveSubview: 指定の view の上に insert
  • insertSubview:belowSubview: 指定の view の下に insert
  • exchangeSubviewAtIndex:withSubviewAtIndex: subView の入れ替え、remove してから addSubview するよりも高速

view の座標系

iOS では左上を座標の起点とします。

origin

iOS Viewプログラミン グガイド から引用

frame

frame-bounce-center

viewの位置や大きさを変更する場合はframeプロパティを変更します。

view.frame = CGRectMake(10, 20, 30, 40); // 原点(10, 20)、width = 30, height = 40

注意 CGRectには値を直接アサインできません。そのため以下のようなコードはコンパイルエラーとなります。

view.frame.origin.y = 10; // コンパイルエラー!

そのため一つのプロパティのみを変更する場合は一度変数に取ってから、値を変えて再代入します。

CGRect frame = view.frame;
frame.origin.y = 10;
view.frame = frame;

引き延ばし可能な view

View の stretch 機能を使うことで画像の引き延ばし可能領域を設定することが出来ます。

Interface Builder 上で設定する場合は Stretching の部分の数値を変更することで設定可能です。

  • x, y : 起点から **引き延ばし不可能 ** な領域の割合を設定します
  • Width, Height : x, y で決めた点から 引き延ばし可能 な領域を設定します。

stretch

画像リンクcircle

はじめに

  1. iOSについて

  2. Xcode最初のステッフ

  3. 導入

  4. Objective C の基礎

  5. メモリ管理

  6. 1.3 UIViewController1 UIViewController のカスタマイズ(xib, autoresizing)

  7. 1.3 UIViewController1 UIViewController のカスタマイズ(storyboard)

  8. UIViewController2 - ModalViewController

  9. UIViewController2 - ModalViewController(storyboard)

  10. UIViewController3 - ライフサイクル

  11. HomeWork 1 Objective C の基本文法

  12. HomeWork 2 UIViewControllerとModalViewController

  13. HomeWork 3 UIViewController + Animation

  14. UIKit 1 - container, rotate-

  15. UINavigationController

  16. UITabController

  17. Custom Container View Controller

  18. Supporting Multiple Interface Orientations

  19. HomeWork 1 - タブバーからモーダルビューを表示する

  20. HomeWork 2 - NavigationController

  21. HomeWork 2.3 デバイスことに回転対応

  22. UIKit 2- UIView -

  23. UIView

  24. UIView のカスタマイズ

  25. UIView Animation

  26. HomeWork 1 - UIScrollView

  27. UIKit 3 - table view -

  28. UITableView について

  29. UITableViewとNavigationController

  30. custom UITableViewCell の作成

  31. UITableViewのその他のオプション、カスタマイズ

  32. HomeWork 1 - Dynamic height with a custom uitableviewcell

  33. UIKit 4 - image and text -

  34. UIImagePickerController

  35. Assets Library

  36. UITextFiled, UITextView

  37. KeyboardNotification

  38. Homework 1 - フォトの複数枚選択

  39. ネットワーク処理

  40. NSURLConnection

  41. JSONのシリアライズとデシリアライズ

  42. UIWebView

  43. ローカルキャッシュと通知

  44. NSUserDefaults, Settings Bundle

  45. NSFileManager

  46. Key Value Observing

  47. NSNotification、NSNotificationCenter を用いた通知

  48. UILocalNotification

  49. Blocks, GCD

  50. Blocks

  51. GCD

  52. 【演習】GCD,-Blocksを用いたHTTPリクエストマネージャの作成

  53. 設計とデザインパターン

  54. クラス設計 1

  55. クラス設計 2

  56. [クラス設計演習] (https://github.com/mixi-inc/iOSTraining/wiki/9.3-%E3%82%AF%E3%83%A9%E3%82%B9%E8%A8%AD%E8%A8%88%E6%BC%94%E7%BF%92)

  57. 開発ツール

  58. Instruments, デバッガ

  59. CocoaPods

  60. テスト

  61. iOS開発におけるテスト

  62. GHUnit

  63. Kiwi

  64. KIF

  65. In-App Purchase

  66. In-App Purchase

  67. 付録

  68. Tips of Xcode

  69. Auto Layout 入門

  70. Auto Layout ドリル

Edit sidebar

Clone this wiki locally
You can’t perform that action at this time.