用 Swift 撸一个网易云音乐首页（一）

2024-01-18 08:14:55

前言

Hello，大家好，近期我一直在学习用 Swift 编码，由于之前很多项目我都是用 OC 实现的，所以导致我现在对 Swift 还是处于一个学习的阶段中。为了提高自己的学习效率，每次我都会为自己设定一个小目标，比如：实现一个网易云音乐的首页。通过这个小目标，可以让我更加深入地理解 Swift 的语法和特性。今天，我就来分享一下我实现网易云音乐首页的第一部分，主要包括 UI 布局和基本功能的实现。

UI 布局

网易云音乐首页的 UI 布局相对简单，主要分为三大块：

顶部导航栏
中间内容区
底部播放器

顶部导航栏

顶部导航栏主要包含了返回按钮、标题和搜索框。

// 顶部导航栏
let navigationBar = UINavigationBar()
let navigationItem = UINavigationItem(title: "网易云音乐")
let backButton = UIBarButtonItem(image: UIImage(named: "back"), style: .plain, target: self, action: #selector(back))
navigationItem.leftBarButtonItem = backButton
navigationBar.items = [navigationItem]

中间内容区

中间内容区是整个首页的核心，包含了轮播图、歌单推荐和新碟上架等模块。

// 中间内容区
let scrollView = UIScrollView()
let pageControl = UIPageControl()
let bannerView = UIView()
let recommendView = UIView()
let newAlbumView = UIView()

底部播放器

底部播放器主要包含了播放暂停按钮、上一曲下一曲按钮和进度条。

// 底部播放器
let playerView = UIView()
let playButton = UIButton()
let previousButton = UIButton()
let nextButton = UIButton()
let progressView = UIProgressView()

基本功能实现

接下来，我们来实现网易云音乐首页的基本功能，比如轮播图的自动播放、歌单推荐的加载和新碟上架的显示。

轮播图自动播放

// 轮播图自动播放
let timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(autoPlay), userInfo: nil, repeats: true)

歌单推荐加载

// 歌单推荐加载
let url = URL(string: "https://api.imjad.cn/cloudmusic/?type=playlist&limit=10")!
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
    if let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] {
        if let playlists = json["playlists"] as? [[String: Any]] {
            for playlist in playlists {
                // ...
            }
        }
    }
}
task.resume()

新碟上架显示

// 新碟上架显示
let url = URL(string: "https://api.imjad.cn/cloudmusic/?type=album&limit=10")!
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
    if let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] {
        if let albums = json["albums"] as? [[String: Any]] {
            for album in albums {
                // ...
            }
        }
    }
}
task.resume()