iOS开发技术集合

Swift - 实现QQ列表展示

2016-08-26  本文已影响748人  BeijingIamback

图片展示:

列表展示

目录结构:
定义两个模型:qq分组模型和qq好友模型
定义两个视图:好友展示的cell,和section的headerView

文件

主要代码:

模型代码
class QQFriend:NSObject {
    
    var name:String?
    var icon:String?
    var intro:String?
    var vip:NSNumber?
    
    init(dic:NSDictionary) {
        super.init()
        self.setValuesForKeysWithDictionary(dic as! [String : AnyObject])
    }
}



class QQFriendGroup:NSObject {
    var name:String?
    var friends:NSArray?
    var online:NSNumber?
// 这个变量是控制分组是否打开的,如果打开则设定展示cell的个数
    var isOpen:Bool? = false
    
    
    init(withDic dic:NSDictionary) {
        super.init()
        self.setValuesForKeysWithDictionary(dic as! [String : AnyObject])
        
        let  arrayFriend:NSMutableArray = NSMutableArray()
        
        for friendDic in self.friends! {
            let friend :QQFriend = QQFriend.init(dic: friendDic as! NSDictionary)
            arrayFriend.addObject(friend)
        }
        
        self.friends = arrayFriend
        
    }
    
}

视图代码

// 自定义的cell
class QQFriendCell: UITableViewCell {
    
    class func cellWithTableView(tableView:UITableView) -> QQFriendCell {
        let  cellID = "friend"
        var cell = tableView.dequeueReusableCellWithIdentifier(cellID)
        if cell == nil {
            cell = QQFriendCell.init(style: UITableViewCellStyle.Subtitle, reuseIdentifier: cellID)
        }
        
        return cell as! QQFriendCell
        
    }
    
    // 每个cell展示的好友信息
    var friendData:QQFriend? {
        didSet {
            self.imageView?.image = UIImage(named: friendData!.icon!)
            self.textLabel?.text = friendData!.name!
            self.textLabel?.textColor = friendData!.vip == true ? UIColor.redColor() : UIColor.blackColor()
            self.detailTextLabel?.text = friendData!.intro!
        }
    }
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}


##// 自定义section的headerView
// 协议,点击headerView的回调
protocol QQHeaderViewDelegate:NSObjectProtocol {
    func headerViewDidClickedNameView(headerView:QQHeaderView)
}

class QQHeaderView: UITableViewHeaderFooterView {
    weak var delegate:QQHeaderViewDelegate?
// 显示在线的人数
    var countView:UILabel? =  {
        let countView:UILabel = UILabel.init()
        countView.textAlignment = .Center
        countView.textColor = UIColor.grayColor()
        return countView
    }()
// 好友的姓名
    var nameView:UIButton? = {
        
        let nameView = UIButton.init(type: UIButtonType.Custom)
        nameView.setBackgroundImage(UIImage(named: "buddy_header_bg"), forState: UIControlState.Normal)
        nameView.setBackgroundImage(UIImage(named: "buddy_header_bg_highlighted"), forState: UIControlState.Highlighted)
// 设定那个group的小角
        nameView.setImage(UIImage(named: "buddy_header_arrow"), forState: UIControlState.Normal)
        nameView.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
        
        nameView.contentHorizontalAlignment = .Left
        nameView.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0)
        nameView.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0)
        
        nameView.imageView?.contentMode = .Center
        nameView.imageView?.clipsToBounds = false
        return nameView
    }()
    // headerView根据这个group进行展示分组信息
    var group:QQFriendGroup? {
        didSet {
            self.nameView?.setTitle(group!.name!, forState: UIControlState.Normal)
            self.countView?.text = "\(group!.online!)" + "/" + "\(group!.friends!.count)"
            didMoveToSuperview()
        }
    }
    
    // 返回一个headerView
    class func headerViewWithTableView(tableView:UITableView) -> QQHeaderView {
        let headerID = "myHeader"
        var header = tableView.dequeueReusableHeaderFooterViewWithIdentifier(headerID)
        if header == nil {
            header = QQHeaderView.init(reuseIdentifier: headerID)
        }
        return header as! QQHeaderView
    }

    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        
        self.nameView!.addTarget(self, action: #selector(QQHeaderView.nameClick), forControlEvents: UIControlEvents.TouchUpInside)
        
        self.contentView.addSubview(nameView!)
        
        self.contentView.addSubview(countView!)
        
        
    }
    
    func nameClick() {
        self.group?.isOpen = !self.group!.isOpen!
        // 刷新表格
        if ((self.delegate?.respondsToSelector(Selector("headerViewDidClickedNameView:"))) != nil) {
            self.delegate?.headerViewDidClickedNameView(self)
        }
    }
    // 在父视图上动哈哈
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        if self.group!.isOpen == true {
            self.nameView?.imageView?.transform = CGAffineTransformMakeRotation(CGFloat( M_PI_2))
        }else {
            self.nameView?.imageView?.transform = CGAffineTransformMakeRotation(0)
        }
    }
    // 设置 nameView 和 在线人数countView 的frame
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.nameView?.frame = self.bounds
        let countH:CGFloat = self.frame.size.height
        let countW:CGFloat = 150
        let countY:CGFloat = 0
        let countX:CGFloat = self.frame.size.width - 10 - countW
        self.countView?.frame = CGRectMake(countX, countY, countW, countH)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

