⑯ 模仿iOS 的Music App — 天籟之聲：台灣原住民音樂 （中) 「歌手介紹」
Published in
9 min read2 days ago
歌手介紹
一、點選歌手頭像後，立即顯示歌手資訊
為了達到歌手資訊隨著使用者點選人像而改變，我們需要進行以下步驟：
- 建立 button — segue：方便跳到下一頁。
- 各自建立 swift 檔案：進行 class 設定。
- 建立 SingerDataList：必須修改UI畫面及資料順序。
（一）建立 button — segue：方便跳到下一頁
- 建立button 並且放置在圖片上面，顏色改為透明，取消文字
2. 修改顏色：右邊View 底下Tint 選擇Clear Color(透明)
3. 拉button — segue 之間的線（按下control 拉線，選擇show）
4. 同樣步驟，不段重複完成五位歌手（再建立4個view controller）
5. UI 必須要調整到每一頁，第一位歌手都不一樣
開始進入寫程式時間…….越來越複雜ＸＤ
(二) 各自建立 swift 檔案：進行 class 設定
- 選擇New File 建立，五份新的swift 檔案，可以使用歌手進行命名
2. 手動修改Custom Class 裡面，class 名稱（必須和上面一致），注意Inherit Module From Target 必須要打勾。
屬性定義
images：儲存歌手圖片名稱的陣列。texts：儲存歌手名稱的陣列。descs：儲存每個歌手詳細描述的陣列。
import UIKit
class Second: UIViewController {
let images = ["singer 1", "singer 2", "singer 3", "singer 4", "singer 5"]
let texts = ["ABAO", "Bunun", "Lynn", "Vox", "Madal"]
let descs =
["阿仍仍（1981年8月25日—）（排灣語：Aljenljeng Tjaluvie，藝名阿爆、Abao，漢語名張靜雯）是台灣台東縣金峰鄉嘉蘭正興部落出身的原住民歌手、詞曲作家及主持人，排灣族人。2020年10月3日阿爆以《kinakaian 母親的舌頭》二度獲頒金曲獎最佳原住民語專輯獎，以及金曲最大獎-年度專輯獎，並以專輯中的〈Thank You 感謝〉拿下年度歌曲獎。",
"《從此刻起-布農孩子的傳承與跨界》由社團法人中華民國雙躍關懷成長協會製作發行。發現部落青年因求學與生存移居至都市，身處都市而經歷生活文化的衝擊，面對傳統部落文化精神與都市競爭適應的矛盾，內心茫然迷惘。因此，透過傳統歌謠錄製傳承布農文化，結合流行跨界發揚布農勇士精神，祝福每個布農孩子在未來的社會中，延續布農生命生生不息，保有自我、跨越文化藩籬、躍出生命嶄新的一頁。",
"「莎莉木可的拐杖」演唱為年輕的明日之星歌手何祖伶，古調歌頌 Ludja 部落核心家族 Zingrur，大約兩百年前的老祖宗莉木（Ljimuk）跟布度（Pudju） 兩姊弟。 展現王族 Pudju 豪氣萬千的氣魄； 在莉木、布度上幾輩的世代，Zingrur家族的領地包含淺山草原到海邊的廣大地區，因而歌詞提到了海與淺山草原；爾後莉木與布度的父親古哩哩（Kuljilji）才引領由 Tjakualim（萬金）遷徙到了山上的路口 Taciqaven。",
"改變一個部落孩子的未來，就有機會改變部落的未來。2008年春天，台灣原聲教育協會成立，同時在南投縣信義鄉成立了「原聲音樂學校」及「台灣原聲童聲合唱團」，十餘年來，以提升學科能力及藉由合唱實施品格教育的雙軌並行方式，培育了眾多原住民學童；合唱團的純淨天籟也揚名海內外，被譽為台灣的維也納。",
"來自臺東長濱的阿美族語音樂創作者 馬樂Madal(陳祈宏)喜歡採集、記錄部落的傳統歌謠，並將蒐集的古調以現代的音樂形式，融入到音樂教學與創作裡，也透過接觸耆老的生命故事和投入文化事務的心路歷程，將之萃取成族語音樂創作的養分。"]IBOutlet
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var textView: UILabel!
@IBOutlet weak var descView: UILabel!
@IBOutlet weak var pageControl: UIPageControl!
var index = 0 （表示：index 從第一個開始）
override func viewDidLoad() {
super.viewDidLoad()
}IBAction: 下一頁
@IBAction func next(_ sender: Any) {
index = (index + 1 ) % images.count
let image = images[index]
let text = texts[index]
let desc = descs[index]
imageView.image = UIImage(named: image)
textView.text = text
descView.text = desc
pageControl.currentPage = index // 小圓點位置
}IBAction:前一頁
@IBAction func previous(_ sender: Any) {
index = (index - 1 + images.count ) % images.count
let image = images[index]
let text = texts[index]
let desc = descs[index]
imageView.image = UIImage(named: image)
textView.text = text
descView.text = desc
pageControl.currentPage = index // 小圓點位置
}
}ChatGPT
詳細步驟
- 初始狀態：
index = 0image = images[0] = "singer 1"text = texts[0] = "ABAO"desc = descs[0] = "阿仍仍...（詳細描述）"
2. 第一次按下「下一步」：
index = (0 + 1) % 5 = 1image = images[1] = "singer 2"text = texts[1] = "Bunun"desc = descs[1] = "《從此刻起...（詳細描述）"
3. 第二次按下「下一步」：
index = (1 + 1) % 5 = 2image = images[2] = "singer 3"text = texts[2] = "Lynn"desc = descs[2] = "「莎莉木可的拐杖...（詳細描述）"
4. 第三次按下「下一步」：
index = (2 + 1) % 5 = 3image = images[3] = "singer 4"text = texts[3] = "Vox"desc = descs[3] = "改變一個部落孩子...（詳細描述）"
5. 第四次按下「下一步」：
index = (3 + 1) % 5 = 4image = images[4] = "singer 5"text = texts[4] = "Madal"desc = descs[4] = "來自臺東長濱的阿美族語...（詳細描述）"
6. 第五次按下「下一步」：
index = (4 + 1) % 5 = 0
回到初始狀態：
image = images[0] = "singer 1"text = texts[0] = "ABAO"desc = descs[0] = "阿仍仍...（詳細描述）"
總結
當使用者每次按下「下一步」按鈕時，index 會在 0 到 4 之間循環，並更新對應的圖片、名稱和描述。UI 元素也會隨之更新，使使用者能夠依次瀏覽每個歌手的資訊。
完整程式碼（建議下載iPhone15 Pro）
上篇
中篇-2
下篇
