IOS 채 팅 인터페이스(자체 적응 문자)의 실현

이 글 은 주로 채 팅 창 을 실현 하 는 사고 과정 을 소개 한다.소스 코드 는소스 코드 링크에서 얻 을 수 있다.이 공 사 는 채 팅 의 기본 기능 을 실현 하고 기능 이 완선 되 지 않 으 므 로 여러분 이 PR 을 제기 하 는 것 을 환영 합 니 다.효과 도 는 다음 과 같 습 니 다.
 

나 는 상대 적 으로 간단 한 방식 으로 인터페이스의 구 조 를 실현 하고 복잡 한 계산 이 자가 적응 효 과 를 얻 지 못 하 기 를 바란다.
iOS 8 새로운 기능 소개
self size cell 은 최종 적 으로 제 프로젝트 에 사용 되 지 않 았 지만 제 가 판 구덩이 이기 때문에 간단 한 소 개 를 했 습 니 다.
iOS 8 에 서 는 UITableView 가 기능 self size cells 를 추가 하 는데,이 는 UITableView Cell 의 제약 을 통 해 UITableView contentSize 를 자동 으로 계산 하 는 기술 이다.이 새로운 특성 은 우리 에 게 두 가지 좋 은 점 을 가 져 다 준다.

우 리 는 더 이상 문자 에 적응 하기 위해 모든 cell 에서 문자 가 필요 로 하 는 높이 를 계산 할 필요 가 없다.