视图控制器代码


class ViewController: UIViewController ,UITableViewDelegate, UITableViewDataSource, QQHeaderViewDelegate{
    // 从本地获取模拟数据
    lazy var groups:NSArray? = {
        
        let filePath = NSBundle.mainBundle().pathForResource("friends.plist", ofType: nil)
        var dicArr:NSArray = NSArray.init(contentsOfFile:filePath!)!
        var arr:NSMutableArray = NSMutableArray()
        for dic in dicArr {
            let group:QQFriendGroup = QQFriendGroup.init(withDic: dic as! NSDictionary)
            arr.addObject(group)
        }
        return arr
    }()
    
    var tableView:UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        buildTableView()
        
    }
    
    override func prefersStatusBarHidden() -> Bool {
        return true
    }
    // 构建tableview
    func buildTableView() {
        self.tableView = UITableView.init(frame: self.view.bounds, style: UITableViewStyle.Plain)
        self.tableView.delegate = self
        self.tableView.dataSource = self
        self.tableView.rowHeight = 50
        self.tableView.sectionHeaderHeight = 44
        self.view.addSubview(self.tableView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

// tableView 代理方法
extension ViewController {
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return self.groups!.count
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let group:QQFriendGroup = self.groups![section] as! QQFriendGroup
        return group.isOpen == true ? group.friends!.count : 0
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = QQFriendCell.cellWithTableView(tableView)
        let group = self.groups![indexPath.section] as! QQFriendGroup
        cell.friendData = group.friends![indexPath.row] as? QQFriend
        return cell
    }
    
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let header:QQHeaderView = QQHeaderView.headerViewWithTableView(tableView)
        header.delegate = self
        
        header.group = self.groups![section] as! QQFriendGroup
        
        return header
    }
}

// QQ headerView 的代理方法
extension ViewController {
// 每次点击headerView时,改变group的isOpen参数,然后刷新tableview,显示或者隐藏好友信息
    func headerViewDidClickedNameView(headerView: QQHeaderView) {
        self.tableView.reloadData()
    }
}

体会:
1 自定义cell的时候出了错,返回cell的时候总是提示我为 nil错误,原来是我在复用获得cell的时候把cell强转QQcell时出的错,改正就是,先从复用池中获得一个不管什么类型的cell,如果为nil,就使用我们自己的初始化方法搞出来一个,然后在return的时候强转。
2这个小例子,主要都在headerView这块,设置代理,根据获得的数据改变小三角的指向,点击更改groupisOpen的状态,这些写好了就能完成这个小demo了。
3在VC中主要就是展示tableview了。

上一篇 下一篇

猜你喜欢

热点阅读