IOS 채 팅 인터페이스(자체 적응 문자)의 실현
8004 단어 채 팅 창
나 는 상대 적 으로 간단 한 방식 으로 인터페이스의 구 조 를 실현 하고 복잡 한 계산 이 자가 적응 효 과 를 얻 지 못 하 기 를 바란다.
iOS 8 새로운 기능 소개
self size cell 은 최종 적 으로 제 프로젝트 에 사용 되 지 않 았 지만 제 가 판 구덩이 이기 때문에 간단 한 소 개 를 했 습 니 다.
iOS 8 에 서 는 UITableView 가 기능 self size cells 를 추가 하 는데,이 는 UITableView Cell 의 제약 을 통 해 UITableView contentSize 를 자동 으로 계산 하 는 기술 이다.이 새로운 특성 은 우리 에 게 두 가지 좋 은 점 을 가 져 다 준다.
효과
사용 절 차 는?
코드 로 말 하면(여기 서 제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 은 주로 저희 에 게 두 가지 좋 은 점 을 가 져 다 줍 니 다.
message Table 메시지 의 전 시 는 페이지 별로 메 시 지 를 불 러 오 는 방식 이기 때문에 처음으로 20 개의 메시지 만 추가 할 뿐 height ForRow AtIndexPath 를 호출 하 는 데 시간 이 너무 오래 걸 리 는 카드 문제 가 발생 하지 않 습 니 다.그러나 사용자 가 계속 아래로 내 려 가면 height ForRow AtIndexPath 의 실행 시간 도 선형 으로 증가 하기 때문에 이 방면 의 시간 지출 을 줄 이기 위해 우 리 는 새로운 cell 을 성공 적 으로 불 러 올 때마다 높이 를 캐 시 하면 계산 시간 을 줄 일 수 있 고 매번 에 새로 보 여 준 역사 메시지 의 높이 만 계산 하면 된다.
messageCell.systemLayoutSizeFittingSize(CGSizeZero).height + 1// +1
자동 적응 입력 상자
다음 그림 과 같은 효 과 를 실현 해 야 합 니 다.입력 상 자 는 입력 문자 의 크기 에 적응 할 수 있 습 니 다.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 부분 을 소개 합 니 다.유연 한 사용 제약 은 대량의 코드 를 줄 일 수 있 습 니 다.이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
C\#채 팅 창 과 떨 림 실현그러면 크기 를 어떻게 설정 해 야 할 까요?너비 가 당 길 수 있 지만 높이 가 안 되 기 때문에 Multiline 이라는 속성 을 설정 해 야 높이 를 설정 할 수 있 습 니 다.그리고 읽 기만 하면 ReadOn...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.