IOS UI 範例

Leon
彼得潘的 Swift iOS / Flutter App 開發教室
5 min readMar 12, 2020

學習IOS剛開始會需要熟悉一下UI工具,想想就來做一個範本。
有需要可從文末GitHub下載來參考或測試。這次做的UI範例如下圖。

每個範例的屬性設定及顯示結果,再參考對應右側屬性頁籤欄位。

Segmented Control

Segments:設定頁籤的數量
Segment:選擇不同頁籤分別做設定
Title:每個頁籤的顯示文字
Image:頁籤顯示改為圖示(設定後Title不顯示),建議可使用Xcode原生SF Symbols
Selected Tint:被選擇的頁籤顯示的顏色(範例為紅色)
Behavior Selected:打勾可設定預設選擇的頁籤

Slider

Value:Slider預設初始值
Minimum
:Slider最小值
Maximum
:Slider最大值
Min Image
:最小值端顯示圖示(常見範例如音量大小圖示)
Max Image
:最大值端顯示圖示
Min Track
:減值端的線條顏色(範例為綠色)
Max Track
:加值端的線條顏色(範例為紅色)
Thumb Tint
:控制鈕的顏色(範例為藍色)

Switch

State:預設值
On Tint:設定選到ON時的底色
Thumb Tint:控制鈕的顏色

Activity Indicator View

Style:設定樣式(大小及基本顏色)
Color:設定顏色
Animating:是否要啟用動態效果

Progress View

Style:進度條樣式預設僅有兩種
Progress:預設初始值
Progress Tint:目前進度條顏色
Track Tint:未完成進度條顏色
Progress Image:目前進度條自訂圖片
Track Image:未完成進度條自訂圖片

Visual Effect View with Blur

Blur Style:遮罩樣式,可選擇的樣式如下,建議直接測試看實際效果

Alpha:遮罩透明度(1為最深可視為100%,範例中設定0.8可視為80)

Page Control

# of Pages:總分頁數
Current:預設當前分頁(從0開始計數,如設定為4預設則為第5頁)
Hides for Single Page:分頁只有一頁時隱藏分頁元件
Tint Color:當前分頁的顯示顏色
Current Page:其他分頁的顯示顏色
PS:因UI本身有白色,為能看到分頁UI,故此範例先將底色設為灰色

Date Picker

Mode:格式選擇(時間、日期、日期時間、倒數計時)
Locale:區域設定
Interval:設定可選分鐘數間隔(Mode設定為日期時則無此選項)
Date:設定取系統當前時間或自訂預設時間
Minimum Date:設定最小時間
Maximum Date:設定最大時間

Scroll View

contentSize:設定Scroll View內容值寬及高(寬,高),與View的寛高不同橫向範例中View寬設為414,但內容值寬為828,View僅能顯示前半段的內容,剩下內容需用Scroll滑動才能看到。

Paging Enabled:勾選啟用分頁模式,根據滑動的範圍決定維持原頁或是跳轉至下頁

--

--