#potatotips presentation by @hoshi_gaki (Akira Iwaya)

1. iOS 7 な Message App
の作り方
Akira Iwaya / @hoshi_gaki

2. いわや
あき
ら
岩谷 明
@hoshi_gaki
FRED PERRY
会員証アプリ
アルバイトなプログラマ
（千葉大学工学部デザイン学科４年生）
フジロック用
アプリ
（非公式）
Summaly
お手伝いしました
資生堂 店頭用商品紹介アプリ

3. iOS 7 のメッセージアプリ
1
もにょもにょ動く
2
吹き出しにグラデーションが
ついてる
3
下にスワイプするとキーボード
が隠れる
(apple.com より）

4. 1
もにょもにょ動く
・UICollectionView + UIDynamics で実現できる
- WWDC 2013 Session 217 Exploring Scroll Views on iOS 7
- objc.io issue #5 UICollectionView + UIKit Dynamics
www.objc.io/issue-5/collection-views-and-uidynamics.html
・UICollectionViewFlowLayout のサブクラスを作る
- UIDynamicAnimator と UIAttachmentBehavior の組み合わせ
- それ用メソッド [self.dynamicAnimator layoutAttributesForCellAtIndexPath:]
- [self.collectionView.panGestureRecognizer locationInView:
self.collectionView]
でタッチをとれる

5. 吹き出しにグラデーションがついてる
2
※自分で思いついた方法です
1. UICollectionViewLayoutAttributes のサブクラスを作る
←グラデーション用に色を保持する配列

6. 2. UICollectionViewCell のサブクラスを作る
CAGradientLayer
・-(void)applyLayoutAttributes: に作ったサブクラスが渡ってくるので，
に設定する
・背景色をグラデーションにするためにグラデーション用 View の
+(Class)layerClass で [CAGradientLayer class] を返す
self.layer.cornerRadius = 15.0f; self.layer.maskToBounds = YES で角を丸くする

7. 3. UICollectionViewFlowLayout のサブクラスで色をセッ
トする
・+(Class)layoutAttribuetClass でカスタマイズした UICollectionViewLayoutAttributes の
クラスを返す
・layoutAttributesForElementsInRect: と layoutAttributesForIteAtIndexPath: で色を
計算するメソッ
ドをよびだして，
カスタマイズした UICollectionViewLayoutAttributes のサブク
ラスに色を設定
- (void)assignGradientColorsToLayoutAttributes:(NSArray *)layoutAttributes
- (NSArray *)colorsForBeginPosition: endPosition withColors:(NSArray *)colors
colorsIdeintifier:(NSString *)colorsIdentifier loations:(NSArray *)locations
などなど… 詳しくは GitHub で！

8. 3
下にスワイプするとキーボードが隠れる
・iOS 7 からうってつけの API が追加
scrollView.keyboardDismissMode =
UIScrollViewKeyboardDismissModeInteractive;
これでスワイプ時に勝手に隠してくれる。
But
Message アプリや LINE などのように自動で UITextView を追従させ
たりはしてくれない。

9. ・そこで
ziryanov / DAKeyboardControl
forked from danielamitay / DAKeyboardControl
https://github.com/ziryanov/DAKeyboardControl
・fork 元のものに Autolayout + iOS 7 対応したもの

10. 以上をまとめたプロジェクトを作りました !
AIiOS7MessageSample
https://github.com/akira108/AIiOS7MessageSample
・某アプリを iOS7 リデザインした風 UI
・AutoLayout による可変幅セル
・UIDynamics
・グラデーション吹き出し
・スワイプで閉じるキーボード

11. 以上をまとめたプロジェクトを作りました !
AIiOS7MessageSample
https://github.com/akira108/AIiOS7MessageSample
・某アプリを iOS7 リデザインした風 UI
・AutoLayout による可変幅セル
・UIDynamics
ご静聴ありがとう
ございました。
・グラデーション吹き出し
・スワイプで閉じるキーボード