logo头像
Snippet 博客主题

类似朋友圈搭建

ios 2020/09/23

设计图效果

image.png

image.png

对于不等高cell的自适应有xib和纯代码方式

参考https://www.jianshu.com/p/2f161f6a310f

  1. xib和 AutomaticDimension配合使用
  2. xib和计算高度
  3. Frame布局和计算高度
  4. YYKit + CountHeight
  5. AsyncDisplayKit + CountHeight

这里我也同样采用Frame布局和计算高度

将所有子控件的frame封装在model里并计算高度，图片计算逻辑看代码,以下代码只是暂时粗糙的写个简单demo，只是主要实现逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
//
//  PXSTopicFrame.swift
//  PXSTrain
//
//  Created by Pro on 2020/9/23.
//  Copyright © 2020 com.liufeng.mysterFeng. All rights reserved.
//

import UIKit

class PXSTopicFrame: NSObject {
    var avatarFrame:CGRect?
    var nicknameFrame:CGRect?
    var thumbFrame:CGRect?
    var moreFrame:CGRect?
    var createTimeFrame:CGRect?
    var textFrame:CGRect?
    var contentFrame:CGRect?
    var tableViewFrame:CGRect?

    var imageArrFrame:[CGRect]?
    
    var commentFrame:[PXSCommentFrame]?
    
    var height:CGFloat = 0
    
    var model:PXSTopicModel?{
        didSet {
            avatarFrame = CGRect.init(x: 15, y: 15, width: 30, height: 30)
            nicknameFrame = CGRect.init(x: 50, y: 15, width: 100, height: 15)
            createTimeFrame = CGRect.init(x: 50, y: 30, width: 200, height: 15)
            let textH = self.model?.text?.getStringHeight(width: kScreenWidth-30, font: 14) ?? 20
            textFrame = CGRect.init(x: 15, y: 15+30+15, width: kScreenWidth-30, height: textH)
            let conetntH = self.model?.contentStr?.getStringHeight(width: kScreenWidth-30, font: 12) ?? 20

            contentFrame = CGRect.init(x: 15, y: 60+textH, width: kScreenWidth-30, height: conetntH)
            
            height =  60.0 + textH + conetntH + 10.0

            
            //图片宽高 图片间距 = 5
            let imageWH = (kScreenWidth - 30 - 5*2)/3
            //图片个数
            let count:Int = self.model?.images?.count ?? 0
            if count>0  {
                //图片坐标
                var imageX:CGFloat = 0
                var imageY:CGFloat = 0

                
                var imageFrame = [CGRect]()
                for index in 0..<count {
                    if index < count {
                        if count < 5 {
                            imageX = 15.0 + (index % 2).cgFloat * (imageWH + 5.0)
                            imageY = 60.0 + textH + conetntH + 10.0 + (index/2).cgFloat * (imageWH + 5.0)

                        }else {
                            imageX = 15.0 + (index % 3).cgFloat * (imageWH + 5.0)
                            imageY = 60.0 + textH + conetntH + 10.0 + (index/3).cgFloat  * (imageWH + 5.0)
                            
                        }

                        let frame = CGRect.init(x: imageX, y: imageY, width: imageWH, height: imageWH)
                        imageFrame.append(frame)
                        
                    }
                }
                imageArrFrame = imageFrame

            }
            
            
            let imageViewH = heightOfImages(images: self.model?.images ?? [
                ])
            
            let tableViewY:CGFloat = 60.0 + textH + conetntH + 10.0 + imageViewH

            var tableViewH:CGFloat = 0
            
            var commentArr = [PXSCommentFrame]()
            
            if self.model?.comments?.count ?? 0 > 0 {
                for comment in self.model!.comments! {
                    let commentFrame = PXSCommentFrame.init()
                    commentFrame.comment = comment
                    commentArr.append(commentFrame)
                    tableViewH += commentFrame.height
                    
                }
            }
            
            self.commentFrame = commentArr
            
            self.tableViewFrame = CGRect.init(x: 55, y: tableViewY, width: kScreenWidth - 70, height: tableViewH)
            
            height = tableViewY + tableViewH + 20
            
    
            
        }
        
    }
    

    //图组的高度
    func heightOfImages(images:[String]) -> CGFloat {
        if images.count == 0 {
            return 0
        } else {
            let picHeight = (UIScreen.main.bounds.size.width - 15 * 2 - 5 * 2)/3
            var height = 0
            if images.count < 5 {
                height = ((images.count - 1)/2 + 1) * Int(picHeight) + (images.count - 1)/2 * 5 + 15
            }else {
                height = ((images.count - 1)/3 + 1) * Int(picHeight) + (images.count - 1)/3 * 5 + 15
            }
            return CGFloat(height);
        }
    }
}

同样评论回复cell的高度计算

1
2
3
4
5
6
7
8
9
10
11
12
13
class PXSCommentFrame: NSObject {
    var textFrame:CGRect?
    var height:CGFloat = 0
    var maxW:CGFloat?
    var comment:PXSComment? {
        didSet {
            let textH = self.comment?.text?.getStringHeight(width: kScreenWidth-70, font: 12)
            self.textFrame = CGRect.init(x: 10, y: 0, width: kScreenWidth-70, height: textH ?? 0)
            
            height = textH ?? 0
        }
    }
}

