狠狠撸

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

いわや

あき
ら

岩谷明
@hoshi_gaki

FRED PERRY
会員証アプリ

アルバイトなプログラマ
（千葉大学工学部デザイン学科４年生）

フジロック用
アプリ
（非公式）

Summaly

お手伝いしました

資生堂店头用商品绍介アプリ

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

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]

でタッチをとれる

吹き出しにグラデーションがついてる

2

※自分で思いついた方法です

1. UICollectionViewLayoutAttributes のサブクラスを作る
←グラデーション用に色を保持する配列

2. UICollectionViewCell のサブクラスを作る
CAGradientLayer
?-(void)applyLayoutAttributes: に作ったサブクラスが渡ってくるので，

に設定する

?背景色をグラデーションにするためにグラデーション用 View の
+(Class)layerClass で [CAGradientLayer class] を返す
self.layer.cornerRadius = 15.0f; self.layer.maskToBounds = YES で角を丸くする

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 で！

3
下にスワイプするとキーボードが隠れる
?iOS 7 からうってつけの API が追加
scrollView.keyboardDismissMode =
UIScrollViewKeyboardDismissModeInteractive;
これでスワイプ時に勝手に隠してくれる。

But
Message アプリや LINE などのように自動で UITextView を追従させ
たりはしてくれない。

?そこで

ziryanov / DAKeyboardControl
forked from danielamitay / DAKeyboardControl

https://github.com/ziryanov/DAKeyboardControl
?fork 元のものに Autolayout + iOS 7 対応したもの

以上をまとめたプロジェクトを作りました !

AIiOS7MessageSample
https://github.com/akira108/AIiOS7MessageSample

?某アプリを iOS7 リデザインした風 UI
?AutoLayout による可変幅セル
?UIDynamics

?グラデーション吹き出し

?スワイプで閉じるキーボード

以上をまとめたプロジェクトを作りました !

AIiOS7MessageSample
https://github.com/akira108/AIiOS7MessageSample

?某アプリを iOS7 リデザインした風 UI
?AutoLayout による可変幅セル
?UIDynamics

ご静聴ありがとう
ございました。
?グラデーション吹き出し

?スワイプで閉じるキーボード

狠狠撸

Potatotips3 hoshi gaki_akira_iwaya

More Related Content

Potatotips3 hoshi gaki_akira_iwaya