美文网首页
类似朋友圈搭建

类似朋友圈搭建

作者: 菲特峰 | 来源:发表于2020-10-16 14:18 被阅读0次

设计图效果

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,只是主要实现逻辑

//
//  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的高度计算

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的代码

//
//  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
  }

}

相关文章

  • 类似朋友圈搭建

    设计图效果 对于不等高cell的自适应有xib和纯代码方式 参考https://www.jianshu.com/p...

  • 框架_Django_1

    Django 环境搭建 虚拟环境搭建(Ubuntu,windows类似) Django基本流程 Django的特点...

  • Flutter 项目学习

    1,main首页搭建TabNavigator extends BottomNavigationBar(类似vie...

  • 【福利】获得免费云服务器及搭建教程

    云服务器有什么用? 搭建个人网站,网站调试。 搭建QQ群娱乐机器人类似于QQ小冰。 搭建办公系统,搭建个人网盘。 ...

  • flask(3)

    这次我们聊聊后台页面的搭建,后台通常是用于管理的 后台页面搭建 我们类似于前台搭建,我们搭建一个后台管理员登录界面...

  • Product Hunt 2019.11.24

    Product Hunt 2019.11.24 Kampsite类似搭建论坛,让用户提供建议和反馈 2 Minut...

  • Android 开发环境搭建

    Android开发环境搭建和Java开发环境搭建类似,只不过是开发工具不同。 一、JDK下载安装配置 参阅JDK下...

  • Neutron SDN 手动实践

    安装架构介绍 搭建类似neutron (openvswitch + gre) 实现SDN 的环境,学习了解其工作原...

  • linux上安装gogs搭建个人仓库

    gogs是一款类似github的开源文件/代码管理系统(基于Git),它的搭建极为简单,可以用来搭建个人的私有仓库...

  • 2.2 搭建本地单节点测试网络

    搭建本地单节点测试网络 本教程用于描述如何搭建本地单节点测试网络。本教程功能上类似于 mininode,但是脚本更...

网友评论

      本文标题:类似朋友圈搭建

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