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

8004 단어 채 팅 창
이 글 은 주로 채 팅 창 을 실현 하 는 사고 과정 을 소개 한다.소스 코드 는소스 코드 링크에서 얻 을 수 있다.이 공 사 는 채 팅 의 기본 기능 을 실현 하고 기능 이 완선 되 지 않 으 므 로 여러분 이 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 부분 을 소개 합 니 다.유연 한 사용 제약 은 대량의 코드 를 줄 일 수 있 습 니 다.
    이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

    좋은 웹페이지 즐겨찾기