source

UI 테이블 뷰 횡단 머리글의 기본 스크롤 동작 변경

factcode 2023. 6. 3. 08:47
반응형

UI 테이블 뷰 횡단 머리글의 기본 스크롤 동작 변경

두 개의 섹션이 있는 UI 테이블 뷰가 있습니다.이것은 간단한 테이블 뷰입니다.viewForHeaderInSection을 사용하여 이 헤더에 대한 사용자 정의 뷰를 만들고 있습니다.지금까지, 좋아요.

기본 스크롤 동작은 섹션이 발견될 때 다음 섹션이 보기로 스크롤될 때까지 섹션 헤더가 탐색 막대 아래에 고정된 상태로 유지됩니다.

제 질문은 이것입니다. 섹션 헤더가 상단에 고정되지 않고 나머지 섹션 행과 함께 탐색 막대 아래로 스크롤되도록 기본 동작을 변경할 수 있습니까?

제가 뭔가 명백한 것을 놓쳤나요?

감사해요.

내가 이 문제를 해결한 방법은 조정하는 것입니다.contentOffset에 .contentInset에 시대에UITableViewControllerDelegate)로 표시됩니다.UIScrollViewDelegate) 다음과 같이 합니다.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
       CGFloat sectionHeaderHeight = 40;
   if (scrollView.contentOffset.y<=sectionHeaderHeight&&scrollView.contentOffset.y>=0) {
       scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0);
   } else if (scrollView.contentOffset.y>=sectionHeaderHeight) {
       scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0);
   }
}

여기서 유일한 문제는 위쪽으로 스크롤할 때 약간의 탄력이 떨어진다는 것입니다.


{참고: "40"은 섹션 0 헤더의 정확한 높이여야 합니다.섹션 0 헤더 높이보다 큰 숫자를 사용하면 손가락 느낌이 영향을 받는 것을 볼 수 있습니다("1000"과 같이 시도하면 위쪽에서 바운스 동작이 약간 이상하다는 것을 알 수 있습니다).번호가 섹션 0 헤더 높이와 일치하면 손가락 느낌이 완벽하거나 거의 완벽한 것처럼 보입니다.}

맨 위에 행이 0인 섹션을 추가하고 이전 섹션의 바닥글을 다음 섹션의 머리글로 사용할 수도 있습니다.

이렇게 하면 일반 스타일의 UITableViews에는 고정 헤더가 있고 그룹화된 스타일의 UITableViews에는 고정 헤더가 없다는 점을 활용할 수 있습니다.적어도 사용자 정의 테이블 셀을 사용하여 그룹화된 테이블의 일반 셀 모양을 모방하려고 합니다.

실제로 시도해 본 적이 없어서 안 될 수도 있지만, 그렇게 하는 것이 좋습니다.

늦게 오는 건 알지만, 결정적인 해결책을 찾았어요!

섹션이 10개인 경우 dataSource가 20개를 반환하도록 합니다.섹션 머리글에는 짝수를 사용하고 섹션 내용에는 홀수를 사용합니다. 이와 유사합니다.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section%2 == 0) {
        return 0;
    }else {
        return 5;
    }
}

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    if (section%2 == 0) {
        return [NSString stringWithFormat:@"%i", section+1];
    }else {
        return nil;
    }
}

Voila! :d

원래 IB를 사용하는 빠른 솔루션인 Here를 게시했습니다.동일한 작업을 프로그래밍 방식으로 간단하게 수행할 수 있습니다.

이를 달성하는 더 쉬운 방법(IB 사용):

UIV뷰를 테이블뷰로 끌어 머리글뷰로 만듭니다.

  1. 머리글 보기 높이를 100px로 설정
  2. 테이블 보기 내용 설정-100에 삽입(상단)
  3. 섹션 헤더는 이제 일반 셀과 마찬가지로 스크롤됩니다.

일부 사람들은 이 솔루션이 첫 번째 헤더를 숨긴다고 말했지만, 저는 그런 문제를 전혀 눈치채지 못했습니다.그것은 저에게 완벽하게 효과가 있었고 지금까지 본 것 중 가장 간단한 해결책이었습니다.

이 문제를 비해키 방식으로 해결하려면 다음과 같은 몇 가지 작업을 수행해야 합니다.

  1. 테이블 뷰 스타일을 다음으로 설정합니다.UITableViewStyleGrouped
  2. 를 설정합니다.backgroundColor[UIColor clearColor]
  3. 을 합니다.backgroundView 블 뷰 이 합 니 로 빈backgroundColor [UIColor clearColor]
  4. 경우 합니다.rowHeight 적하게오이드라버는또절드이▁appropri▁override라,오버▁or를 덮어씁니다.tableView:heightForRowAtIndexPath:각 행의 높이가 서로 다른 경우.

저는 지금까지 설명된 솔루션이 마음에 들지 않아 이를 결합하려고 했습니다.결과는 @awulf와 @cescofrie에서 영감을 얻은 다음 코드입니다.실제 테이블 뷰 헤더가 없기 때문에 저에게 적합합니다.테이블 뷰 머리글이 이미 있는 경우 높이를 조정해야 할 수 있습니다.

// Set the edge inset
self.tableView.contentInset = UIEdgeInsetsMake(-23.0f, 0, 0, 0);

// Add a transparent UIView with the height of the section header (ARC enabled)
[self.tableView setTableHeaderView:[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 23.0f)]];

테이블 뷰 스타일만 변경:

