iOS
利用 iOS 14 Vision 的手勢估測功能 實作無接觸即可滑動的 Tinder App
Vision 框架在 2017 年推出，目的是為了讓行動 App 開發者輕鬆利用電腦視覺演算法。具體來說，Vision 框架中包含了許多預先訓練好的深度學習模型，同時也能充當包裹器 (wrapper) 來快速執行你客製化的 Core ML 模型。 Apple 在 iOS 13 推出了文字辨識 (Text Recognition) 和 [...]
10 個 SwiftUI Libraries 為你大大提高開發速度！
SwiftUI 真的改變了我們設計 iOS App，以及我們對 iOS App 的印象。SwiftUI 在 WWDC 2019 亮相後，Apple 引入大量新視圖、屬性包裝器 (property wrapper) 和客製化型別，進一步完善了其功能。 但是，宣告式 (declarative) 框架仍然處於起步階段。SwiftUI 的 bugs 令我們在開發時難以使用這些框架，而且 [...]
在 SwiftUI 構建漂亮的數據視覺化工具：雷達圖 (Radar Chart)
Apple 在 2019 年推出了 SwiftUI，為我們提供了一個輕巧易用的工具，來創建使用者界面。這系列的教學文章，會讓大家看看如何利用 SwiftUI 框架，構建簡單而漂亮的數據視覺化工具 (data visualization tool)，而我們將會從雷達圖 (radar chart) 開始。 什麼是雷達圖？ 雷達圖（亦稱網路圖、蜘蛛網圖），是一種統計圖表，以同一點開始向不同方向延伸的軸，來表示不同的變量。讓我們先看看這篇文章會構建的雷達圖： [...]
在 SwiftUI 利用 Path 和 Shape 建立 iMessage 的對話框！
在這篇教學文章中，我們會學習建立 iMessage 那種有尾巴 (tail) 的對話框 (chat bubble)。這篇文章不是旨在建立一個端對端 (End-to-End) 的聊天 UI。讓我們先看看完成的範例： 實作邏輯 在 Shape Struct 中建立對話框的 Path。 這個 Shape 會以尾巴為參數，來定義形狀。 建立一個 [...]
應用 SwiftUI Path API 繪製撲克牌的四種花色！
在 SwiftUI 中，我們可以利用 Path 和 Shape 來客製化渲染 (rendering)，而 Path 又可以用來製作 Shape，也就是說，Path 就是基本的繪圖元素。 在這篇教學文章中，我們將會使用 SwiftUI Path 來建立撲克牌的四種花色。首先，讓我們來看看可以繪製甚麼類型的 Path。 Line 會添加一條直線。 [...]
利用 Swift 在 iOS 構建獨特漂亮的 QR code 視圖
QR Code 是一種認證技術，廣泛應用於行動科技領域中。iOS 內建支援創建帶有 Payload 的漂亮 QR Code 圖像。在本篇教學中，我們將會學習這個技巧。 QR code 的基本組件： Payload，多數是一個網址 QR code 錯誤修正功能 可選公司圖片／Logo 可選顏色 首先，讓我們先構建結構，然後再實作基本和漂亮的 [...]
SwiftUI TabView 教學：利用 PageTabViewStyle 建立 Paged Scrolling 視圖
在之前的這篇教學中，我們教過大家如何使用 TabView，來顯示 tab bar 界面。在 iOS 14 中，Apple 在 SwiftUI 框架引入了一個新的樣式：PageTabViewStyle，讓開發者創建頁面滾動 (paged scrolling) 界面。在這篇教學中，我們會教大家實作這種 tab 視圖樣式。 讓我們從一個簡單的 [...]
iOS 14 的 Diffable Data Source 讓你輕鬆建立和更新大量資料
在 iOS 13 中，Apple 除了引入了 Swift UI 這個宣告式 (declarative) UI 框架外，還為 UIKit 框架添加了不少新功能，當中最重要的就是 UICollectionView 的改善。 準確來說，新的 Compositional Layouts 和 Diffable Data Sources APIs，讓我們更容易構建進階 CollectionView 佈局和集中的資料源。 [...]
iOS 14 的 SwiftUI Toolbar 聰明地在佈局放置視圖
在 WWDC 2020，Toolbar 可以說是第二版 SwiftUI 中最有趣的新功能。 toolbar 是一個修飾器，讓你放置一組視圖控件，並把控件放置於想要的位置。 在預設設定下，SwiftUI 可以利用 toolbar 修飾器，聰明地把視圖設定於想要的位置，但你也可以利用 ToolbarItem 明確地設置其位置。 [...]
Flutter CI/CD 全自動化詳細解析：一個產品 App 的環境管理
嗨大家好，我是 yu，幾個月前我寫下了 iOS CI/CD 的自動化詳細解析（iOS App 環境管理 : 靈活運用 Xcode Scheme、GitLab 和 Fastlane 設置不同的開發環境）。在那篇文章中，我們模擬了各種實戰中會遇到的環境狀況，以及如何針對這些狀況分配自動化工具，完成我們期望而且環境乾淨的技巧。時至今日，Flutter [...]