ui
利用 SwiftUI 控件 讓你更彈性地設計專屬你的按鈕！
按鈕可以啟動 App 的特定動作，可以客製化背景，也可以加入標題或圖示。這個系統針對大部分使用狀況，提供了一些預先設計好的按鈕樣式。你也可以完全客製自己的按鈕。 － Apple 官方文件 我相信我不需要再解釋按鈕的用途，這是一個非常基本的 UI 控制元件，你在所有的 [...]
使用 IBDesignable 與 IBInspectable 製作更美觀的 UI 元件
一些開發者不喜歡使用介面建構器 (Interface Builder) 來建構 App UI。一切都可以使用程式來撰寫，即使是 UI 也不例外。我個人比較喜歡混合 Storyboard 與程式來佈局 App。 不過如果要教導初學者使如何建構 App，介面建構器比較能夠無痛上手。使用介面建構器來設計 [...]
讓 iPad App 支援 Apple Pencil 2 大大增強使用者體驗！
在 2018 年 10 月，Apple 推出了全新的 iPad Pro 和 Apple Pencil 2.0。不同於上一代的 Apple Pencil，這次官方還為開發者提供了一些有趣的 API 應用方式，以增強 App 的功能與使用者體驗 (User Experience)。在本篇教學中，我將讓你了解如何讓你的 App 支援 Apple Pencil。 來開始吧！ [...]
利用 UIViewPropertyAnimator 製作進階動畫 為 App 增強使用者體驗！
動畫很酷，它們是 iOS Human Interface Guidelines（介面設計指南）的重要組成部分。動畫可以幫助開發者吸引使用者注意重要的事情，或者替 App 添加一些樂趣。 在 iOS 中，有幾個方法可以實作動畫，最常見到的可能就是 UIView.animate(withDuration:animations:)。你亦可以使用 [...]
利用 Xcode 11 的預覽功能 輕鬆測試 App 在 Dark Mode 下的表現
前一陣子，Apple 公開了 iOS 13 第一個測試版本。對一般使用者而言，這個新版本最大的亮點一定是深色模式 (Dark mode)。在設定內滑動開啟此功能後，iOS 就會讓一切變成深色系模式。在深色模式下，電話操作系統會自動為系統內所有的 Apps 和螢幕套用深色主題。一些 [...]
IGListKit 的演化：一起來看 Instagram 如何逐步解決 App 問題！
IGListKit + MVVM 是 Instagram 對於 iOS UICollectionView UI 與數據解耦的解決方案，IGListKit 的設計理念是以數據驅動，來解決不同 Team 之間的需求，包含不同的數據與不一樣的 Layout。 有關於 Code 說明與範例，我建議你搭配原始碼參考閱讀 IGListKitArchetype。 原始 UICollectionView [...]
利用 SwiftUI 建立表單 UI 體驗更互動的開發過程！
在上一篇教學中，我們簡單介紹了 SwiftUI 的基礎知識，並帶你建構了一個簡單的使用者介面。經濟一星期的探索，即使這個框架現階段還是有些 Bug，但我真的很喜歡利用這個框架來建構使用者介面！這個框架為開發者提供了一個新的方式來開發 UI，讓你以更少的程式碼建構出相同的 [...]
iOS App 介面設計教學：如何制作表格和集合視圖的組合介面
在 iPhone 和 iPad 的很多 app 裏面，我們都會看到許多用表格視圖和集合視圖制作起來的介面，大部分應該是表格視圖和集合視圖的組合介面。比如我們在 app store 裏面的遊戲欄或者 App 欄裏面會看到由表格視圖和集合視圖組合而成的漂亮介面。 又或者，你也會在快捷指令中心、Medium [...]
實作無限分頁滾動視圖 (Scroll View) 為使用者帶來更完美的體驗和設計
所有 App 的成功，都取決於使用者是否常用這個 App（使用者留存率高 High User Retention），而成功的使用者體驗 (UX) 和界面設計對留存率就非常重要了！在設計 App 的時候，我們需要確保使用者可以利用最小限度而直覺的操作，來達到他們的目的；而且，這操作最好是一個吸引又有趣的過程。這次的教學就是希望利用客製化 [...]
你也可以自訂搖動還原 (Shake to Undo) 的功能？一起來拆解並實作吧！
在 iOS 上編輯內容的時候，如果要還原或重做步驟的話，通常可以透過搖動來呼叫出一個還原的警告： 這個搖動還原 (Shake to Undo) 功能在 UITextView 或者 UITextField 等文字編輯的 view 上是內建的，但大多數其他的 view 都沒有預設實作。還好，UIKit 其實已經幫我們做好了從動作偵測到顯示警告的部分，我們只需要提供第一響應者 [...]