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

之前的搭框架啥的基本与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也没多大区别。同样,有啥问题可以留言哦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,809评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,189评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,290评论 0 359
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,399评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,425评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,116评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,710评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,629评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,155评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,261评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,399评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,068评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,758评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,252评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,381评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,747评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,402评论 2 358

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,117评论 4 61
  • 今天这章是正文的第一章,讲的是古代美洲的史前艺术。 贡布里希在这里表达出的观点更接近于弗雷泽的“巫术说”,认为艺术...
    沈惜朝阅读 376评论 0 1
  • 618最成功的战果就是在网上买了一堆书,突然就甚是想念我南图书馆。仅以此旧文献给我最爱的图书馆 趁着假期出游,是我...
    soda哒哒阅读 417评论 0 2
  • 有一刻 我由衷欢喜 因为一朵花开 是梦苏醒的声音 有时候 我默然不语 因为一朵花落 代表一段记忆沉沉睡去 有些花开...
    若良阅读 250评论 0 1
  • 连续几天的高温,前所未有的热度,如处在蒸笼一般,单是坐在那里,就有流不完的汗,似一条条小虫在身体上肆意的流淌着,索...
    西岭布衣阅读 380评论 0 1