self.tableview = [[UITableView alloc] initwithFrame:frame style:UITableViewStyleGrouped];

UITableViewStyle 설명서:

UITableViewStylePlain - 일반 테이블 뷰입니다.횡단 머리글 또는 바닥글은 테이블 뷰를 스크롤할 때 인라인 구분 기호로 표시되고 부동합니다.

UITableViewStyleGrouped - 섹션에 개별 행 그룹이 표시되는 테이블 뷰입니다.섹션 머리글과 바닥글이 뜨지 않습니다.

그룹화된 테이블 보기 스타일 선택

테이블에서 그룹화된 테이블 뷰 스타일을 선택합니다. 스토리보드에서 뷰의 속성 관리자를 선택합니다.

횡단 뷰에서 헤더 높이가 동일한 투명 뷰로 테이블의 헤더 뷰를 설정합니다.또한 높이의 프레임으로 테이블 뷰를 시작합니다.

self.tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, - height, 300, 400)];

UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)] autorelease];
[self.tableView setTableHeaderView:headerView];

테이블 뷰 스타일 변경:

self.tableview = [[UITableView alloc] initwithFrame:frame style:UITableViewStyleGrouped];

UITableView에 대한 애플 문서에 따름:

UITableViewStylePlain - 일반 테이블 뷰입니다.횡단 머리글 또는 바닥글은 테이블 뷰를 스크롤할 때 인라인 구분 기호로 표시되고 부동합니다.

UITableViewStyleGrouped - 섹션에 개별 행 그룹이 표시되는 테이블 뷰입니다.섹션 머리글과 바닥글이 뜨지 않습니다.이 작은 변화가 당신에게 도움이 되기를 바랍니다.

대체 솔루션을 찾았습니다. 실제 헤더 섹션 대신 각 섹션의 첫 번째 셀을 사용하십시오. 이 솔루션은 그리 깨끗하지는 않지만 작동이 잘되므로 헤더 섹션과 메서드 셀ForRowAt에 정의된 프로토타입 셀을 사용할 수 있습니다.IndexPath는 indexPath.row==0을 요청합니다. true이면 헤더 섹션 프로토타입 셀을 사용하고, 그렇지 않으면 기본 프로토타입 셀을 사용합니다.

그룹화된 스타일은 기본적으로 iOS 7의 일반 스타일과 동일하게 보이기 때문에, 우리에게 가장 좋고 쉬운(즉, 최소한의 해킹) 해결책은 단순히 테이블 뷰의 스타일을 그룹화된 것으로 변경하는 것이었습니다.내용이 포함된 잭킹상단에 스크롤 어웨이 탐색 모음을 통합할 때 삽입이 항상 문제가 되었습니다.그룹화된 테이블 뷰 스타일의 경우 셀과 동일하게 보이고 섹션 헤더는 고정된 상태로 유지됩니다.스크롤 이상함이 없습니다.

테이블 보기에 음수 삽입값을 할당합니다.높은 섹션 헤더가 22px이고 이 헤더가 고정되지 않도록 하려면 데이터를 다시 로드한 직후에 다음을 추가합니다.

self.tableView.contentInset = UIEdgeInsetsMake(-22, 0, 0, 0); 
self.tableView.contentSize = CGSizeMake(self.tableView.contentSize.width, self.tableView.contentSize.height+22); 

저한테는 매력적으로 작용합니다.섹션 푸터에도 사용할 수 있습니다. 대신 하단에 네거티브 삽입을 지정하십시오.

스크롤 뷰에 테이블을 추가하면 잘 작동하는 것 같습니다.

여기서 제 답변을 확인하세요.이것은 해킹 없이 부동 섹션 헤더를 구현하는 가장 쉬운 방법입니다.

@로코마이크의 답변은 제 테이블 뷰에 가장 잘 맞았지만, 푸터를 사용할 때도 깨졌습니다.헤더와 바닥글을 사용할 때 수정된 솔루션은 다음과 같습니다.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return (self.sections.count + 1) * 3;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if (section % 3 != 1) {
        return 0;
    }
    section = section / 3;
    ...
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    if (section % 3 != 0) {
        return nil;
    }
    section = section / 3;
    ...
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    if (section % 3 != 0) {
        return 0;
    }
    section = section / 3;
    ...
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    if (section % 3 != 2) {
        return 0;
    }
    section = section / 3;
    ...
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    if (section % 3 != 0) {
        return nil;
    }
    section = section / 3;
    ...
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    if (section % 3 != 2) {
        return nil;
    }
    section = section / 3;
    ...
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    int section = indexPath.section;
    section = section / 3;
    ...
}

@awulf 답변의 빠른 버전, 잘 작동합니다!

func scrollViewDidScroll(scrollView: UIScrollView) {
    let sectionHeight: CGFloat = 80
    if scrollView.contentOffset.y <= sectionHeight {
        scrollView.contentInset = UIEdgeInsetsMake( -scrollView.contentOffset.y, 0, 0, 0)
    }else if scrollView.contentOffset.y >= sectionHeight {
        scrollView.contentInset = UIEdgeInsetsMake(-sectionHeight, 0, 0, 0)
    }
}

식탁을 차리는 것만으로도HeaderView 속성이 이를 수행합니다. 예:

 tableView.tableHeaderView = customView;

그리고 이것이 마지막입니다.

언급URL : https://stackoverflow.com/questions/664781/change-default-scrolling-behavior-of-uitableview-section-header

반응형