• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - Swift:如何在写入时不断地将 UICollectionViewCell 高度调整为 UITextView?

[复制链接]
菜鸟教程小白 发表于 2022-12-11 20:25:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

下午好。

我已经为我的 iOS 应用程序的这个“功能”苦苦挣扎了几个小时,我需要一些帮助。

问题:我应该如何实现,以便当用户在 UITextView 中键入时尺寸增加(仅底部边距)并且单元格增加其高度以适应UITextView 同时动态?我不知道如何解决它。

研究: 经过一番搜索,我找到了Dynamically change cell's height while typing text, and reload the containing tableview for resize以及 Can you animate a height change on a UITableViewCell when selected?我也读过 https://developer.apple.com/documentation/uikit/uicollectionview但我觉得到目前为止我的快速知识不如这些帖子中的预期。

换句话说,我不知道如何为我的 UICollectionView 实现它。

我的代码现在看起来像这样(我在 EventsCell 中有更多的 UI 元素,但为了节省空间而将它们剪掉,因此它只是我想要更改的 UITextView 的底部边距)。我已经为我的 UITextView 将 RootCell 设置为 delegate ,然后我打算在编辑 textView 时获取它的高度以获得我想要的高度,但它不是不工作。

细胞类:

class EventsCell: UICollectionViewCell {
  override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = UIColor.white
    setupViews()


  }
  let textView: GrowingTextView = { // GrowingTextView is a cocoapod extending UITextView
    let rootCellDelegate = RootCell()
    let tv = GrowingTextView()
    tv.backgroundColor = .clear
    tv.allowsEditingTextAttributes = true
    tv.isScrollEnabled = false
    tv.font = UIFont(name: "Didot", size: 16)
    tv.textColor = .black
    tv.textContainerInset = UIEdgeInsetsMake(4, 4, 4, 6)
    tv.placeholder = "Write your event text here"
    tv.placeholderColor = UIColor.lightGray
    tv.autoresizingMask = .flexibleHeight
    tv.isUserInteractionEnabled = false
    tv.delegate = rootCellDelegate
    return tv
}()

let eventPlaceholderMarkImage: UIButton = {
    let iv = UIButton()
    let image = UIImage(named: "placeHolderEventTitleMark")
    iv.setImage(image, for: .normal)

    return iv
}()

func setupViews() {


    //MARK: - Constraints for EventsCell
    //horizontal
    addConstraintsWithFormat(format: "H:|-16-[v0(\(frame.width - 32))]-16-|", views: textView)
    addConstraintsWithFormat(format: "V:|-47-[v0]-16-|", views: textView)

    addConstraint(NSLayoutConstraint(item: eventPlaceholderMarkImage, attribute: .bottom, relatedBy: .equal, toItem: textView, attribute: .top, multiplier: 1, constant: -7))
    addConstraint(NSLayoutConstraint(item: eventPlaceholderMarkImage, attribute: .height, relatedBy: .equal, toItem: self, attribute: .height, multiplier: 0, constant: 20))
    addConstraintsWithFormat(format: "H:|-12-[v0(27)]-\(cellWidth - 39)-|", views: eventPlaceholderMarkImage)
}
}

UICollectionView 类:

class RootCell: BaseCell, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

      var textViewHeight : CGFloat?

func textViewDidChange(_ textView: UITextView) {
    textViewHeight = textView.textContainer.size.height + 63
    collectionView.reloadInputViews()
    collectionView.reloadData()
    collectionView.layoutSubviews()


}

  lazy var collectionView: UICollectionView = {
      let layout = UICollectionViewFlowLayout()
      let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
      cv.backgroundColor = UIColor.white
      cv.delegate = self
      cv.dataSource = self
      return cv
  }()

override func setupViews() {
    super.setupViews()

    addSubview(collectionView)
    addConstraintsWithFormat(format: "H:|[v0]|", views: collectionView)
    addConstraintsWithFormat(format: "V:|[v0]|", views: collectionView)

    collectionView.register(EventsCell.self, forCellWithReuseIdentifier: EventCellID)
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: EventCellID, for: indexPath)
    return cell
}



func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let height = textViewHeight ?? frame.width * 1/3
    let width = frame.width - 8
    return CGSize(width: width, height: height)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

