Verwalten von automatischen Layoutbeschränkungen für eine Chat-Ansicht

Question

Ich erstelle eine Chat-Ansicht und versuche derzeit, die Zelle basierend auf dem automatischen Layout zu entwerfen. Mein Hauptproblem ist, dass es eine Bildansicht gibt und direkt darunter eine Beschriftung für Chat-Text, die mehrere Zeilen enthält, und wenn es kein Bild gibt, sollte nur Text angezeigt werden und wenn es keinen Text gibt, sollte nur Bild angezeigt werden. Das Bild sollte 60% der Zellbreite und 40% der Höhe betragen. Unten ist mein Zellenentwurf, ich habe Hintergrundfarbe zu jeder Ansicht für Klarheit hinzugefügt.

Aber durch proportionale Höhe zu geben, ich bin seine Höhe einstellen programmatisch nicht in der Lage. Daher habe ich versucht, eine feste Höhe für die Bildansicht anzugeben und programmgesteuert im Code zu verwalten. Unten ist mein Code, wo ich Bildansicht und Chat-Texthöhe anpassen.

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
     let cell : ChatViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("chatCell", forIndexPath: indexPath) as! ChatViewCell 

     cell.fullNameLabel.text = tempArray[indexPath.row].0 
     cell.fullDateLabel.text = tempArray[indexPath.row].1 
     cell.chatSentStatusLabel.text = tempArray[indexPath.row].2 
     cell.chatTimeLabel.text = tempArray[indexPath.row].3 


     let chatBubbleData1 = tempArray[indexPath.row].4 

     if (chatBubbleData1.image == nil) 
     { 
      cell.chatImageHeightConstraint.constant = 0 
     } 
     else 
     { 
      cell.chatImageHeightConstraint.constant = 150 

     } 

     cell.chatTextContainerView?.layer.cornerRadius = 10.0 
     cell.chatTextContainerView?.layer.masksToBounds = true 

     cell.chatBubbleView?.layer.cornerRadius = 10.0 
     cell.chatBubbleView?.layer.masksToBounds = true 

     cell.chatImageView.image = chatBubbleData1.image 
     cell.userPointerView.colors = (0.0, 0.0, 1.0, 1.0) 
     cell.userPointerView.backgroundColor = .clearColor() 

     cell.chatImageView?.layer.cornerRadius = 10.0 
     cell.chatImageView?.layer.masksToBounds = true 

     if (chatBubbleData1.text?.characters.count > 0) 
     { 
      cell.chatText?.numberOfLines = 0 // Making it multiline 
      cell.chatText?.text = chatBubbleData1.text 
      cell.chatText?.sizeToFit() 
      cell.chatTextContainerHeightConstraint.constant = CGRectGetHeight(cell.chatText.frame)+20 
     } 
     else 
     { 
      cell.chatText?.text = "" 
      cell.chatTextContainerHeightConstraint.constant = 0 
     } 

     cell.setNeedsDisplay() 
     return cell 
    } 

Dies ist das Ergebnis jetzt

Das mehrzeilige nicht zu funktionieren scheint. Ich bin mir nicht sicher, ob ich dem besten Ansatz folge. Wenn jemand irgendwelche Lösungen oder Vorschläge hat, lass es mich wissen.

PS: Bitte schlagen Sie keine Dritten wie JSQMessagesViewController vor. Ich bin mir dessen schon bewusst. Ich mache das als Teil des Lernens.

Answer 1

Sie haben nur eine untere Einschränkung für alle Komponenten in der Zelle. und rufen Sie die Delegate-Methoden der Tabellenansicht auf (EstimatedRowHight und HightForRow). es wird die genaue Höhe der Zelle zurückgeben. Und Sie können auch anpassen, ob es angezeigt wird oder nicht ..

erinnern, dass Textbeschriftungen sollte die untere Einschränkung Eigenschaft in Bezug auf die anderen Komponenten haben.Hoffe Sie bekommen, was ich meinte.

Answer 2

Wenn UIImageView und UILabel niemals in derselben Zelle angezeigt werden, können Sie alle Abhängigkeitsbeziehungen zwischen ihnen entfernen und sie nur in Beziehung mit Superview setzen. Dann können Sie mit etwas Code die Sichtbarkeit von UIImageView oder UILabel verwalten und die richtige Höhe für jede Zelle in der CollectionView/TableView-Delegate-Methode berechnen.

Answer 3

Ich denke Problem in Ihrer Linie ist

cell.chatTextContainerHeightConstraint.constant = CGRectGetHeight(cell.chatText.frame)+20 

Statt Ihre chatText.frame Höhe des Erhaltens der Höhe manuell berechnen soll. Ich habe die folgende Funktion verwendet, um die Zellenhöhe zu berechnen:

+ (CGFloat)calculateCellHeightForText:(NSString *)text cellWidth:(CGFloat)cellWidth { 
    CGFloat maxWidth = cellWidth; 
    CGSize textSize = [text boundingRectWithSize:CGSizeMake(maxWidth, MAXFLOAT) 
             options:NSStringDrawingUsesLineFragmentOrigin 
             attributes:@{NSFontAttributeName : [UIFont fontWithName:@"CALIBRI" size:17]} 
             context:nil].size; 
    return textSize.height; 
}