Potatotips3 hoshi gaki_akira_iwaya

3,336 views
3,189 views

Published on

#potatotips presentation by @hoshi_gaki (Akira Iwaya)

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,336
On SlideShare
0
From Embeds
0
Number of Embeds
2,152
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Potatotips3 hoshi gaki_akira_iwaya

  1. 1. iOS 7 な Message App の作り方 Akira Iwaya / @hoshi_gaki
  2. 2. いわや あき ら 岩谷 明 @hoshi_gaki FRED PERRY 会員証アプリ アルバイトなプログラマ (千葉大学工学部デザイン学科4年生) フジロック用 アプリ (非公式) Summaly お手伝いしました 資生堂 店頭用商品紹介アプリ
  3. 3. iOS 7 のメッセージアプリ 1 もにょもにょ動く 2 吹き出しにグラデーションが ついてる 3 下にスワイプするとキーボード が隠れる (apple.com より)
  4. 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. 5. 吹き出しにグラデーションがついてる 2 ※自分で思いついた方法です 1. UICollectionViewLayoutAttributes のサブクラスを作る ←グラデーション用に色を保持する配列
  6. 6. 2. UICollectionViewCell のサブクラスを作る CAGradientLayer ・-(void)applyLayoutAttributes: に作ったサブクラスが渡ってくるので, に設定する ・背景色をグラデーションにするためにグラデーション用 View の +(Class)layerClass で [CAGradientLayer class] を返す self.layer.cornerRadius = 15.0f; self.layer.maskToBounds = YES で角を丸くする
  7. 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. 8. 3 下にスワイプするとキーボードが隠れる ・iOS 7 からうってつけの API が追加 scrollView.keyboardDismissMode = UIScrollViewKeyboardDismissModeInteractive; これでスワイプ時に勝手に隠してくれる。 But Message アプリや LINE などのように自動で UITextView を追従させ たりはしてくれない。
  9. 9. ・そこで ziryanov / DAKeyboardControl forked from danielamitay / DAKeyboardControl https://github.com/ziryanov/DAKeyboardControl ・fork 元のものに Autolayout + iOS 7 対応したもの
  10. 10. 以上をまとめたプロジェクトを作りました ! AIiOS7MessageSample https://github.com/akira108/AIiOS7MessageSample ・某アプリを iOS7 リデザインした風 UI ・AutoLayout による可変幅セル ・UIDynamics ・グラデーション吹き出し ・スワイプで閉じるキーボード
  11. 11. 以上をまとめたプロジェクトを作りました ! AIiOS7MessageSample https://github.com/akira108/AIiOS7MessageSample ・某アプリを iOS7 リデザインした風 UI ・AutoLayout による可変幅セル ・UIDynamics ご静聴ありがとう ございました。 ・グラデーション吹き出し ・スワイプで閉じるキーボード

×