如何根据带有打字机效果的UILabel设置单元格的高度 [英] How to set the height of a cell depending on a UILabel with a typewriter effect

问题描述

我在UITableView的单元格中有一个UILabel。

要根据标签的高度调整单元格的高度，没关系，它可以正常工作。 / p>

但是我需要添加另一个约束。
我需要显示带有打字机效果的UILabel（逐个字母）。

我对该效果的扩展效果很好：

 扩展UILabel {
 
 func setTextWithTypeAnimation（id：String，typedText：String，pauseCharacterArray：[Int：Double]，characterInterval：TimeInterval = 0.06）{
 
 text = 
 
 let group = DispatchGroup（）
 group.enter（）
 
 DispatchQueue.global （qos：.userInteractive）.async {
 
 for typedText.characters.enumerated（）{
 
 DispatchQueue.main.async {
 self.text = self.text！ +字符串（字符）
} 
 
 Thread.sleep（forTimeInterval：characterInterval）
} 
 
 group.leave（）
} 
 
 group.notify（queue：.main）{
 //做点
} 
} 
  

我尝试在configureCell基金中调用此函数：

  func tableView（_ tableView：UITableView，cellForRowAt indexPath：IndexPath）-> UITableViewCell {
 
 let cell = tableView.dequeueReusableCell（withIdentifier： ParagraphTableViewCell，for：indexPath）为！ ParagraphTableViewCell 
 
 cell.delegate = self 
 self.configureCell（cell：cell，atIndexPath：indexPath）
返回单元格
} 
 
 
 func configureCell（cell：ParagraphTableViewCell，atIndexPath indexPath：IndexPath）{
 
让段落= paragraphArray [indexPath.row]为！ 
 
段让pauseCharactersArray：[Int：Double] = [1：0，6：0] 
 cell.dialogueLabel.setTextWithTypeAnimation（id： intro，typedText： lorem ipsum， pauseCharacterArray：pauseCharactersArray）
} 
  

但标签未显示。我认为这是因为单元格中标签的高度设置为0，并且从未更新。

我不知道如何调整单元格的高度实时（每次显示字符）

编辑

我使用自动布局

编辑2

打字机效果在没有UITableView的简单UILabel中运行：

在xib中设置的单元格：

当我运行时，UILabel不会出现：

< a href = https://i.stack.imgur.com/vy31w.png rel = noreferrer>

解决方案

我能够使用其他方法

• 我创建了一个堆栈视图来对标签和按钮进行分组（以及一个子堆栈视图来排列按钮）。 / li>
  
• 在按钮的堆栈视图中，我通过IB固定了高度。


• 在父堆栈视图中。我将堆栈视图固定到单元格的边距。


• 在标签上，我固定了两侧以适合堆栈视图（不固定底部，您可以自由固定顶部）

这是我的

• 在ViewController上，设置以下属性：

    yourTableView.rowHeight = UITableViewAutomaticDimension 
   yourTableView.rowHeight.estimatedRowHeight = 40 //您应在此处设置初始估算行高，则任意选择数字40 
    




• 我编辑了添加回调的方法。

    func setTextWithTypeAnimation（id：String，typedText：String，pauseCharacterArray：[Int：Double]，characterInterval：TimeInterval = 0.06，callBackAfterCharacterInsertion：（（ （）->（））？）{
   
   text = 
   
   let group = DispatchGroup（）
   gr oup.enter（）
   
   DispatchQueue.global（qos：.userInteractive）.async {
   
   for typedText.characters.enumerated（）{
   
   DispatchQueue.main.async {
   self.text = self.text！ + String（字符）
   callBackAfterCharacterInsertion？（）
  } 
   
   Thread.sleep（forTimeInterval：characterInterval）
  } 
   
   group.leave （）
  } 
   
   group.notify（queue：.main）{
   //做某事
  } 
  } 
    




• 然后通过回调，我调用了 beginUpdates（）每次字符更新后，从TableView中<< c $ c> endUpdates（）。

希望这对您有任何帮助。

I have a UILabel in a cell of UITableView.

To adjust the height of the cell depending the height of the label, it's ok, it works perfectly.

But I need to add another constraints. I need to display the UILabel with a typewriter effect (letter by letter).

My extension for the effect works well:

extension UILabel{

    func setTextWithTypeAnimation(id:String, typedText: String, pauseCharacterArray: [Int:Double], characterInterval: TimeInterval = 0.06 ) {

        text = ""

        let group = DispatchGroup()
        group.enter()

        DispatchQueue.global(qos: .userInteractive).async {

            for (index, character) in typedText.characters.enumerated() {

                DispatchQueue.main.async {
                    self.text = self.text! + String(character)
                }

                Thread.sleep(forTimeInterval: characterInterval)
            }

        group.leave()
    }

    group.notify(queue: .main) {
        //do something
    }
}

I tried to call this function in my configureCell fund :

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "ParagraphTableViewCell", for: indexPath) as! ParagraphTableViewCell

    cell.delegate = self
    self.configureCell(cell: cell, atIndexPath: indexPath)
    return cell
 }


func configureCell(cell: ParagraphTableViewCell, atIndexPath indexPath: IndexPath) {

    let paragraph = paragraphArray[indexPath.row] as! Paragraph

    let pauseCharactersArray:[Int:Double] = [1:0, 6:0]
    cell.dialogueLabel.setTextWithTypeAnimation(id:"intro", typedText: "lorem ipsum", pauseCharacterArray: pauseCharactersArray)
}

But the label doesn't appear. I think it's because the height of the label in the cell is set to 0, and it's never updated.

I don't know how to adjust the height of the cell "in live" (every time a character is displayed)

EDIT

I use autolayout

EDIT 2

The typewriter effect, run in a simple UILabel without UITableView:

The cell set in the xib:

When I run, the UILabel doesn't appear:

解决方案

I was able to achieve using a different method.

• I created a stack view to group the label and the buttons (and a sub stack view to line up your buttons).
• On button's stack view, I pinned the height through IB.
• On parent stack view. I pinned the stack view to cell's margin.
• On label, I pinned both sides to fit the stack view (do not pin the bottom side, you are free to pin the top side)

Here is my IB Screen Shot to use as reference.

• On your ViewController, set the following properties:

  yourTableView.rowHeight = UITableViewAutomaticDimension
  yourTableView.rowHeight.estimatedRowHeight = 40 // You should set an initial estimated row height here, the number 40 was chosen arbitrarily
  

• I edited your method to add an callback.

  func setTextWithTypeAnimation(id:String, typedText: String, pauseCharacterArray: [Int:Double], characterInterval: TimeInterval = 0.06, callBackAfterCharacterInsertion:(()->())?) {
  
    text = ""
  
    let group = DispatchGroup()
    group.enter()
  
    DispatchQueue.global(qos: .userInteractive).async {
  
      for (_, character) in typedText.characters.enumerated() {
  
          DispatchQueue.main.async {
              self.text = self.text! + String(character)
              callBackAfterCharacterInsertion?()
          }
  
          Thread.sleep(forTimeInterval: characterInterval)
      }
  
      group.leave()
    }
  
    group.notify(queue: .main) {
      //do something
    }
  }
  

• And through the callback, I called the beginUpdates() and endUpdates(), from the TableView, after each character update.

Hope this help you in any way.

这篇关于如何根据带有打字机效果的UILabel设置单元格的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！