ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
•
2 recomendaciones•3,450 vistas
Shinagawa.swift #1での登壇資料になります。UIを作成する上に置いてライブラリを活用する機会は多いかと思います。今回はよくあるUI系ライブラリに近しい動きをUIKitだけで作成する場合の実装のアイデアやポイントの解説をまとめてみました。 【サンプル】 https://github.com/fumiyasac/SimplySideMenuSample 【詳細記事】 http://qiita.com/fumiyasac@github/items/eb5b17ab90f5aa27b793
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (18)
Similar a ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
Similar a ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1) (15)
Más de Fumiya Sakai
Más de Fumiya Sakai (20)
Último
Último (12)
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
- 6. ✦ ライブラリを用いずにUI作成をするための自分が感じた勘所 取り組んだ所感と参考になった書籍 UIKitに関する部分は使っていないと忘れてしまいがちな部分なのでたまに見返すと発見があったりします。 ★UIパーツやライフサイクル等に対する理解 ★参考になった書籍 ・iOSアプリのUI作成で必要なプロパティ・メソッドのリファレンス ・ライフサイクルやそもそもの理屈の部分にも触れられている Delegate & Protocol Lifecycle 【UIパーツに関する理解＆上記の4つに関する知識をしっかりと】 【UIKitの基本から理解したり、逆引きをする上でも助かります】 Swift3でも適宜読み替えて、差異がある部分についてはサイト等を活用する ・プッシュ通知やURLスキーム等の部分の解説も充実している ※Swift2.0ぐらいの時の本なので適宜読み替えが必要です。 Design Pattern User Interaction UIKit & Swiftプログラミング（2015年5月）
- 11. ✦ 開閉処理を行う際の今回の処理ポイント 1. ドラッグで下に隠れているサブメニューの開閉① ★（閉じている）コンテンツを表示している状態からいかに開くようにさせるか？ 開く処理と閉じる処理を今回は別々に実装をしています。（もっとスマートな方法があれば知りたいです！） コンテンツを表示しているContainerViewの左端のPanGestureを検知して、変化量を加算する ★（開いている）開いている状態から閉じようとするドラッグを実現させるか？ 一番おおもとのView(self.view)のタッチイベントを受け取り、その変化量をContainerViewに加算する 画面左隅のPanGestureを取得する タッチイベントの取得処理は一番おおもとのViewController.swiftに設定する UIScreenEdgePanGestureRecognizer //左隅部分のGestureRecognizerを作成する（デリゲートの設定と検知位置を決める） let edgeGesture = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(ViewController.edgeTapGesture(sender:))) edgeGesture.delegate = self edgeGesture.edges = .left //初期状態では左隅部分のGestureRecognizerを有効にしておく mainContentsContainer.addGestureRecognizer(edgeGesture)
- 17. ✦ 位置補正の処理はUIButtonのタグの値(Int)を利用して取得する UIButtonを配置する際にbutton.tagで順番の値を保持しておき、ボタンタップ時にその値を動きに活用する。 ★引数のpage: Intの部分にタグの値を入れてアニメーションや位置調整に利用する 2. カテゴリー選択ボタン部分のスクロール＆ ボタンタップ時の位置補正② UIScrollView内に配置したボタンのタップ時のアクションだけで実現ができる。 //ボタンのスクロールビューをスライドさせる fileprivate func moveFormNowButtonContentsScrollView(page: Int) { �//Case1:ボタンを内包しているスクロールビューの位置変更をする �if page > 0 && page < (ScrollButtonList.buttonList.count - 1) { scrollButtonOffsetX = Int(multiButtonScrollView.frame.width) / 3 * (page - 1) �//Case2:一番最初のpage番号のときの移動量 �} else if page == 0 { ����scrollButtonOffsetX = 0 �//Case3:一番最後のpage番号のときの移動量 �} else if page == (ScrollButtonList.buttonList.count - 1) { ����scrollButtonOffsetX = Int(multiButtonScrollView.frame.width) * (ScrollButtonList.buttonList.count / 3 - 1) �} UIView.animate(withDuration: 0.26, delay: 0, options: [], animations: { ����self.multiButtonScrollView.contentOffset = CGPoint( x: self.scrollButtonOffsetX, y: 0 � )}, completion: nil) } コンテンツの切り替え等と 併用して使われる事が多いです。 UIScrollViewDelegateと 併用すると色々工夫も可能です。
- 18. ✦ スクロールの開始位置と終了位置の差分を取得して実現する UIScrollViewDelegateに関しては動きを持たせるUIを作成する際には重要なポイントになるのでしっかりと。 ★UITableViewはUIScrollViewDelegateを利用できるのでこれを活用する 3. 下向きスクロールでナビゲーションを隠す動き① UIScrollViewDelegateでスクロールのタイミングで起こる位置の取得処理に関する記載を行う //スクロール開始位置を取得 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { //スクロール開始位置を格納するメンバ変数を準備しておき、スクロール開始したY座標を入れる scrollBeginingPoint = scrollView.contentOffset } //スクロールが検知された時に実行される処理 func scrollViewDidScroll(_ scrollView: UIScrollView) { //スクロール終了時のy座標を取得する let currentPoint = scrollView.contentOffset //下方向のスクロールを行った場合の処理 if scrollBeginingPoint.y < currentPoint.y { //（省略）自作メニューを隠して、変化量が40以上であればナビゲーションバーも一緒に隠す } else { //（省略）ナビゲーションバーを表示して、変化量が40以上であれば自作メニューも一緒に表示 } }
- 19. ✦ スクロールの変化量に応じてUIパーツの動きを実装する スクロールの向きと変化量に応じてNavigationBarと動くボタン部分を動かすタイミングをハンドリングする。 ★下記のような形でパーツが並ぶ (お互いのパーツはAutoLayoutで引っ付くように設定) 3. 下向きスクロールでナビゲーションを隠す動き② StatusBar (背景のUIViewをコードで配置する) NavigationBar (スクロール量に応じて変化) 動くボタン部分 (スクロール量に応じて変化) //NavigationBarを隠すメソッド navigationController?.setNavigationBarHidden(Bool型 true「隠す」/ false「表示」, animated: Bool型 アニメーション有無) ★例. 下方向にスクロールを行った場合の変化量に対する処理 //変更したAutoLayoutのConstant値を適用する topMenuConstraint.constant = 動くボタン部分のheight UIView.animate(withDuration: 0.26, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: { self.view.layoutIfNeeded() }, completion: { finished in }) ② 変化量が40以上の場合 ① 変化量が0以上40未満の場合
- 20. ✦ UITableViewCell内に画像を配置して上下の制約を動的に変更する セルに配置した画像の上下制約をOutlet接続をして値を変化できるようにし、変化処理メソッドを準備する。 ★セルいっぱいに画像を配置して上下の制約をOutletで接続する 4. UITableViewに配置した画像にパララックス付与① 上の制約をOutlet接続：topConstraint 下の制約をOutlet接続：bottomConstraint ★UITableViewCell内のメソッドの役割 override func awakeFromNib() { super.awakeFromNib() //（省略）意図的にずらした値を視差効果の計算用の変数にそれぞれ格納する } ② 背景画像のAutoLayoutのconstant値を変更するメソッドを準備する ① 初期化のタイミング時 UIImageView (上下左右のConstraintを0) //背景画像にかけられているAutoLayoutの制約を再計算して制約をかけ直す func setBackgroundOffset(_ offset: CGFloat) { let boundOffset = max(0, min(1, offset)) let pixelOffset = (1 - boundOffset) * 2 * imageParallaxFactor topConstraint.constant = imgBackTopInitial - pixelOffset bottomConstraint.constant = imgBackBottomInitial + pixelOffset }
- 21. スクロールの検知時＆表示されていないセルに対してUITableViewCell(PictureCell)のメソッドを実行する。 4. UITableViewに配置した画像にパララックス付与② //スクロールが検知された時に実行される処理 func scrollViewDidScroll(_ scrollView: UIScrollView) { //パララックスをするテーブルビューの場合 if scrollView == parallaxTableView { //画面に表示されているセルの画像のオフセット値を変更する for indexPath in parallaxTableView.indexPathsForVisibleRows! { setCellImageOffset(parallaxTableView.cellForRow(at: indexPath) as! PictureCell, indexPath: indexPath) } //(以下省略) } } //まだ表示されていないセルに対しても同様の効果をつける func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let imageCell = cell as! PictureCell setCellImageOffset(imageCell, indexPath: indexPath) } //UITableViewCell内のオフセット値を再計算して視差効果をつける fileprivate func setCellImageOffset(_ cell: PictureCell, indexPath: IndexPath) { let cellFrame = parallaxTableView.rectForRow(at: indexPath) let cellFrameInTable = parallaxTableView.convert(cellFrame, to: parallaxTableView.superview) let cellOffset = cellFrameInTable.origin.y + cellFrameInTable.size.height let tableHeight = parallaxTableView.bounds.size.height + cellFrameInTable.size.height let cellOffsetFactor = cellOffset / tableHeight cell.setBackgroundOffset(cellOffsetFactor) } セル側のメソッドを呼び出す UITableViewDelegate UIScrollViewDelegate