//MARK: - Design selected cells background

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    if let cell = collectionView.cellForItem(at: indexPath) as? EventsCell {

        cell.textView.isUserInteractionEnabled = true
        cell.eventTitleLabel.isUserInteractionEnabled = true

        cell.layer.borderColor = UIColor.flatBlack.cgColor
        cell.layer.borderWidth = 2
        cell.layer.cornerRadius = 7
        cell.backgroundColor = GradientColor(.topToBottom, frame: cell.frame, colors: [UIColor.flatRed.withAlphaComponent(0.2), UIColor.white])


    } else {return}

}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {

    if let cell = collectionView.cellForItem(at: indexPath) {
        cell.layer.borderColor = UIColor.clear.cgColor
        cell.layer.borderWidth = 0
        cell.layer.cornerRadius = 0
        cell.backgroundColor = .white
    } else {return}

}
}

第一次回答后尝试:

class RootCell: BaseCell, UITextViewDelegate, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

var textViewText : String?

func textViewDidChange(_ textView: UITextView) {

    textViewText = textView.text
    DispatchQueue.main.async {
        self.collectionView.reloadInputViews()
        self.collectionView.reloadData()
    }


}

func heightWithConstrainedWidth(width: CGFloat, font: UIFont) -> CGFloat {

    let constraintRect = CGSize(width: width, height: CGFloat.greatestFiniteMagnitude)
    guard let boundingBox = textViewText?.boundingRect(with: constraintRect, options: [NSStringDrawingOptions.usesLineFragmentOrigin], attributes: [NSAttributedStringKey.font: font], context: nil) else {return frame.width * 1/3}

    return boundingBox.height
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let width = frame.width - 8
    let height = heightWithConstrainedWidth(width: width, font: UIFont(name: "Didot", size: 16)!)
    return CGSize(width: width, height: height)

}

感谢您阅读我的帖子!



Best Answer-推荐答案


重新加载 Collection View 或单个单元格会使单元格闪烁,并且用户在键入时会失去对 TextView 的关注。如果用户失去焦点,他们必须再次点击 UITextView 才能继续输入。

当您检测到您的 UITextView 需要调整大小时,您可以使 collectionview 的布局无效 - 如果您的自动布局参数都正确,这将导致您的单元格调整大小。请参见下面的示例:

  1. 我有一个 UICollectionCell,里面只有 UITextView,在 UITextView 上滚动是禁用。 UITextView 使用 AutoLayout 正确约束到单元格的所有边缘。最后,单元格也是 UITextView 的委托(delegate):

    class MyCollectionCell: UICollectionViewCell {
      @IBOutlet private weak var myTextView: UITextView!
    
      //this local variable will be used to determine if the intrinsic content size has changed or not
      private var textViewHeight: CGFloat = .zero
      ...
      ...
      override func awakeFromNib() {
       super.awakeFromNib()
       myTextView.delegate = self
      }
      ...
      ...
    }
    
  2. 将此单元格与 UITextViewDelegate 一致

    extension MyCollectionCell: UITextViewDelegate { 
    
    func textViewShouldBeginEditing(_ textView: UITextView) -> Bool {
      //this assumes that collection view already correctly laid out the cell
      //to the correct height for the contents of the UITextView
      //textViewHeight simply needs to catch up to it before user starts typing
      let fittingSize = textView.sizeThatFits(CGSize(width: myTextView.frame.width, height: CGFloat.greatestFiniteMagnitude))
      textViewHeight = fittingSize.height
    
      return true
    }
    
    func textViewDidChange(_ textView: UITextView) {
      //flag to determine whether textview's size is changing
      var shouldResize = false
      //calculate fitting size after the content has changed
      let fittingSize = textView.sizeThatFits(CGSize(width: myTextView.frame.width, height: CGFloat.greatestFiniteMagnitude))
    
      //if the current height is not equal to the fitting height
      //save the new fitting height to our local variable and inform the delegate 
      //that collection view needs resizing
      if textViewHeight != fittingSize.height {
        shouldResize = true
        //save the new height 
        textViewHeight = fittingSize.height
      }
    
      //notify the cell's delegate (most likely a UIViewController) 
      //that UITextView's intrinsic content size has changed
      //perhaps with a protocol such as this:
      delegate?.textViewDidChange(newText: textView.text, alsoRequiresResize: shouldResize)
    }
    
  3. 那么当delegate收到通知时,可能会保存更新后的文本并更新布局如下:

    myCollectionView.collectionViewLayout.invalidateLayout()
    

这个解决方案最好的部分是您不必调用 collectionView(_:layout:sizeForItemAt

干杯!

关于ios - Swift:如何在写入时不断地将 UICollectionViewCell 高度调整为 UITextView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51642331/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap