#2 「彼得潘作業2」UI元件 Segment Control
Segment Control是一種水平方向的控制元件,直接點擊或滑動皆可切換區段,是一種常用於畫面分頁切換的元件.
首先新增一Segment Control元件放入View中
屬性segments
segments的數字可以決定按鈕數量屬性segment
segment分別控制元件的每一個按鈕,序列值從0開始,所以第一個按鈕就是Segment 0segment下面的屬性從title到content offset,都是分別控制各自的按鈕,如上圖目前是選擇第一個按鈕的所有屬性屬性Title
設定按鈕的標題屬性Image
屬性image是將按鈕文字改成圖片,設定圖片後title自動失效,並且新增symbol scale & render mode兩個屬性可供選擇屬性Symbol Scale & Render Mode
symbol scale可以調整image的大小Render Mode可以調整image的顏色細節,例如圖片的主色跟副色,在此不深入探討屬性Behavior
不勾選Enabled則該按鈕失效無法選擇勾選selected則該按鈕為預設選取的按鈕,不勾選則取消預設若在別的按鈕勾選selected,回到原按鈕則selected勾選自動取消屬性Content Offset
content offset可以透過x,y軸的方式,調整按鈕image或title的相對位置,x,y都是0則位於中央如何調整高度?
研究segment control元件一段時間後,會好奇該如何調整元件的高度,在storyboard拉元件時就會發現只能水平調整不能上下拉大,如上圖手動設定height數值也不行,難道segment control不能調整高度嗎?當然不是的,有兩個方法可以條整高度.
方法一:使用User defined runtime attributes
在User defined runtime attributes內增加key,value,設定如上圖,value的部分由左至右是x軸,y軸以及元件的width,height方法二: 使用程式設定元件的frame屬性
用segment變數抓取畫面的元件,手動設定frame屬性的CGRect值