중첩 된 스크롤 뷰가있는 iOS 7 스프링 보드 멀티 태스킹 UI 구현

Question

iOS 7의 멀티 태스킹 UI와 매우 흡사하게 카드 레이아웃을 만들려고합니다. iOS 7에서 엔지니어링 WWDC 비디오 Exploring Scroll Views는 중첩 된 보기를 스크롤하여 iOS 7에서 그 효과를 달성했지만 자세히 설명하지는 않았습니다. 가장 직관적 인 방식으로 보였으므로 UICollectionView를 사용했을 것입니다.

지금까지 사용자 지정 UICollectionViewFlowLayout을 만들려고했지만 매우 어렵고 찾고있는 기능을 제공하지 않습니다. 또한 UICollectionViewFlowLayout을 사용하여 UICollectionView를 사용해 보았습니다. 각 사용자 정의 UICollectionViewCells 셀에는 하위보기로 카드가있는 scrollview가 있습니다. Autolayout을 사용하고 있기 때문에 카드 하단이 스크롤보기 상단과 연속적이라는 제약 조건을 추가했습니다. 그런 다음 사용자가 스 와이프 할 때 카드가 화면 밖으로 스크롤되도록 스크롤 뷰의 콘텐츠 크기 내에 추가 공간을 추가했습니다.

[self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[cardView(400)]-650-|" 
                      options:0 
                      metrics:nil 
                      views:views]]; 

때문에 마찬가지로 | 의해 지정된 수퍼은 셀을 채우고있는 ScrollView된다.

그리고 또한 내가 할 수없는이 나는 오류가 발생하기 때문에 전체 화면을 커버하기에 충분 sizeForItemAtIndexPath는 :

the behavior of the UICollectionViewFlowLayout is not defined because: the item height must be less that the height of the UICollectionView minus the section insets top and bottom values.

그래서 질문은, 내가 UICollectionViewFlowLayout 대신 중첩 활용하는 노력의 정의를해야한다 scrollviews?

Answer 1

다른 사람이이 질문에 비틀 거리는 경우에 대답은 아니 었습니다. 스 와이프 동작을 처리하기 위해 사용자 지정 UICollectionViewFlowLayout을 작성해서는 안됩니다. UIScrollViews를 사용하면 사용자 정의 레이아웃을 구현하는 것보다 훨씬 자연 스럽습니다. 스크롤보기가 iOS에서 동일한 스크롤 및 추진력을 제공합니다.

중첩 된 UIScrollViews를 사용하여 매우 간단하게 문제를 해결할 수있었습니다. 내가받은 경고는 사실 탭 뷰 컨트롤러의 첫 번째 탭 위치에 컬렉션 뷰를 놓고 셀이 전체 화면을 차지하도록하는 버그였습니다. 이 버그는 컬렉션보기 뒤에 추가보기를 추가하여 해결되었습니다.

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    [self.cardCollectionView registerClass:[SwipeCardCollectionViewCell class] forCellWithReuseIdentifier:kCollectionViewCellIdentifier]; 
    self.cardCollectionView.alwaysBounceVertical = NO; 
    self.cardCollectionView.alwaysBounceHorizontal = YES; 
} 

- (void)loadView { 
    self.view = [[UIView alloc] init]; 

    self.layout = [[UICollectionViewFlowLayout alloc] init]; 
    self.layout.scrollDirection = UICollectionViewScrollDirectionHorizontal 
    self.cardCollectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.layout]; 
    self.cardCollectionView.translatesAutoresizingMaskIntoConstraints = NO; 
    self.cardCollectionView.backgroundColor = [UIColor clearColor]; 
    self.cardCollectionView.delegate = self; 
    self.cardCollectionView.dataSource = self; 
    [self.view addSubview:self.cardCollectionView]; 

    NSDictionary *views = @{@"cardCollectionView": self.cardCollectionView} 

    [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[cardCollectionView]|" 
                     options:0 
                     metrics:nil 
                     views:views]]; 

    [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[cardCollectionView]|" 
                     options:0 
                     metrics:nil 
                     views:views]]; 

                   views:views]]; 
} 

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ 
    SwipeCardCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCollectionViewCellIdentifier forIndexPath:indexPath]; 
    cell.delegate = self; 
    return cell; 
} 

내가 만든 컬렉션 뷰의 sizeForItemAtIndexPath: 내가 구현하는 대신 컬렉션 뷰의 경계의 폭 카드의 폭 페이지에 카드를 가지고

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { 
    return CGSizeMake(self.cardCollectionView.frame.size.width - CARD_WIDTH_INSET, self.cardCollectionView.frame.size.height); 
} 

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{ 
    return 0.0; 
} 

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { 
    return CARD_SPACING; 
} 

화면의 크기와 동일 scrollViewWillEndDragging:withVelocity:targetContentOffset: 및 컬렉션보기의 양쪽에 내용 삽입을 추가하십시오.

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{ 
    CGFloat inset = CARD_WIDTH_INSET/2.0; 
    return UIEdgeInsetsMake(0.0, inset, 0.0, inset); 
} 

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset { 
    CGFloat cardWidth = self.cardCollectionView.frame.size.width - CARD_WIDTH_INSET; 
    NSInteger cardNumber = round(targetContentOffset->x/(cardWidth + CARD_SPACING)); 
    CGFloat finalOffset = cardNumber*(cardWidth + CARD_SPACING); 

    targetContentOffset->x = finalOffset; 
} 

마지막으로, 내가 만든 맞춤 스 와이프 셀에 스크롤보기를 추가하여 카드를 스 와이프 할 수있었습니다. 페이징을 사용하면 스프링 보드 멀티 태스킹 UI 에서처럼 카드가 화면에서 바로 스 와이프 할 수 있습니다. 이와 같이,

- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) { 
     self.cardContainerScrollView = [[UIScrollView alloc] init]; 

     self.cardContainerScrollView.delegate = self; 
     self.cardContainerScrollView.pagingEnabled = YES; 
     self.cardContainerScrollView.translatesAutoresizingMaskIntoConstraints = NO; 
     self.cardContainerScrollView.alwaysBounceHorizontal = NO; 
     self.cardContainerScrollView.alwaysBounceVertical = YES; 
     self.cardContainerScrollView.showsHorizontalScrollIndicator = NO; 
     self.cardContainerScrollView.showsVerticalScrollIndicator = NO; 

     self.cardView = [[UIView alloc] init]; 
     self.cardView.translatesAutoresizingMaskIntoConstraints = NO; 
     self.cardView.backgroundColor = [UIColor whiteColor]; 

     [self.cardContainerScrollView addSubview:self.cardView]; 

     [self.contentView addSubview:self.cardContainerScrollView]; 

     NSDictionary *views = @{@"cardView": self.cardView, 
           @"cardContainerScrollView": self.cardContainerScrollView}; 

     [self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[cardContainerScrollView]|" 
                        options:0 
                        metrics:nil 
                        views:views]]; 

     [self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[cardContainerScrollView]|" 
                        options:0 
                        metrics:nil 
                        views:views]]; 

     [self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[cardView(400)]-650-|" 
                        options:0 
                        metrics:nil 
                        views:views]]; 

     [self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[cardView(260)]|" 
                        options:0 
                        metrics:nil 
                        views:views]]; 

    } 
    return self; 
}