Swift — 簡單動手做一個懸浮拖曳視窗

讓我們看看如何實作一個可以拖曳的懸浮視圖吧!

Jeremy Xue
Jeremy Xue ‘s Blog
5 min readOct 11, 2020

--

❖ 前言:

最近碰到了一個案子的特殊需求是需要製作一個懸浮視窗,並且使用者可以透過拖曳的方式控制視圖的位置,並且可以透過向下拖移來關閉該頁面。用 Facebook APP 來做說明的話,有點類似於這種效果:

也感謝工作室內部的 iOS 開發者提供了類似的功能框架名稱,叫做 Floating Panel,有興趣的讀者可以點擊以下 Github 連結前往查看:

而這次我們要來自己來簡單動手做做看,看要如何能夠做出一個拖曳的懸浮視窗。

❖ 實作

功能須知:

在實作之前,你可能需要簡單了解以下內容:

  1. 拖曳手勢(UIPanGestureRecognizer
  2. 動畫器(UIViewPropertyAnimator

關於 UIViewPropertyAnimator 可以參考我之前的幾篇文章,你會對於在 Swift 中用動畫器來製作動畫有一定的了解:

UI 畫面:

這邊我們就簡單的做一個懸浮視圖的頁面即可,如下圖:

實作拖曳動畫:

首先我們我們先建立一個 UIViewController 稱為 FloatingViewController 做為我們的懸浮視圖的控制頁面,接著我們需要在此控制器中建立一個 UIViewPropertyAnimator 來為之後的動畫效果做準備。

接著我們在 viewDidLoad 以及 viewWillAppear 中添加以下程式碼,用來添加懸浮視圖的出現動畫效果:

接著,是我們本篇的重頭戲,也就是拖曳與位移動畫的配合。首先到我們拖曳的方法中添加以下程式碼,並且我們會在拖曳狀態為 .begin.changed 以及 .ended 的狀態下進行對動畫器的操作:

可以從以上程式碼看出來製作一個懸浮拖曳視窗並不難,我們可以使用動畫器所提供部分屬性以及方法就能夠簡單完成此效果。

接著最後我們還需要在 present 此控制器的地方設定以下內容:

透過設定 modalTransitionStyle 可以讓我們在轉場效果上比較不會突兀,並且透過 modalPresentationStyle 來將我們的控制器的畫面覆蓋在原有的控制器畫面上,達成看似懸浮的效果。

完成效果:

附上 Github 連結:

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]