더 높 은 성능 을 가지 고 있다.(UITableView 가 reloadData 를 할 때마다 cell 의 높이 를 다시 계산 하 는 것 은 1 만 개의 cell 이 보 여 주 려 면 height ForRow AtIndexPath 를 1 만 번 호출 해 야 한 다 는 것 을 의미 하기 때문에 효율 이 매우 낮다

우 리 는 간단 한 demo 를 통 해 Self Size Cells 의 용법 을 소개 합 니 다.demo 소스 코드
효과
 
사용 절 차 는?

UITableView Cell 에 제약 조건 추가

UITableView 의 estimatedRowHeight 속성 설정

rowHeight 를 UITableView AutomaticDimension

으로 설정

코드 에서 height ForRow AtIndexPath 라 는 방법 을 실현 할 수 없 음 을 주의해 야 합 니 다

제약 을 추가 합 니 다.한 가지 원칙 은 text 의 높이 에 적응 하 는 것 을 제외 하고 모든 제약 이 필요 하 다 는 것 입 니 다.
 
코드 로 말 하면(여기 서 제3자 라 이브 러 리 SnapKit 를 사용 하여 코드 제약SnapKit 전송 문

textview.snp_makeConstraints{ (make)in
 make.top.equalTo(self.contentView).offset(15)
 make.width.equalTo(100)
 make.left.equalTo(self.contentView).offset(15)
 make.bottom.equalTo(self.contentView).offset(-15)
}

UILabel 에 게 numberOfLines 를 0 으로 설정 해 야 합 니 다.
그리고 UITableView 의 필수 속성 을 설정 합 니 다.

messageTable.estimatedRowHeight=44
messageTable.rowHeight=UITableViewAutomaticDimension

이상 은 self size cell 을 사용 하 는 모든 절차 입 니 다.
실전 편
다음은 실전 부분 입 니 다.채 팅 페이지 에서 self size cell 이라는 기능,채 팅 페이지 의 효과 도 를 사용 하고 싶 습 니 다.
 
다음은 제 가 message Cell 을 위해 제약 도 를 만 들 었 습 니 다.사실은 코드 제약 을 사 용 했 습 니 다.자세 한 내용 은 제 소스 코드 를 볼 수 있 습 니 다.
 
문제.
만약 내 가 하나의 기능 을 실현 하고 싶다 면 위 챗 처럼 내 려 가서 새로 고침 하고,소식 은 원래 의 메시지 페이지 에 머 물 러 있다.아래 그림 과 같다.
 
분석:데 이 터 를 새로 고 친 후 tableview.reloadData 방법 을 사용 하면 tableview 에 표 시 된 데 이 터 를 새로 고 칠 수 있 지만 tableview 는 맨 위로 굴 러 갑 니 다.다행히도 tableView 는 UIScrollView 의 하위 클래스 입 니 다.만약 에 우리 가 내용 을 바 꾸 면 contentSize 라 는 속성 은 반드시 바 뀔 것 입 니 다.즉,시스템 은 반드시 contentSize 의 set 방법 을 사용 하지 않 을 것 입 니 다.이 set 방법 을 다시 사용 하면 set ContentSize 를 사용 할 때마다 이전 창 이 있 는 위 치 를 계산 하고 contentSize 를 설정 한 후에 계산 번호 의 위치 로 이동 하면 더 많은 역사 정 보 를 부 드 럽 게 끌 어 올 릴 수 있 습 니 다.
다음은 부 드 러 운 스크롤 을 실현 하 는 관건 적 인 코드 입 니 다.

@objc(JChatMessageTable)
class JChatMessageTable: UITableView {
 var isFlashToLoad:Bool! = false
 override var contentSize: CGSize {
 didSet {
 if self.isFlashToLoad != false {
 if !CGSizeEqualToSize(self.contentSize, CGSizeZero) {
 if oldValue.height < self.contentSize.height {
 var offset = self.contentOffset
 offset.y = self.contentSize.height - oldValue.height
 self.contentOffset = offset
 }
 }
 }
 self.isFlashToLoad = false
 }
 }
 override init(frame: CGRect, style: UITableViewStyle) {
 super.init(frame: frame, style: style)
 }
 required init?(coder aDecoder: NSCoder) {
 fatalError("init(coder:) has not been implemented")
 }
 func loadMoreMessage() {
 self.isFlashToLoad = true
 self.reloadData()
 }
}

아 이 디 어 는 좋 지만 현실 은 항상 잔혹 합 니 다.구체 적 으로 실 행 될 때 새로운 문제 가 발생 했 습 니 다.왜냐하면 저 는 Self size cell 을 사용 하여 UITableView 에 적응 하 는 contentSize 에서 왔 기 때 문 입 니 다.Self size cell 은 UITableView 의 contentSize 를 처리 할 때 한꺼번에 값 을 부여 하 는 데 성공 한 것 이 아니 라 5 개의 점 마다 height(contentSize.height)를 증가 시 켰 습 니 다.적당 한 높이 까지,즉 contentSize 의 Set 방법 은 여러 번 떨 어 지고 위의 코드 는 전혀 작용 하지 않 습 니 다.Self size cells 라 는 특성 상 이 기능 을 구현 하기 어 려 울 것 같 습 니 다.
이때 나 는 Self Size Cells 사용 을 과감하게 포기 했다.비록 마음 이 아 프 지만 우 리 는 Self size cell 이 어떻게 높이 에 적응 하 는 지 대충 알 게 되 었 다.
self size cell 은 주로 저희 에 게 두 가지 좋 은 점 을 가 져 다 줍 니 다.

더 높 은 집행 효율 을 얻 을 수 있다

우 리 는 문자 의 frame 을 위해 복잡 한 계산 을 할 필요 가 없다.width 의 제약 과 위치 만 설정 하면 적응 하 는 Size

를 얻 을 수 있다.
message Table 메시지 의 전 시 는 페이지 별로 메 시 지 를 불 러 오 는 방식 이기 때문에 처음으로 20 개의 메시지 만 추가 할 뿐 height ForRow AtIndexPath 를 호출 하 는 데 시간 이 너무 오래 걸 리 는 카드 문제 가 발생 하지 않 습 니 다.그러나 사용자 가 계속 아래로 내 려 가면 height ForRow AtIndexPath 의 실행 시간 도 선형 으로 증가 하기 때문에 이 방면 의 시간 지출 을 줄 이기 위해 우 리 는 새로운 cell 을 성공 적 으로 불 러 올 때마다 높이 를 캐 시 하면 계산 시간 을 줄 일 수 있 고 매번 에 새로 보 여 준 역사 메시지 의 높이 만 계산 하면 된다.

첫 번 째 문 제 는 분석 을 통 해 우 리 는 캐 시 높이 의 방식 으로 성능 을 향상 시 킬 수 있다.

두 번 째 점 에 있어 서도 가장 중요 한 점 입 니 다.어떻게 수 동 으로 계산 하지 않 고 UITableViewCell 에 필요 한 높이 를 얻 을 수 있 는 지 분석 한 결과 UITableViewCell 은 systemLayoutSizeFitting Size 로 자신의 높이 를 계산 할 수 있 는 방법 이 있 습 니 다.그래서 저 는 다음 에 전체 UITableViewCell 을 생 성하 여 UITableViewCell 의 높이 를 계산 합 니 다.그러면 우 리 는 Cell 의 높이 를 수 동 으로 계산 할 필요 가 없습니다.통과messageCell.systemLayoutSizeFittingSize(CGSizeZero).height + 1// +1

되 돌아 오 는 높이 는 UITableView 에 필요 한 높이 입 니 다.
자동 적응 입력 상자
다음 그림 과 같은 효 과 를 실현 해 야 합 니 다.입력 상 자 는 입력 문자 의 크기 에 적응 할 수 있 습 니 다.JChatInputView

텍스트 크기 에 맞 게 입력 상자 가 필요 합 니 다.

TextView 에 다음 과 같은 제약 조건 을 추가 해 야 합 니 다.

inputTextView?.snp_makeConstraints(closure: { (make) ->Voidin
 make.right.equalTo(self.showMoreBtn.snp_left).offset(-5)
 make.left.equalTo(self.switchBtn.snp_right).offset(5)
 make.top.equalTo(inputWrapView).offset(5)
 make.bottom.equalTo(inputWrapView).offset(-5)
 make.height.greaterThanOrEqualTo(30)
 make.height.lessThanOrEqualTo(100)
})

inpuutWarpView 는 다음 과 같은 제약 조건 을 추가 합 니 다.input WarpView 의 높이 는 TextView 의 높이 와 다른 제약 으로 계산 되 기 때문에 고도 제약 을 추가 할 필요 가 없습니다.

inputTextView?.snp_makeConstraints(closure: { (make) ->Voidin
 make.right.bottom.left.equalTo(superView)
})

채 팅 인터페이스의 자체 적응 UI 부분 을 소개 합 니 다.유연 한 사용 제약 은 대량의 코드 를 줄 일 수 있 습 니 다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!