论坛 › 知识问答 › ios - Swift:如何在写入时不断地将 UICollectionViewCell 高度调整为 UITextView？

菜鸟教程小白 发表于 2022-12-11 20:25:25

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

                                            <p><p>下午好。 </p>

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

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

<p><strong>研究:</strong>
经过一番搜索，我找到了<a href="https://stackoverflow.com/questions/48851614/dynamically-change-cells-height-while-typing-text-and-reload-the-containing-ta" rel="noreferrer noopener nofollow">Dynamically change cell&#39;s height while typing text, and reload the containing tableview for resize</a>以及 <a href="https://stackoverflow.com/questions/460014/can-you-animate-a-height-change-on-a-uitableviewcell-when-selected/2063776#2063776" rel="noreferrer noopener nofollow">Can you animate a height change on a UITableViewCell when selected?</a>我也读过 <a href="https://developer.apple.com/documentation/uikit/uicollectionview" rel="noreferrer noopener nofollow">https://developer.apple.com/documentation/uikit/uicollectionview</a>但我觉得到目前为止我的快速知识不如这些帖子中的预期。</p>

<p>换句话说，我不知道如何为我的 UICollectionView 实现它。</p>

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

<p><strong>细胞类:</strong></p>

<pre><code>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: &#34;Didot&#34;, size: 16)
    tv.textColor = .black
    tv.textContainerInset = UIEdgeInsetsMake(4, 4, 4, 6)
    tv.placeholder = &#34;Write your event text here&#34;
    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: &#34;placeHolderEventTitleMark&#34;)
    iv.setImage(image, for: .normal)

    return iv
}()

func setupViews() {


    //MARK: - Constraints for EventsCell
    //horizontal
    addConstraintsWithFormat(format: &#34;H:|-16--16-|&#34;, views: textView)
    addConstraintsWithFormat(format: &#34;V:|-47--16-|&#34;, 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: &#34;H:|-12--\(cellWidth - 39)-|&#34;, views: eventPlaceholderMarkImage)
}
}
</code></pre>

<p><strong>UICollectionView 类:</strong></p>

<pre><code>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: &#34;H:||&#34;, views: collectionView)
    addConstraintsWithFormat(format: &#34;V:||&#34;, views: collectionView)

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

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

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



func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -&gt; 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) -&gt; 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: )


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

}
}
</code></pre>

<p><strong>第一次回答后尝试:</strong></p>

<pre><code>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) -&gt; CGFloat {

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

    return boundingBox.height
}

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

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

}
</code></pre>

<p>感谢您阅读我的帖子!</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>重新加载 Collection View 或单个单元格会使单元格闪烁，并且用户在键入时会失去对 TextView 的关注。如果用户失去焦点，他们必须再次点击 UITextView 才能继续输入。</p>
<p>当您检测到您的 UITextView 需要调整大小时，您可以使 collectionview 的布局无效 - 如果您的自动布局参数都正确，这将导致您的单元格调整大小。请参见下面的示例:</p>
<ol>
<li><p>我有一个 UICollectionCell，里面只有 UITextView，在 UITextView 上滚动是<strong>禁用</strong>。 UITextView 使用 AutoLayout 正确约束到单元格的所有边缘。最后，单元格也是 UITextView 的委托(delegate):</p>
<pre><code>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
}
...
...
}
</code></pre>
</li>
<li><p>将此单元格与 UITextViewDelegate 一致</p>
<pre><code>extension MyCollectionCell: UITextViewDelegate {

func textViewShouldBeginEditing(_ textView: UITextView) -&gt; 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&#39;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&#39;s delegate (most likely a UIViewController)
//that UITextView&#39;s intrinsic content size has changed
//perhaps with a protocol such as this:
delegate?.textViewDidChange(newText: textView.text, alsoRequiresResize: shouldResize)
}
</code></pre>
</li>
<li><p>那么当delegate收到通知时，可能会保存更新后的文本并更新布局如下:</p>
<pre><code>myCollectionView.collectionViewLayout.invalidateLayout()
</code></pre>
</li>
</ol>
<p>这个解决方案最好的部分是您不必调用 collectionView(_:layout:sizeForItemAt:)。</p>
<p>干杯!</p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - Swift:如何在写入时不断地将 UICollectionViewCell 高度调整为 UITextView？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/51642331/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/51642331/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - Swift:如何在写入时不断地将 UICollectionViewCell 高度调整为 UITextView？