채팅보기에 대한 자동 레이아웃 제약 조건 관리

Question

채팅보기를 만들고 현재 autolayout을 기반으로 셀을 디자인하려고합니다. 내 주요 문제는 이미지보기가 있고 그 아래에 여러 줄로가는 채팅 텍스트의 레이블이 있습니다. 이미지가 없으면 텍스트 만 표시되고 텍스트가없는 경우 이미지 만 표시되어야합니다. 이미지는 셀 너비의 60 %이고 높이는 40 % 여야합니다. 아래에 셀 디자인이 있습니다. 명확성을 위해 각 뷰에 배경색을 추가했습니다.

그러나 비례 높이를 제공함으로써 , 나는 프로그래밍 방식의 높이를 설정할 수 없습니다입니다. 그래서 현재는 이미지 뷰의 고정 높이를 지정하고 프로그래밍 방식으로 코드에서 관리하려고했습니다. 아래 코드는 이미지 뷰와 텍스트 높이를 조정하는 코드입니다.

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 
    } 

이

지금

다중 행이 작동하는 것 같다하지 않는 결과이다. 나는 최선의 접근 방식을 따르고 있는지 확신 할 수 없다. 누군가 해결책이나 제안이 있다면 알려주십시오.

추 신 : JSQMessagesViewController와 같은 제 3자를 제안하지 마십시오. 나는 이미 그것들을 알고있다. 나는 이것을 학습의 일환으로하고있다.

Answer 1

셀의 모든 구성 요소에 대해 하단 구속 조건을 적용하면됩니다. 및 테이블보기 (EstimatedRowHight 및 HightForRow)의 대리자 메서드를 호출하십시오. 그것은 셀의 정확한 높이를 반환합니다. 또한 표시 여부와 상관없이 사용자 정의 할 수 있습니다.

텍스트 레이블에는 다른 구성 요소와 관련하여 하단 구속 속성이 있어야합니다.

Answer 2

UIImageView와 UILabel이 같은 셀에 절대로 표시되지 않으면 두 셀 사이의 모든 제약 조건 관계를 제거하고 superview와 관련된 관계를 만들 수 있습니다. 그런 다음 일부 코드를 사용하여 UIImageView 또는 UILabel 가시성을 관리하고 CollectionView/TableView 대리자 메서드에서 각 셀의 적절한 높이를 계산할 수 있습니다.

Answer 3

나는 문제가 당신의 라인하는 대신 수동으로 높이를 계산해야 chatText.frame 높이를 얻기의

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

에 생각합니다. 다음 함수를 사용하여 셀 높이를 계산했습니다.

+ (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; 
}