OC轉swift3.0實踐 (一)最基礎的UI

之前的搭框架啥的基本與OC沒啥區(qū)別,但有種情況,就是要建個橋文件,來使swift項目中可以引用pods導入的OC的第三方庫,想知道具體怎么建的可在下面評論留言。
進入正題,今天要做的是99%的APP要有的個人中心頁面,用的是系統(tǒng)自帶的cell。效果圖如下

個人中心.png

ps:如何建橋文件已經在另一篇OC轉swift3.0實戰(zhàn) (二)使用自定義cell的tableview中寫明。
這個頁面很簡單,整體一個tabview,里面有一個headerView,加5個section。由于是剛開始實戰(zhàn),這里不用xib而是用純代碼來建頭部(說到這,不禁有一個問題,是xib開發(fā)好呢還是純代碼好呢?)
新建一個view繼承自UIView language選用swift,完成。接下來不用像OC那樣重寫init,直接干。代碼如下:



import UIKit

class ZLMMineHeaderView: UIView {

//懶加載
    ///背景視圖
    lazy var backImageView:UIImageView = {[weak self](result)in
        let img = UIImageView(image:#imageLiteral(resourceName: "bannerBackground"))
        img.contentMode = .scaleAspectFill
        img.layer.masksToBounds = true
        self?.addSubview(img)
        return img
    }()
    ///背景圖上方的一層蒙版
//    lazy var alphaView:UIView = {[unowned self]in
//      let view = UIView()
//        view.backgroundColor = UIColor.hexInt(0x000000)
//        view.alpha = 0.3
//        self.addSubview(view)
//        return view
//    }()
   ///設置按鈕
    lazy var settingBtn:UIButton = {[weak self](result)in
        let btn = UIButton(type:.custom)
        btn.setImage(#imageLiteral(resourceName: "setting"), for: .normal)
        self?.addSubview(btn)
        return btn
    }()
   ///頭像視圖
    lazy var avatarImageView:UIImageView = {[weak self](result)in
        let img = UIImageView(image:#imageLiteral(resourceName: "unlogin"))
        img.layer.masksToBounds = true
        img.layer.cornerRadius = 45.0
        img.layer.rasterizationScale = UIScreen.main.scale
        img.layer.shouldRasterize = true
        self?.addSubview(img)
        return img
    }()
   ///登錄/注冊
    lazy var loginBtn:UIButton = {[weak self](result)in
        let btn  = UIButton(type: .custom)
        btn.setTitle("登錄/注冊", for: .normal)
        btn.setTitleColor(UIColor.white, for: .normal)
        self?.addSubview(btn)
        return btn
    }()
    override func layoutSubviews() {
        super.layoutSubviews()
        //背景視圖
        backImageView.frame = CGRect(x:0,y:0,width:ScreenW,height:200)
//        alphaView.frame = backImageView.frame
        settingBtn.frame = CGRect(x:ScreenW-40,y:35,width:30,height:30)
        avatarImageView.frame = CGRect(x:ScreenW/2-45,y:55,width:90,height:90)
        loginBtn.frame = CGRect(x:ScreenW/2-45,y:145,width:90,height:30)

        
    }
    
}

自定義的View解決了 接下來就是controller里的事了。ps:這個頁面的數(shù)據(jù)都是寫死的,沒涉及到網絡層。代碼如下:


import UIKit

let headerViewH:CGFloat = 200
class ZLMMainViewController: UIViewController {
    
//普通屬性
    var lightFlag:Bool = true
//懶加載
    ///tableview
    lazy var tableView: UITableView = {[weak self](result) in
        let tableView = UITableView(frame:CGRect(x:0, y:0, width:ScreenW, height:(self?.view.frame.height)!),style:.grouped)
        tableView.delegate = self
        tableView.dataSource = self
        tableView.backgroundColor = BACKGROUND_Color
        self?.view.addSubview(tableView)
        return tableView
    }()
    ///列表標題數(shù)組
    lazy var titleArray:[[String]] = {
    return[["我的訂單"],["我的會員卡","我的收藏","我的收貨地址",],["我的優(yōu)惠券"],["IC卡查詢"],["幫助中心"]]
    }()
    ///列表圖標數(shù)組
    lazy var imageArray:[[UIImage]] = {
      return  [[#imageLiteral(resourceName: "order")],[#imageLiteral(resourceName: "memberCard"),#imageLiteral(resourceName: "favorite"),#imageLiteral(resourceName: "address")],[#imageLiteral(resourceName: "coupon")],[#imageLiteral(resourceName: "score")],[#imageLiteral(resourceName: "help")]]
    }()
    ///頭部視圖
    lazy var headerView:ZLMMineHeaderView = {
        let view = ZLMMineHeaderView(frame:CGRect(x:0,y:0,width:ScreenW,height:headerViewH))
        return view
    }()
    ///狀態(tài)欄
    lazy var statusBackView:UIView = {[weak self](result)in
        let view = UIView(frame:CGRect(x:0,y:0,width:ScreenW,height:20))
        view.backgroundColor = UIColor.white.withAlphaComponent(0.95)
        self?.view.addSubview(view)
        self?.view.bringSubview(toFront:view)
        return view
    }()
//生命周期
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.hexInt(0xf3f3f3)
        automaticallyAdjustsScrollViewInsets = false
        setupView()
        
        // Do any additional setup after loading the view.
    }
    ///設置狀態(tài)欄樣式
    override var preferredStatusBarStyle: UIStatusBarStyle{
        if lightFlag {
            return .lightContent
        }else{
            return .default
        }
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: true)
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
  

 
}
//初始化
extension ZLMMainViewController{
   ///初始化視圖
    fileprivate func setupView(){
        tableView.tableHeaderView = UIView(frame:CGRect(x:0,y:0,width:ScreenW,height:headerViewH))
        tableView.addSubview(headerView)
    }
}
//UITableview代理 &&數(shù)據(jù)源
extension ZLMMainViewController:UITableViewDelegate,UITableViewDataSource{

    func numberOfSections(in tableView: UITableView) -> Int {
        return titleArray.count
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let subTitleArr = titleArray[section]
        return subTitleArr.count
        
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let subTextArr = titleArray[indexPath.section]
        let imgArr = imageArray[indexPath.section]
        
        let cellID = "cellId"
        var cell = tableView.dequeueReusableCell(withIdentifier: cellID)
        if cell == nil {
            cell = UITableViewCell(style: .default,reuseIdentifier:cellID)
        }
        cell?.textLabel?.text = subTextArr[indexPath.row]
        cell?.textLabel?.font = UIFont.systemFont(ofSize: 14)
        cell?.textLabel?.textColor = RGBA(r:0.0,g:0.0,b:0.0,a:1.0)
        cell?.accessoryType = .disclosureIndicator
        cell?.selectionStyle = .none
        cell?.imageView?.image = imgArr[indexPath.row]
        
        return cell!
        
    }
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        return
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 44.0
    }
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 10.0
    }
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 0.1
    }
}

這樣這個頁面的UI就搭好了,里面的點擊事件都沒實現(xiàn),跳轉和OC也沒多大區(qū)別。同樣,有啥問題可以留言哦。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,695評論 4 61
  • 今天這章是正文的第一章,講的是古代美洲的史前藝術。 貢布里希在這里表達出的觀點更接近于弗雷澤的“巫術說”,認為藝術...
    沈惜朝閱讀 521評論 0 1
  • 618最成功的戰(zhàn)果就是在網上買了一堆書,突然就甚是想念我南圖書館。僅以此舊文獻給我最愛的圖書館 趁著假期出游,是我...
    soda噠噠閱讀 455評論 0 2
  • 有一刻 我由衷歡喜 因為一朵花開 是夢蘇醒的聲音 有時候 我默然不語 因為一朵花落 代表一段記憶沉沉睡去 有些花開...
    若良閱讀 270評論 0 1
  • 連續(xù)幾天的高溫,前所未有的熱度,如處在蒸籠一般,單是坐在那里,就有流不完的汗,似一條條小蟲在身體上肆意的流淌著,索...
    西嶺布衣閱讀 450評論 0 1

友情鏈接更多精彩內容