#6 利用 page control，segmented control，button & gesture 更換內容
作業：利用 page control，segmented control，button & gesture 更換內容
參考愛樂電台的節目表來進行這次的練習
使用的功能
page control
segmented control
button
swipe gesture
ImageView播放連續動畫(gif)
畫面結構
三組資料 Array
[圖片名稱]
let imageNameArr: [String] = ["20230722155326_copy1","20230722155326_copy2","20230722155326_copy3","20230722155326_copy4","20230722155326_copy5","20230722155326_copy6","20230722155326_copy7","20230722155326_copy8","20230722155326_copy9","20230722155326_copy10","20230722155326_copy11","20230722155326_copy12","20230722155326_copy13"][節目名稱，主持人，開始時間，結束時間]
let infoDataArr: [[String]] =
[
["台北爵士夜","沈鴻元","00:00","0200"],
["音樂水龍頭","劉昱沁","02:00","0700"],
["音樂禪","王世強","07:00","0800"],
...
][節目簡述]
let descArr: [String] =
[
"靈頓公爵說：「沒有搖擺，就沒有爵士！」\n\n菜鳥帕克說：「你若不置身其中，就無法演奏出真正的爵士！」\n\n金鐘獎主持人，「臺灣爵士一哥」沈鴻元，盡情搖擺，經典回顧！",
"無論您是日出而作、日落而息的生活模式，或是晝伏夜出的夜貓子！就讓音樂舒緩您白天壓力過後的情緒，穩定您夜裡清醒時的思緒！",
"行亦禪，坐亦禪，音樂讓您神往，韻律讓您超然...",
...
]處理過程
1. 在 storyBoard 先將畫面佈置完成
2. 加入 online 時的頁面呈現
透過 Date 取得目前的時間，並格式化為 HHmm
func GetNow() -> Int {
let now = Date.now
let nowFormat = DateFormatter()
nowFormat.locale = Locale(identifier: "zh")
nowFormat.dateFormat = "HHmm"
return Int(nowFormat.string(from: now)) ?? defaultTime //預設值2359
}再透過 for 迴圈比對節目Array的結束時間，取得目前線上節目的 index
func GetOnLineIdx(HHmm: Int) -> Int {
var _nowIdx = 0
for index in (0...infoDataArr.count-1) {
let endTime: Int = Int(infoDataArr[index][3]) ?? defaultTime
if HHmm < endTime {
_nowIdx = index
break
}
}
return _nowIdx
}如果目前的時間介於該節目的播出時間，則
顯示音波的 gif 動畫與麥克風的上色
3. 處理左右箭頭按鈕的執行動作來顯示節目
給定共用變數，App viewDidLoad() 時，賦予目前線上節目的 index
var selectedIdx: Int = -1 //選擇的 index點選左側按鈕時 index-1，透過加上總數後再取餘數，使得畫面可以循環顯示
@IBAction func PrevBtn(_ sender: Any) {
selectedIdx = (selectedIdx + infoDataArr.count - 1) % infoDataArr.count
GenView(idx: selectedIdx, type: "set")
}點選右側按鈕亦同
@IBAction func NextBtn(_ sender: Any) {
selectedIdx = (selectedIdx + 1) % infoDataArr.count
GenView(idx: selectedIdx, type: "set")
}4. 加入兩個 swipe gesture recognizer，讓 App 可以透過手勢左右滑動來觀看上一則/下一則資訊
加入的 swipe gesture recognizer 放到想到關聯的元件
並且將名稱加入易辨識的文字 Left… / Right…
再將左右箭頭按鈕的 IBAction 關聯到 swipe gesture recognizer
5. 設定 page control 來控制節目的呈現
頁面呈現邏輯：點選小圓點只會跳下一個 / 上一個，不會直接跳到點選的小圓點。
@IBAction func changePageControl(_ sender: Any) {
selectedIdx = ShowUIPageControl.currentPage
GenView(idx: selectedIdx, type: "set")
}6. 使用 Segment Control ，讓使用者可以直接點選該節目與呈現
原本想說只使用一組 Segment Control ，當整天的節目名稱放入 title 之後，因為字數關係，只看到一條 ..|..|.. 😱
所以決定使用五組 Segment Control，結果翻車了
請教 peter 後得到一組關鍵密碼
將 selectedSegmentIndex 設定為 UISegmentedControl.noSegment
就可以呈現未選取狀態
故執行後的動作為
清除所有 Segment Control 狀態
func OffSegmentSelected() {
let segmentArr: [UISegmentedControl] = [title123UISegmentedControl, title456UISegmentedControl, title789UISegmentedControl, title101112UISegmentedControl, title13UISegmentedControl]
for idx in (0...segmentArr.count-1) {
segmentArr[idx].selectedSegmentIndex = UISegmentedControl.noSegment
segmentArr[idx].tintColor = UIColor.lightGray
segmentArr[idx].setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .selected)
segmentArr[idx].setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.systemGray], for: .normal)
}
}取得 selectedSegmentIndex (& 配合組數微調index) 並更新共用的 index 與畫面
@IBAction func sg1SegmentedControl(_ sender: Any) {
selectedIdx = title123UISegmentedControl.selectedSegmentIndex
GenView(idx: selectedIdx, type: "set")
}
@IBAction func sg2SegmentedControl(_ sender: Any) {
selectedIdx = title456UISegmentedControl.selectedSegmentIndex + 3
GenView(idx: selectedIdx, type: "set")
}
@IBAction func sg3SegmentedControl(_ sender: Any) {
selectedIdx = title789UISegmentedControl.selectedSegmentIndex + 6
GenView(idx: selectedIdx, type: "set")
}
@IBAction func sg4SegmentedControl(_ sender: Any) {
selectedIdx = title101112UISegmentedControl.selectedSegmentIndex + 9
GenView(idx: selectedIdx, type: "set")
}
@IBAction func sg5SegmentedControl(_ sender: Any) {
selectedIdx = title13UISegmentedControl.selectedSegmentIndex + 12
GenView(idx: selectedIdx, type: "set")
}7. 結果呈現
GitHub：
參考資訊：
