woshidan's blog

あいとゆうきとITと、とっておきの話。

mixi iOS training 第四回分についてメモ

ここを参考に後追いしています。
連休を利用して追いつけるといいですね。

内容

  • 2.2 UITabController
    • UITabControllerを使って画面を作る
      • 自分でクラスにコードを書いていく場合(xib利用)
      • StoryBoardを用いる場合
  • 3.1 UIView
    • UIView
    • ImageViewとUIButton
    • 文字系のUIView
    • subViews
  • 3.3 UIView Animations
    • animations: アニメーションのパターンを記述
    • options: アニメーションの再生パターン

2.2 UITabController

基本的に自分の記事から語尾を調整する程度のノリで転載しています。

UITabBarControllerを使って画面を作ってみます。
TabBarControllerを使って画面を作っていく際に、自分でクラスにコードを書いていく方法とStoryBoardを用いた方法があるみたいです。

(前者はStoryboardでViewを作るのではなくxibファイルを書いてViewを作る)

自分でクラスにコードを書いていく場合

TabBarを使うときに注意する必要があるクラスは、AppDelegate, UIViewController(TabBarControllerから表示されるもの)です。

AppDelegate

アプリが起動したり終了したりバックグラウンド状態になったりしたときに呼ばれるクラス。今回はそのクラスでdidFinishLaunchingWithOptionsメソッド内、つまりアプリの起動が終了したときに、rootViewControllerにtabBarControllerを指定してから表示するように設定しています。

UIViewController(TabBarControllerから表示されるもの)

initWithImageName内で、TabBarに表示するタイトルとアイコンの設定を行います。

その他

プロジェクトを作成するときはTabbed Applicationを指定して作成します。

self.tabBarItem.badgeValue = @"5"のようにしてtabBarの上にバッジを表示する事が可能です。

StoryBoardを用いる場合

プロジェクトテンプレートの指定

プロジェクトを作成するときはTabbed Applicationを指定して作成します。 このとき、指定しているのはプロジェクトテンプレートというんですね、いまさら知った……

新しくViewControllerを追加する手順
  1. 追加したいUIViewControllerをStoryBoard上で作成
  2. TabBarControllerからCtrlを押しながらViewControllerへドラッグ
  3. ウィンドウが出てくるのでRelationship Segue -> view controllersを設定する

3.1 UIView

基本的に自分の記事から語尾を調整する程度のノリで転載しています。

UIView

  • UIViewってStoryboard上でViewを選択したときに載せられるラベルとかで乗せる自体は難しくないです
    • 乗せたあとコードからSubViewを足したり、Labelの文字を変更したい場合は、viewDidLoadあたりでやります
    • Viewをコードで作りたい場合はinitWithFrameメソッドを使います. FrameというのはCGRectクラス(長方形みたいなの)です
      • LabelだろうがTextViewだろうがなんでもFrameにあたるCGrectクラスのインスタンスを渡す必要があります
// this code is incited from https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/index.html
CGRect  viewRect = CGRectMake(10, 10, 100, 100); // 原点(10, 10) 大きさ100x100
UIView* myView = [[UIView alloc] initWithFrame:viewRect];
// [[UIView(or SubClass) alloc] initWithFrame:...]の形

ImageViewとUIButton

  • ImageViewでファイル名を叩き込んでpngが表示されたとき地味に感動しました
    • 本当はXcode経由で画像ファイルをaddするのだと分かったときがもうちょっと感動しました
    • UIButtonをコード上で定義するときのコード
      • Storyboard上で見た文字が並んでいるなとおもいました
[button setTitle:@"button" forState:UIControlStateNormal];
// タイトル(ボタン上の文字列)といつ表示されるタイトルなのか(forState)
[button addTarget:self action:@selector(handle:) forControlEvents:UIControlEventTouchUpInside];
// ボタンが押された事になるのはどのようなときか. 一番後ろは中側をタッチときに押した事になる、ということ

文字系のUIView

  • 単純なラベルを表現するサブクラスがUILabel
  • 1行のみの入力を行う際に利用するクラスがUITextField
    • UITextViewはリッチなテキストの表示、入力を行う際に利用します
  • テキストの変更等は、UITextViewDelegateを利用して取得します
  • UIViewには色々パラメータがあるけど一番気になったのは、hiddenでした. デバッグで使いそうなのはbackgroundColor

subViews

  • UIViewは階層構造になっていて、下の階層のViewはsubViewsで管理されています。
    • UIViewControllerからはself.view.subviewsで取り出せます
  • Viewのstrech機能を使う事で画像の引き延ばし可能領域を設定する事が可能です

3.3 UIView Animations

animations: アニメーションのパターンを記述

サンプルでは、

[_ojisanImageView setFrame:kOjisanMovedFrame];

setFrameメソッドが、

親ビューの範囲内でビューを移動、リサイズします

ということなので、移動後の位置まで動かす、というアニメーションを指定していることになります。

options: アニメーションの再生パターン

http://www.objectivec-iphone.com/animation/UIView-animation/animateWithDuration.html  とサンプルより

オプション 意味
UIViewAnimationOptionRepeat アニメーションを永久に繰り返す
UIViewAnimationOptionCurveEaseInOut 加速して始まり減速して終わり
UIViewAnimationOptionCurveEaseIn 加速して始まる
UIViewAnimationOptionCurveEaseOut 減速して終わる
UIViewAnimationOptionCurveLinear 等速
UIViewAnimationOptionTransitionCurlUp 回転しながら表示される

実行後に処理を記述する場合、 animateWithDurationメソッドcompletion:の部分に記述するようです。

この辺、なんとなく演習やってても生煮えの部分があります。

どういことかというと、
演習のコード、サンプルコードの通りに打ち込んでも、アニメーション終了後のアニメーションが不発に見えます。

実際は、completionsの部分をコメントアウトしていると一度アニメーションが再生していたら、
新しくViewControllerを表示させても、元の位置からアニメが再生されない
(コメントアウトを取っているともとの位置からアニメーションが再生される)という風に差はあるので、
アニメーション終了後に元の位置に戻す、という言葉がぴんと来なかったのですが、 もっと実装したらピンと来そうですし、単になんか実装漏れがあるのかもしれないです。

いまの感覚だと、ViewDidloadを呼び出したとき、animationsの処理が既に終了していたら、 completionsが呼び出されて、そのあとにanimationsが呼び出される、みたいに見えてます。

beginAnimcationsメソッドとcommitAnimationsメソッドを組み合わせて、 アニメーションブロックを使わずにアニメーションを記述する事も可能なようです。

あと、UIVIew transitionWithViewは画面遷移のときのアニメーションみたいですよ。