自定义cell的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
//
//  PXSTopicListCell.swift
//  PXSTrain
//
//  Created by Pro on 2020/9/22.
//  Copyright © 2020 com.liufeng.mysterFeng. All rights reserved.
//

import UIKit

class PXSTopicListCell: UITableViewCell,UITableViewDataSource,UITableViewDelegate {
    

    lazy var bgView :UIView = {
        let view = UIView.init()
        view.backgroundColor = AppColor.white
        return view
    }()
    lazy var  avatarView :UIImageView = {
        let imageV = UIImageView()
        imageV.image = UIImage.init(named: "默认头像108x108 二")
        return imageV
    }()
    lazy var  nicknameLable :UILabel = {
        let label = UILabel()
        label.font = AppFont.font12
        label.textColor = AppColor.black
        
        return label
    }()

    lazy var  timeLab :UILabel = {
        let label = UILabel()
        label.font = AppFont.font10
        label.textColor = AppColor.darkgGray

        return label
    }()

    lazy var  textLab :UILabel = {
        let label = UILabel()
        label.font = AppFont.font14
        label.textColor = AppColor.black
        label.numberOfLines = 0
        
        return label
    }()
    
    lazy var  contextLab :UILabel = {
        let label = UILabel()
        label.font = AppFont.font12
        label.textColor = AppColor.darkgGray

        label.numberOfLines = 0

        return label
    }()
    
    lazy var tableView : UITableView = {
        let tableView = UITableView.init(frame: .zero, style: UITableView.Style.plain)
        tableView.delegate = self
        tableView.dataSource = self
        tableView.bounces = false
        tableView.isScrollEnabled = false
        tableView.showsVerticalScrollIndicator = false
        tableView.showsHorizontalScrollIndicator = false
        tableView.separatorStyle = .none
        return tableView
    }()
    
    var picsArray = [UIImageView]()
    
    var frameModel:PXSTopicFrame? {
        didSet {
            
            nicknameLable.text = self.frameModel?.model?.user?.nickname
            timeLab.text = self.frameModel?.model?.creatTime
            textLab.text = self.frameModel?.model?.text
            contextLab.text = self.frameModel?.model?.contentStr
        
        }
    }
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        bgView.frame = CGRect.init(x: 0, y: 10, width: self.frame.size.width, height: self.frame.size.height-10)
        avatarView.frame = self.frameModel?.avatarFrame ?? .zero
        nicknameLable.frame = self.frameModel?.nicknameFrame ?? .zero
        timeLab.frame = self.frameModel?.createTimeFrame ?? .zero
        textLab.frame = self.frameModel?.textFrame ?? .zero
        contextLab.frame = self.frameModel?.contentFrame ?? .zero
        for (index, imageView) in self.picsArray.enumerated() {
            if index<self.frameModel?.imageArrFrame?.count ?? 0 {
                imageView.isHidden = false
                
                imageView.frame = self.frameModel?.imageArrFrame?[index] ?? .zero
                imageView.kf.setImage(with: URL.init(string: self.frameModel?.model?.images?[index] ?? ""))
            }
        }
        
        tableView.frame = self.frameModel?.tableViewFrame ?? .zero
        
    }

    
    
    func setupUI() {
        
        self.contentView.backgroundColor = AppColor.vcBgColor

        self.contentView.addSubview(bgView)
        
        tableView.register(cellWithClass: PXSTopicCommentCell.self)
        
        bgView.addSubview(avatarView)
        bgView.addSubview(nicknameLable)
        bgView.addSubview(timeLab)
        bgView.addSubview(textLab)
        bgView.addSubview(contextLab)
        bgView.addSubview(tableView)
        
        var imageViewArr = [UIImageView]()
        for i in 0..<9 {
            let imageView = UIImageView(frame: CGRect.zero)
            imageView.backgroundColor = UIColor.red
            imageView.isHidden = true
            imageView.tag = i
            imageView.isUserInteractionEnabled = true
            bgView.addSubview(imageView)
            let tap: UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(tapPicture(tap:)))
            imageView.addGestureRecognizer(tap)
            imageViewArr.append(imageView)
        }
        
        self.picsArray = imageViewArr
    }
    

    @objc func tapPicture(tap:UITapGestureRecognizer) {
        
    }



}


extension PXSTopicListCell {
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let commentFrame = self.frameModel?.commentFrame?[indexPath.row]

        return commentFrame?.height ?? 0
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.frameModel?.commentFrame?.count ?? 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let commentFrame = self.frameModel?.commentFrame?[indexPath.row]
        let cell = tableView.dequeueReusableCell(withClass: PXSTopicCommentCell.self, for: indexPath)
        cell.commentFrame = commentFrame
        return cell
    }

}
赏
微信打赏

赞赏是不耍流氓的鼓励

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Snippet
Copyright © 2017 | Powered by Hexo | Theme by Snippet