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