Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Potatotips3 hoshi gaki_akira_iwaya

3,678 views

Published on

#potatotips presentation by @hoshi_gaki (Akira Iwaya)

Published in: Technology
  • Be the first to comment

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 ご静聴ありがとう ございました。 ・グラデーション吹き出し ・スワイプで閉じるキーボード

×