iOSのUI構築小技集（小さなとこから始められる編）
0 likes1,203 views
社内イベント「ever sense × Green Snap 合同勉強会」での登壇資料になります。 今回はいつもの自作サンプルに関する発表ではなく、新規アプリの開発業務の中で活用したレイアウトやアニメーションに関連するUIの小技の一例についてご紹介しました。 お気軽に試せるものもあるので、ご参考になれば幸いです。
![こんな感じで実装してみた一例
ContainerViewとNotificationCenterを使ってコンテンツの高さを合わせる
ContainerView
UITableView
(News表示用)
News表示用ViewControllerの`viewDidAppear`
でMainViewControllerにNotificationを送り、
ContainerView高さ = News表示長さにする。
NewsViewControllerMainViewController ... ニュースセル（可変）
Notification
Embed Segue
... ニュース用記事セル（可変）
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
if recentNewsList.count > 0 {
let height = recentNewsTableView.contentSize.height
NotificationCenter.default.post(name: Notification.Name(rawValue: LoadLatestNews), object: self,
userInfo: ["height": height])
}
}
@objc func receiveLoadLatestNewsNotification(_ notification: Notification) {
if let height = notification.userInfo?["height"] as? CGFloat {
latestNewsContainerViewHeight.constant = height
}
...他に実行したい
}
受信側のコード:
送信側のコード: ※ 描画され終わるまでcontentSizeがわからない
※ 高さのconstantをコンテンツの高さに合わせる](https://image.slidesharecdn.com/iosuiminitips-180531151738/85/iOS-UI-5-320.jpg)
![実際のコードはこんな感じになる
addTargetをTouchDown時とTouchUp時の両方に対して付与する
// ボタンの初期化処理
private func setupButton() {
// TouchUp・TouchDownの時のイベントを設定する（完了時の具体的な処理はTouchUp側で設定すること）
button.addTarget(self, action: #selector(self.onDownButton(sender:)), for: .touchDown)
button.addTarget(self, action: #selector(self.onUpButton(sender:)), for: [.touchUpInside, .touchUpOutside])
}
// 画像の伸縮アニメーションはアファイン変換を使って行う
@objc private func onDownButton(sender: UIButton) {
UIView.animate(withDuration: 0.05, animations: {
self.buttonWrappedView.transform = CGAffineTransform(scaleX: 0.96, y: 0.96)
}, completion: nil)
}
@objc private func onUpButton(sender: UIButton) {
UIView.animate(withDuration: 0.05, animations: {
self.buttonWrappedView.transform = CGAffineTransform(scaleX: 1, y: 1)
}, completion: { finished in
// TODO: ボタンタップ時の具体的な処理（データ登録等はこのタイミングで実装する）
})
}](https://image.slidesharecdn.com/iosuiminitips-180531151738/85/iOS-UI-6-320.jpg)
![UIView.animateKeyframes()を使った実装Tips
異なるアニメーションを連鎖した形に実行することができる
Touch Up/Downの区別をしない場合は下記のような実装も可能
ボタンの動き: 押下時バウンド + 背景色クロスフェード
// 体調入力画面で体調情報を入力するボタン用のViewへ拡大縮小アニメーションを付与する
static func bounceButtonBackgroundViewForInputHealthConditions(targetView: UIView, duration: TimeInterval) {
// 縮小するパーセントと開始を遅延する秒数
let shrinkingScale: CGFloat = 0.96
let delayTime: TimeInterval = 0.00
// ボタン用のViewが縮むようにバウンドするアニメーションを付与する
UIView.animateKeyframes(withDuration: duration, delay: delayTime, options: [.autoreverse], animations: {
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 1.0, animations: {
targetView.transform = CGAffineTransform(scaleX: shrinkingScale, y: shrinkingScale)
})
UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 1.0, animations: {
targetView.transform = CGAffineTransform.identity
})
})
}
①
②①
②
ボタンが縮小する
ボタンが元に戻る](https://image.slidesharecdn.com/iosuiminitips-180531151738/85/iOS-UI-8-320.jpg)
![選定および実装するにあたって参考にした資料（1）
・Core Animationの基礎的なところ:
http://obc-fight.blogspot.jp/2012/10/Core-Animation-fundamental.html
・iOSアプリ開発でアニメーションするなら押さえておきたい基礎
https://qiita.com/hachinobu/items/57d4c305c907805b4a53
・Swiftでアニメーションの連続実行をしてみる話
https://qiita.com/lovee/items/460cbb02a345e0ff7910
・Swiftでアニメーション[CoreAnimation編]
https://qiita.com/h_nagami/items/0ad8f8ef5bc23de21e1e
・Core Animation 中級編
https://qiita.com/inamiy/items/bdc0eb403852178c4ea7
・パスに沿ってアニメーションさせる
https://qiita.com/shu223/items/c15547667f8318d4acfe
・Swift アニメーション実装
https://www.lanches.co.jp/blog/7323](https://image.slidesharecdn.com/iosuiminitips-180531151738/85/iOS-UI-13-320.jpg)
iOSのUI構築小技集（小さなとこから始められる編）
- 1. iOSのUI構築小技集 （小さなとこから始められる編） 2018/05/31 ever sense × Green Snap 合同勉強会 @ ever sense inc. Fumiya Sakai
- 2. 自己紹介 ・酒井 文也 （Fumiya Sakai） ・ever sense. inc エンジニア ・Designer → ServerSide Engineer → AppDeveloper Accounts ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Twitter: https://twitter.com/fumiyasac ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github Who are you? Library (Personal) Products (ever sense. inc) 他は、 React・Go・Kotlin に関心ありかも...
- 3. 今回お伝えしたいと思っているところ ほんの少しだけのコード実装や工夫をすることで実現できるUI小技集 その1. 簡単見えて実は複雑そうなレイアウトをいかに実現するか？ その2. 少ないコードとアニメーションで実現する小技 その3. リッチなアニメーションを実現するための手法 その4. ライブラリを使う際に自分なりに気をつけていること
- 4. 簡単に見えても実は複雑そうなレイアウトの実現 テキストが可変になった際でも崩れないようによしなにする工夫 ... 高さ固定 ... 高さ可変 ① ② ベースはUIScrollView + UIStackViewの中に、 ・それぞれのボタンや表示要素に関するView × N個 ・最新ニュースを表示するUITableView × 1個 ① タイトルやメッセージの長さは基本的に可変。 ② セル1個の高さは75px固定だがセル個数が変化。 また中のセルをタップしたら遷移する。 可変になる要素が多い場合はSelf-Sizingはもちろんのこと、 UITableViewやUICollectionViewを入れ子にする構造が求められてしまう。 ※ Webだと当たり前に実現できそうなことが結構めんどくさい場合がままある。 ここがポイント !!!
- 5. こんな感じで実装してみた一例 ContainerViewとNotificationCenterを使ってコンテンツの高さを合わせる ContainerView UITableView (News表示用) News表示用ViewControllerの`viewDidAppear` でMainViewControllerにNotificationを送り、 ContainerView高さ = News表示長さにする。 NewsViewControllerMainViewController ... ニュースセル（可変） Notification Embed Segue ... ニュース用記事セル（可変） override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) if recentNewsList.count > 0 { let height = recentNewsTableView.contentSize.height NotificationCenter.default.post(name: Notification.Name(rawValue: LoadLatestNews), object: self, userInfo: ["height": height]) } } @objc func receiveLoadLatestNewsNotification(_ notification: Notification) { if let height = notification.userInfo?["height"] as? CGFloat { latestNewsContainerViewHeight.constant = height } ...他に実行したい } 受信側のコード: 送信側のコード: ※ 描画され終わるまでcontentSizeがわからない ※ 高さのconstantをコンテンツの高さに合わせる
- 6. 実際のコードはこんな感じになる addTargetをTouchDown時とTouchUp時の両方に対して付与する // ボタンの初期化処理 private func setupButton() { // TouchUp・TouchDownの時のイベントを設定する（完了時の具体的な処理はTouchUp側で設定すること） button.addTarget(self, action: #selector(self.onDownButton(sender:)), for: .touchDown) button.addTarget(self, action: #selector(self.onUpButton(sender:)), for: [.touchUpInside, .touchUpOutside]) } // 画像の伸縮アニメーションはアファイン変換を使って行う @objc private func onDownButton(sender: UIButton) { UIView.animate(withDuration: 0.05, animations: { self.buttonWrappedView.transform = CGAffineTransform(scaleX: 0.96, y: 0.96) }, completion: nil) } @objc private func onUpButton(sender: UIButton) { UIView.animate(withDuration: 0.05, animations: { self.buttonWrappedView.transform = CGAffineTransform(scaleX: 1, y: 1) }, completion: { finished in // TODO: ボタンタップ時の具体的な処理（データ登録等はこのタイミングで実装する） }) }
- 7. ボタン押下時にふわっとした押し心地を作る Spotifyのシャッフルプレイボタンの様な動きの表現 メイン機能ボタン押下時はボタンの背景を 96%の大きさに変更（CGAffineTransform） 押下時 平常時 参考アプリ: Spotify （ボタン押下時にバウンド） → UIButton透明 → 背景付UIView // ボタン用の初期設定（buttonWrappedViewの中にbuttonを上下 左右0の制約で配置） @IBOutlet weak private var buttonWrappedView: UIView! @IBOutlet weak private var button: UIButton! // 画像についてはUIViewの背景として設定すると微調整がしやすいと 思います。 buttonWrappedView.backgroundColor = UIColor(patternImage: UIImage(named: "xxx")!)
- 8. UIView.animateKeyframes()を使った実装Tips 異なるアニメーションを連鎖した形に実行することができる Touch Up/Downの区別をしない場合は下記のような実装も可能 ボタンの動き: 押下時バウンド + 背景色クロスフェード // 体調入力画面で体調情報を入力するボタン用のViewへ拡大縮小アニメーションを付与する static func bounceButtonBackgroundViewForInputHealthConditions(targetView: UIView, duration: TimeInterval) { // 縮小するパーセントと開始を遅延する秒数 let shrinkingScale: CGFloat = 0.96 let delayTime: TimeInterval = 0.00 // ボタン用のViewが縮むようにバウンドするアニメーションを付与する UIView.animateKeyframes(withDuration: duration, delay: delayTime, options: [.autoreverse], animations: { UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 1.0, animations: { targetView.transform = CGAffineTransform(scaleX: shrinkingScale, y: shrinkingScale) }) UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 1.0, animations: { targetView.transform = CGAffineTransform.identity }) }) } ① ②① ② ボタンが縮小する ボタンが元に戻る
- 9. CoreAnimationを利用した表現 擬似的なページネーションや日付の切り替えの表現に用いた例 作り方の解説： https://github.com/fumiyasac/AnimationCounterSample 日めくりカレンダーみたいな動きを「マスク用UIViewとCoreAnimation」で作る → 下のViewを包んでいる親View（マスクになる） → 記録データを表示するView その他に使っている事例： → 戻る & 進むボタン → 日付表示ラベル ボタン押下時にデータの切り替えと一緒に戻るor進む動きを付与する。
- 10. 実際のコードはこんな感じになる 表示するデータを切り替える際にCoreAnimationを実行させる private func animateWeightView(isPrevious: Bool = true) { // アニメーション対象のViewの親にあたるViewをマスクにする inputWeightView.superview?.layer.masksToBounds = true // アニメーションの設定を行う let transition = CATransition() transition.type = kCATransitionPush transition.duration = 0.16 transition.timingFunction = CAMediaTimingFunction( name: kCAMediaTimingFunctionEaseInEaseOut ) var key: String if isPrevious { transition.subtype = kCATransitionFromLeft key = "previous" } else { transition.subtype = kCATransitionFromRight key = "next" } inputWeightView.layer.removeAllAnimations() inputWeightView.layer.add(transition, forKey: key) } @IBAction func previousDateButtonTapped(_ sender: Any) { // 戻るボタンクリック時には前の日のデータがテキストフィールドに反映される setSelectedDate() setWeightTextField() animateWeightView(isPrevious: true) } @IBAction func nextDateButtonTapped(_ sender: Any) { // 戻るボタンクリック時には次の日のデータがテキストフィールドに反映される setSelectedDate() setWeightTextField() animateWeightView(isPrevious: false) }
- 11. アニメーション素材を使った表現 AnimationPNGを用いたリッチなアニメーション表現 入力前の状態 入力後の状態 デザイナー エンジニア データが入力された際に、 チェックマークが入る様な アニメーションを再生する 役割： デザインの適用 APNGに関する部分はAPNGKitを活用 https://github.com/onevcat/ APNGKit 役割： APNGファイル作成＆レイアウト 使用するツール類 AfterEffect・Protto.io・XD等 デザイナー＆エンジニアの共同作業: 役割の違いはあれどチェックや動作検証はお互いに細かく惜しまずに行う！ 連携作業 APNGはアルファチャンネルに対応しているので影や境界線も綺麗に表示できます。
- 12. APNGKitを実装するための準備 おおまかな準備と手順を記載しています 1. まずはCocoaPodsなどでライブラリをインストールする 2. 作成したAPNGファイルをXCodeの中に入れる APNGファイルを入れて管理する際のポイント: Assets.xcassets内ではなく.swiftファイルとかと同様に管理すること。 3. StoryboardやXibにUIViewを配置して、このクラス名を下記のように変更する ※ コードで利用する場合でももちろん活用できます。 UIImageViewではなくUIViewなのがポイント:
- 13. 選定および実装するにあたって参考にした資料（1） ・Core Animationの基礎的なところ: http://obc-fight.blogspot.jp/2012/10/Core-Animation-fundamental.html ・iOSアプリ開発でアニメーションするなら押さえておきたい基礎 https://qiita.com/hachinobu/items/57d4c305c907805b4a53 ・Swiftでアニメーションの連続実行をしてみる話 https://qiita.com/lovee/items/460cbb02a345e0ff7910 ・Swiftでアニメーション[CoreAnimation編] https://qiita.com/h_nagami/items/0ad8f8ef5bc23de21e1e ・Core Animation 中級編 https://qiita.com/inamiy/items/bdc0eb403852178c4ea7 ・パスに沿ってアニメーションさせる https://qiita.com/shu223/items/c15547667f8318d4acfe ・Swift アニメーション実装 https://www.lanches.co.jp/blog/7323
- 14. 選定および実装するにあたって参考にした資料（2） ・心地よいアニメーションを求めて http://techlife.cookpad.com/entry/2015/10/02/180247 ・A look at UIView Animation Curves (Part 1 ~ Part 3) https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-1-191d9e6de0ab https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-2-b68412e441bf https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-3-edde651b6a7a Appendix: APNGに関する参考資料 ・【つくってみた！】APNGで高解像度アニメーション！ http://www.nowhere.co.jp/blog/archives/20160502-170036.html ・GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう https://ics.media/entry/2441
- 15. ライブラリを使うか否かの（自分なり）戦略 どんな時に使うか？の判断軸を持っておくと良い その1. ライブラリを知る その2. スター数やContribution・Issueをチェック その3. 実際に素振りしてみる → 情報源はなんでもあるけど、iOS Cookiesやgithubを直接調べることが多い → スター数やIssue数はあくまで指標で、実際にはコードまである程度見る → 導入のしやすさもポイントの1つなのでドキュメントの充実具合も確認 UIを作る際にライブラリにする？それともDIYする？の切り分けと実装のアイデア帳 (@Swift Tweets 2018 Spring) https://qiita.com/fumiyasac@github/items/144aec1e1726500d9d5a
- 16. まとめ 意外と少しの工夫だけでUIに心地よさを伴う動きを実現する余地がある その1. UIKitの特性への理解を深めておくことがまずスタート その2. アニメーションを特定のポイント入れる場合は機会とタイミングが大事 その3. UIViewのクラスメソッド以外の実装手段やアニメーション素材を適切に活用する その4. ライブラリを使う際には仕様や改変の余地といった観点を持って選択する その5. そして一番大切なのはUIのバランスということを忘れない