#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:
參考資訊: