#2 「彼得潘作業2」UI元件 Segment Control

Segment Control是一種水平方向的控制元件，直接點擊或滑動皆可切換區段，是一種常用於畫面分頁切換的元件．

Apple Developer Documentation

首先新增一Segment Control元件放入View中

屬性segments

segments的數字可以決定按鈕數量

屬性segment

segment分別控制元件的每一個按鈕，序列值從0開始，所以第一個按鈕就是Segment 0

segment下面的屬性從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值