OC转swift3.0实践 (一)最基础的UI

作者: APP叫我取个帅气的昵称 | 来源:发表于2016-12-02 15:40 被阅读1031次

    之前的搭框架啥的基本与OC没啥区别,但有种情况,就是要建个桥文件,来使swift项目中可以引用pods导入的OC的第三方库,想知道具体怎么建的可在下面评论留言。
    进入正题,今天要做的是99%的APP要有的个人中心页面,用的是系统自带的cell。效果图如下

    个人中心.png
    ps:如何建桥文件已经在另一篇OC转swift3.0实战 (二)使用自定义cell的tableview中写明。
    这个页面很简单,整体一个tabview,里面有一个headerView,加5个section。由于是刚开始实战,这里不用xib而是用纯代码来建头部(说到这,不禁有一个问题,是xib开发好呢还是纯代码好呢?)
    新建一个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:这个页面的数据都是写死的,没涉及到网络层。代码如下:

    
    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
        }()
        ///列表标题数组
        lazy var titleArray:[[String]] = {
        return[["我的订单"],["我的会员卡","我的收藏","我的收货地址",],["我的优惠券"],["IC卡查询"],["帮助中心"]]
        }()
        ///列表图标数组
        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
        }()
        ///状态栏
        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.
        }
        ///设置状态栏样式
        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代理 &&数据源
    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就搭好了,里面的点击事件都没实现,跳转和OC也没多大区别。同样,有啥问题可以留言哦。

    相关文章

      网友评论

        本文标题:OC转swift3.0实践 (一)最基础的UI

        本文链接:https://www.haomeiwen.com/subject/utrxmttx.html