音乐类app
教程地址
1. 布局
screenshot.png
现在好多教程都是采用storyboard布局,作为新手入门的时候,固然很方便.但是我们看到别人的代码很多都是纯代码布局或者混合xib进行布局.在这篇文章中,我试着利用纯代码来完成整篇文章的布局,有错误的地方欢迎指正,也希望可以找到小伙伴一起学习swift
- 编译工具: xcode 8
- 编译环境: swift 3.1
- 模拟器设备 ios 10.3 iphone6 (暂不考虑版本的适配问题)
按照教程提供的界面,可以得到以下信息:
(英文主要是一些控件名)
1. 需要的背景是一个Image View 尺寸与手机尺寸一致 坐标为(0,0)
// 初始化Image View(background)
imageVwbg = {
var image = UIImageView()
image = UIImageView(frame: self.view.frame)
let bg = UIImage(named: "bg")
image.image = bg
return image
}()
2. 需要一个菜单按钮
// 初始化菜单按钮
btnMenu = {
let btn = UIButton(frame: CGRect(x:339, y:34,width:self.view.bounds.size.width*33/375, height:self.view.bounds.size.height*21/667))
let icon = UIImage(named:"menu")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(icon, for:.normal)
return btn
}()
3. 专辑的封面图 需要一个大小为145x145 坐标为(115,38)的Image View
// 初始化Image View(封面外圆)
imageVwfw = {
let image = UIImageView(frame: CGRect(x:115, y:38,width:self.view.bounds.size.width*145/375, height:self.view.bounds.size.height*145/667))
// 增加边框颜色
let imageVwfwup = Toucan(image: UIImage(named: "thumb")!).maskWithEllipse(borderWidth: 6, borderColor: UIColor(red: 210/255, green: 210/255, blue: 210/255, alpha: 1.0)).image
image.image = imageVwfwup
return image
}()
4. 中间显示播放时长的小圆 需要一个大小为45x45 坐标为(166,88)Image View 显示时间需要一个Label 格式居中 颜色为白色
// 初始化Image View(封面内圆)
imageVwfn = {
let image = UIImageView(frame: CGRect(x:166, y:88,width:self.view.bounds.size.width*45/375, height:self.view.bounds.size.height*45/667))
image.image = UIImage(named: "thumb_oval")
return image
}()
...
// label音乐时长
songDuration = {
let label = UILabel(frame:CGRect(x:174, y:103, width:33, height:16))
label.text = "00:00"
label.textColor = .white
label.font = UIFont.systemFont(ofSize: 10)
return label
}()
4. 控制条是1个UIView 加上5个button uiview的高度为47 坐标为(0,228) button平均分布
// MARK: - 初始化控制条
ctrlView = {
let view = UIView(frame:CGRect(x:0, y:228, width:self.view.bounds.size.width, height:47))
view.backgroundColor = UIColor(red: 156/255, green: 169/255, blue: 232/255, alpha: 0.3)
return view
}()
// 控制条的按钮
//循环播放按钮
let btnLoop: UIButton = {
let btn = UIButton(frame:CGRect(x:28, y:8, width:32, height:32))
let onIcon = UIImage(named:"looponIcon")?.withRenderingMode(.alwaysOriginal)
let offIcon = UIImage(named:"loopoffIcon")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(offIcon, for:.normal)
btn.setImage(onIcon, for:.highlighted)
return btn
}()
// 上一首按钮
let btnPrev: UIButton = {
let btn = UIButton(frame:CGRect(x:100, y:8, width:32, height:32))
let icon = UIImage(named:"prevIcon")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(icon, for:.normal)
return btn
}()
// 播放暂停按钮
let btnPlayMode: UIButton = {
let btn = UIButton(frame:CGRect(x:164, y:0, width:48, height:48))
let onIcon = UIImage(named:"playIcon")?.withRenderingMode(.alwaysOriginal)
let offIcon = UIImage(named:"pauseIcon")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(offIcon, for:.normal)
btn.setImage(onIcon, for:.highlighted)
return btn
}()
// 下一首按钮
let btnNext: UIButton = {
let btn = UIButton(frame:CGRect(x:244, y:8, width:32, height:32))
let icon = UIImage(named:"nextIcon")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(icon, for:.normal)
return btn
}()
// 随机播放按钮
let btnRanm: UIButton = {
let btn = UIButton(frame:CGRect(x:316, y:8, width:32, height:32))
let onIcon = UIImage(named:"ranmonIcon")?.withRenderingMode(.alwaysOriginal)
let offIcon = UIImage(named:"ranmoffIcon")?.withRenderingMode(.alwaysOriginal)
//设置图标
btn.setImage(offIcon, for:.normal)
btn.setImage(onIcon, for:.highlighted)
return btn
}()
// 进度条
let progressBar: UIView = {
let view = UIView(frame:CGRect(x:0, y:-1, width:self.view.bounds.size.width, height:2))
view.backgroundColor = UIColor(red: 107/255, green: 123/255, blue: 212/255, alpha: 1.0)
return view
}()
ctrlView.addSubview(progressBar)
ctrlView.addSubview(btnLoop)
ctrlView.addSubview(btnPrev)
ctrlView.addSubview(btnPlayMode)
ctrlView.addSubview(btnNext)
ctrlView.addSubview(btnRanm)
6. 歌曲列表部分是一个tableview
// MARK: - 初始化tableView
tableView = {
let table = UITableView(frame: CGRect(x:0, y:275,width:self.view.bounds.size.width, height:392))
table.delegate = self
table.dataSource = self
table.bounces = false
// 创建一个重用的单元格
table.register(UITableViewCell.self, forCellReuseIdentifier: "SongList")
table.rowHeight = 44
//自适应高度
//table.rowHeight = UITableViewAutomaticDimension
// 去除多余的单元格
table.tableFooterView = UIView()
// 去除滚动条
table.showsVerticalScrollIndicator = false
// 设置分割线的颜色和内边距
table.separatorColor = UIColor(red: 225/255, green: 225/255, blue: 225/255, alpha: 0.6)
table.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0)
// 设置cell的背景色为透明
table.backgroundColor = UIColor.clear;
return table
}()
tableview除了界面还需要初始化相应的方法
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 12
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let identifier = "SongList"
// let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath) as UITableViewCell
let cell = UITableViewCell(style: UITableViewCellStyle.subtitle,reuseIdentifier: identifier)
// 设置单元格的样式
cell.textLabel?.text = "label"
cell.textLabel?.textColor = UIColor(red: 225/255, green: 225/255, blue: 225/255, alpha: 0.6)
cell.textLabel?.highlightedTextColor = .white
cell.detailTextLabel?.text = "detail"
cell.detailTextLabel?.textColor = UIColor(red: 225/255, green: 225/255, blue: 225/255, alpha: 0.5)
cell.detailTextLabel?.highlightedTextColor = UIColor(red: 225/255, green: 225/255, blue: 225/255, alpha: 1.0)
cell.backgroundColor = UIColor.clear
// 选中背景修改成紫色
cell.selectedBackgroundView = UIView()
cell.selectedBackgroundView?.backgroundColor = UIColor(red: 156/255, green: 169/255, blue: 232/255, alpha: 1.0)
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
}
完成所有界面布局后如下图所示:
screenshot.png