Swift_纯代码实现分组TableView

效果图

Paste_Image.png

大体说一下思路,此页面是由顶部的HeadView以及一个TableView两部分构成,TableView有一个headView,分别是我的订单,优惠劵以及我的消息,通过闭包的回调完成点击的事件

1. 顶部的HeadView - UIImageView
步骤:
1. 定义相关控件
2. 在init(frame: CGRect)方法中设置相关属性并添加
3. 在layoutSubviews()方法中设置各个控件的frame

注意:如果你需要添加其它的参数(如: 点击方法),需要使用便利构造器,在第1步的时候,定义一个方法
     便利构造器是类的次要构造器, 你需要让便利构造器调用同一个类中的指定构造器, 并将这个指定构造器中的参数填上你想要的默认参数.

关于构造器可以参考我写的这篇简书Swift 类构造器的使用
代码

import UIKit

class MineHeadView: UIImageView {
   // 第1步:定义相关控件
    let setUpBtn: UIButton = UIButton(type: .Custom)
    let iconView: IconView = IconView()
   // 定义方法
    var buttonClick:(Void -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 第2步:设置相关属性并添加
        image = UIImage(named: "v2_my_avatar_bg")
        setUpBtn.setImage(UIImage(named: "v2_my_settings_icon"), forState: .Normal)
        setUpBtn.addTarget(self, action: Selector("setUpButtonClick"), forControlEvents: .TouchUpInside)
        addSubview(setUpBtn)
        addSubview(iconView)
        self.userInteractionEnabled = true
    }
    // 便利构造器
   convenience init(frame: CGRect, settingButtonClick:(() -> Void)) {
   //  调用同一个类中的指定构造器
    self.init(frame: frame)
    buttonClick = settingButtonClick
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
 // 第3步:设置frame
  override func layoutSubviews() {
  super.layoutSubviews()
}
 
    func setUpButtonClick() {
        buttonClick?()
    }
2. TableView - headView

效果图

Paste_Image.png

TableView有一个headView,分别是我的订单,优惠劵以及我的消息,这是三个view,并在view上添加了一个button,我通过for...in循环分别给这三个view添加手势,实现点击事件,同时,定义了一个枚举并设置view的tag值,在点击事件中通过tap.view!.tag进行判断,实现相应的点击方法
代码

import UIKit

enum MineHeadViewButtonType: Int {
    case Order = 0
    case Coupon = 1
    case Message = 2
}

class MineTabeHeadView: UIView {
   // 第1步:定义相关控件和方法
    var mineHeadViewClick:((type: MineHeadViewButtonType) -> ())?

    override init(frame: CGRect) {
        super.init(frame: frame)
        
        backgroundColor = UIColor.whiteColor()
       // 第2步:设置相关属性并添加
        buildUI() 
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 第3步:设置frame
    }
    
    private func buildUI() {
        // 设置了view的tag值
        orderView.tag = 0
        addSubview(orderView)

        couponView.tag = 1
        addSubview(couponView)
        
        messageView.tag = 2
        addSubview(messageView)
        // 通过for...in循环分别给这三个view添加手势,实现点击事件
        for index in 0...2 {
            let tap = UITapGestureRecognizer(target: self, action: Selector("click:"))
            let subView = viewWithTag(index)
            subView?.addGestureRecognizer(tap)
        }
    }
    
    func click(tap: UIGestureRecognizer) {
        if mineHeadViewClick != nil {
        //  在点击方法中,通过tag值,实现相应的点击方法
            switch tap.view!.tag {
                
            case MineHeadViewButtonType.Order.rawValue:
                mineHeadViewClick!(type: MineHeadViewButtonType.Order)
                break
                
            case MineHeadViewButtonType.Coupon.rawValue:
                mineHeadViewClick!(type: MineHeadViewButtonType.Coupon)
                break
                
            case MineHeadViewButtonType.Message.rawValue:
                mineHeadViewClick!(type: MineHeadViewButtonType.Message)
                break
                
            default: break
            }
        }
    }
}

注意: view上button的图片和文字位置和button默认位置不一样,需要重写button的titleLabel和imageView两个属性,具体参考
UpImageDownTextButton这个类和相关代码

3. 自定义Cell
步骤:
1. 模型类 - 这里是从Plist中获取数据
2. 懒加载控件
3. 定义模型属性,并在didSet{}中进行赋值 - 相当于OC中的重写set方法
4. 在init(style: UITableViewCellStyle, reuseIdentifier: String?)方法中设置相关属性并添加
5. 在layoutSubviews()方法中设置各个控件的frame

注意:需要将控件添加到contentView上
    可以在cell中定义一个快速创建cell的方法
import UIKit

class MineCell: UITableViewCell {
     // 第3步:定义模型属性,并在didSet{}中进行赋值 
    var mineModel: MineCellModel? {
        didSet {
            titleLabel.text = mineModel!.title
            iconImageView.image = UIImage(named: mineModel!.iconName!)
        }
    }
    
    static private let identifier = "CellID"
    // 快速创建cell的方法
    class func cellFor(tableView: UITableView) -> MineCell {
        var cell = tableView.dequeueReusableCellWithIdentifier(identifier) as? MineCell
        if cell == nil {
            cell = MineCell(style: .Default, reuseIdentifier: identifier)
        }
        return cell!
    }
    // 第2步:懒加载控件
    let bottomLine = UIView()
    private lazy var iconImageView = UIImageView()
    private lazy var titleLabel = UILabel()
    private lazy var arrowView = UIImageView()
    // 第4步:设置相关属性并添加
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
     // 第5步:设置frame
    override func layoutSubviews() {
        super.layoutSubviews()
    }
}

// 第1步:模型类 - 从Plist中获取数据
class MineCellModel: NSObject {
    var title: String?
    var iconName: String?
    
    class func loadMineCellModels() -> [MineCellModel]  {
        var mines = [MineCellModel]()
        let path = NSBundle.mainBundle().pathForResource("MinePlist", ofType: "plist")
        let arr = NSArray(contentsOfFile: path!)
        
        for dic in arr! {
            mines.append(MineCellModel.mineModel(dic as! NSDictionary))
        }
        return mines
    }
    // 相当于OC中的类方法/对象方法
    class func mineModel(dic: NSDictionary) -> MineCellModel {
        let model = MineCellModel()
        model.title = dic["title"] as? String
        model.iconName = dic["iconName"] as? String 
        return model
    }
}

代码链接地址

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

推荐阅读更多精彩内容

  • iOS高仿爱鲜蜂 前言 2015年匆匆的就过去了,又老了一岁,这一年起起伏伏,有笑声也有眼泪,感谢陪伴在我身边的人...
    Top_熊阅读 33,625评论 267 438
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25 707
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 1,328评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,024评论 4 62
  • 简介:尼尔森(Jakob Nielsen)于1995年针对Web交互设计提出的可用性原则。网上翻译版本很多,有作修...
    灵魂设计师阅读 2,037评论 0 5