音樂類app

教程地址

1. 布局

screenshot.png

現(xiàn)在好多教程都是采用storyboard布局,作為新手入門的時(shí)候,固然很方便.但是我們看到別人的代碼很多都是純代碼布局或者混合xib進(jìn)行布局.在這篇文章中,我試著利用純代碼來完成整篇文章的布局,有錯(cuò)誤的地方歡迎指正,也希望可以找到小伙伴一起學(xué)習(xí)swift

• 編譯工具: xcode 8
• 編譯環(huán)境: swift 3.1
• 模擬器設(shè)備 ios 10.3 iphone6 (暫不考慮版本的適配問題)

按照教程提供的界面,可以得到以下信息:
(英文主要是一些控件名)

1. 需要的背景是一個(gè)Image View 尺寸與手機(jī)尺寸一致 坐標(biāo)為(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. 需要一個(gè)菜單按鈕

        // 初始化菜單按鈕
        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)
            //設(shè)置圖標(biāo)
            btn.setImage(icon, for:.normal)
            return btn
        }()

3. 專輯的封面圖 需要一個(gè)大小為145x145 坐標(biāo)為(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. 中間顯示播放時(shí)長(zhǎng)的小圓 需要一個(gè)大小為45x45 坐標(biāo)為(166,88)Image View 顯示時(shí)間需要一個(gè)Label 格式居中 顏色為白色

        // 初始化Image View(封面內(nèi)圓)
        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音樂時(shí)長(zhǎng)
        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個(gè)UIView 加上5個(gè)button uiview的高度為47 坐標(biāo)為(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
        }()
        // 控制條的按鈕
        //循環(huán)播放按鈕
        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)
            //設(shè)置圖標(biāo)
            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)
            //設(shè)置圖標(biāo)
            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)
            //設(shè)置圖標(biāo)
            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)
            //設(shè)置圖標(biāo)
            btn.setImage(icon, for:.normal)
            return btn
        }()
        // 隨機(jī)播放按鈕
        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)
            //設(shè)置圖標(biāo)
            btn.setImage(offIcon, for:.normal)
            btn.setImage(onIcon, for:.highlighted)
            return btn
        }()
        // 進(jìn)度條
        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. 歌曲列表部分是一個(gè)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
            // 創(chuàng)建一個(gè)重用的單元格
            table.register(UITableViewCell.self, forCellReuseIdentifier: "SongList")
            table.rowHeight = 44
            //自適應(yīng)高度
            //table.rowHeight = UITableViewAutomaticDimension
            // 去除多余的單元格
            table.tableFooterView = UIView()
            // 去除滾動(dòng)條
            table.showsVerticalScrollIndicator = false
            // 設(shè)置分割線的顏色和內(nèi)邊距
            table.separatorColor = UIColor(red: 225/255, green: 225/255, blue: 225/255, alpha: 0.6)
            table.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0)
            // 設(shè)置cell的背景色為透明
            table.backgroundColor = UIColor.clear;
            return table
        }()

tableview除了界面還需要初始化相應(yīng)的方法

    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)
        // 設(shè)置單元格的樣式
        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