Home > Software engineering >  Multiline label with both sides images
Multiline label with both sides images

Time:10-19

Can we able to set the multiline label with left and right side as image. please check the attached image.

Yes, I am using tableview cell xib. Need to do this with constraints.

enter image description here

I tried left imageview - leading, width, height, vertically in container

second label - top, bottom , leading to first image , trailing to second image. number of lines = 0.

right image view embed with UIView - this is for when select the image background colour changed to blue with checkmark image constraint - trailing, width , height , vertically in container

The issue is label is getting truncated when large text is there.

After that,I tried to remove the width of second image, but getting constraint issue.

Please help me to resolve this issue.

Thankyou in advance.

enter image description here

enter image description here

CodePudding user response:

The cell can be prevented from performing dynamic auto-resizing for a variety of reasons:

  1. Constraints could be preventing dynamic height:

    To confirm the constraints, run the app in the debugger, then tap on the “Debug View Hierarchy” button and confirm the constraints. It is a quick way to see all the constraints (and make sure there are not any that you did not intend):

    enter image description here

    If you had some extraneous constraint (e.g., an unintended height combined with top/bottom), that could cause the label to not grow in height to fit the text.

  2. The table view could be defined to not support automatic dimension of the cells:

    Another possible source of the problem is the table view’s row height was set to some fixed value, preventing the label from expanding to fit the text. Confirm that the table view’s row height is set to automaticDimension. Either in IB:

    enter image description here

    Or, programmatically:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        tableView.register(UINib(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: "CustomCell")
    
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 44
    }
    

     

  3. You could have something in code that is forcing a particular cell height:

    Needless to say, make sure you are not implementing a specific height in enter image description here


Not that it is relevant, but this is the code that generated the above image. Not much here to see, admittedly:

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    var strings = [
        "This is a very long string that goes on and on. This is so long that it will take a few lines. This one takes four lines, but the next one takes only one.",
        "This is short string.",
        "This is a very long string that goes on and on."
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(UINib(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: "CustomCell")
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return strings.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
        cell.customLabel.text = strings[indexPath.row]
        return cell
    }
}
  • Related