ios - iOS 上类似 Google Now 的界面

Question

所以，我非常喜欢 Android 上的 Google Now 卡片界面。最近它甚至来到了 iOS。

是否有任何教程或示例项目可以帮助我为我的 iOS 应用程序创建卡片界面？

根据我的研究，我已经能够使用自定义 UICollectionViewFlowLayout 在某种程度上复制“堆叠”卡片。

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *allAttributesInRect = [super layoutAttributesForElementsInRect:rect];

    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMidY(self.collectionView.bounds));

    for (UICollectionViewLayoutAttributes *cellAttributes in allAttributesInRect)
    {
        if (CGRectContainsPoint(cellAttributes.frame, centerPoint))
        {
            cellAttributes.transform = CGAffineTransformIdentity;
            cellAttributes.zIndex = 1.0;
        }
        else
        {
            cellAttributes.transform = CGAffineTransformMakeScale(0.75, 0.75);
        }
    }

    return allAttributesInRect;
}

然后我将最小行间距设置为负值，使它们看起来“堆叠”。

不过，在滚动时，我希望卡片保留在底部，并且只有 1 辆汽车可以放大并位于屏幕中央。然后我将该卡片滚动到屏幕外，堆栈中的下一张“卡片”将从堆栈向上滚动并在屏幕中心。我猜这会动态调整最小行间距？

Answer 1

我认为没有任何教程或类(class)可以完全满足您的需求。但是，如果您不介意只针对 iOS6 及更高版本，您可以使用 UICollectionView。使用标准的垂直流布局，实现您想要实现的目标应该不难。看看:

• http://developer.apple.com/library/ios/ipad/#documentation/UIKit/Reference/UICollectionView_class/Reference/Reference.html
• http://www.appcoda.com/ios-programming-uicollectionview-tutorial/
• http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12
• WWDC 2012 session 205

我知道这些示例看起来与您要实现的目标并不完全相同。但是一旦您掌握了使用这些网站的 UICollectionView 的基本概念，您将能够立即构建卡片布局。

更新

我创建了一个简单的示例来展示处理“离开”单元格的平移的潜在方法。确保在 //Insert code to delete the cell here 处添加必要的代码以从 Collection View 中删除项目，然后它将通过删除单元格来填充您创建的空白。

CLCollectionViewCell.h

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CLCollectionViewCell : UICollectionViewCell <UIGestureRecognizerDelegate>

@property (assign, setter = setDeleted:) BOOL isDeleted;
@property (strong) UIPanGestureRecognizer *panGestureRecognizer;

@end

CLCollectionViewCell.m

#import "CLCollectionViewCell.h"

@implementation CLCollectionViewCell

- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        // Create a pan gesture recognizer with self set as the delegate and add it the cell
        _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureRecognizerDidChange:)];
        [_panGestureRecognizer setDelegate:self]; 
        [self addGestureRecognizer:_panGestureRecognizer];
        
        // Don't clip to bounds since we want the content view to be visible outside the bounds of the cell
        [self setClipsToBounds:NO];
        
        // For debugging purposes only: set the color of the content view
        [[self contentView] setBackgroundColor:[UIColor greenColor]];
    }
    return self;
}

- (void)panGestureRecognizerDidChange:(UIPanGestureRecognizer *)panGestureRecognizer {
    if ([self isDeleted]) {
        // The cell should be deleted, leave the state of the cell as it is 
        return;
    }
    
    // Percent holds a float value between -1 and 1 that indicates how much the user moved his finger relative to the width of the cell
    CGFloat percent = [panGestureRecognizer translationInView:self].x / [self frame].size.width;
    
    switch ([panGestureRecognizer state]) {
        case UIGestureRecognizerStateChanged: {
            // Create the 'throw animation' and base its current state on the percent
            CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(percent * [self frame].size.width, 0.f);
            CGAffineTransform rotateTransform = CGAffineTransformMakeRotation(percent * M_PI / 20.f);
            CGAffineTransform transform = CGAffineTransformConcat(moveTransform, rotateTransform) ;
            
            // Apply the transformation to the content view
            [[self contentView] setTransform:transform];
            
            break;
        }
            
        case UIGestureRecognizerStateFailed:
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled: {
            // Delete the current cell if the absolute value of the percent is above O.7 or the absolute value of the velocity of the gesture is above 600
            if (fabsf(percent) > 0.7f || fabsf([panGestureRecognizer velocityInView:self].x) > 600.f) {
                // The direction is -1 if the gesture is going left and 1 if it's going right
                CGFloat direction = percent < 0.f ? -1.f : 1.f;
                // Multiply the direction to make sure the content view will be removed entirely from the screen
                direction *= 1.5f;
                
                // Create the transform based on the direction of the gesture
                CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(direction * [self frame].size.width , 0.f);
                CGAffineTransform rotateTransform = CGAffineTransformMakeRotation(direction * M_PI / 20.f);
                CGAffineTransform transform = CGAffineTransformConcat(moveTransform, rotateTransform);
                
                // Calculate the duration of the animation based on the velocity of the pan gesture recognizer and normalize abnormal high and low values
                CGFloat duration = fabsf(1000.f / [panGestureRecognizer velocityInView:self].x);
                duration = duration > 2.f  ? duration = 2.f  : duration;
                duration = duration < 0.2f ? duration = 0.2f : duration;
                
                // Animate the 'throwing away' of the cell and update the collection view once it's completed
                [UIView animateWithDuration:duration
                                 animations:^(){
                                     [[self contentView] setTransform:transform];
                                }
                                 completion:^(BOOL finished){
                                     [self setDeleted:YES];
                                     
                                     // Insert code to delete the cell here
                                     // e.g. [collectionView deleteItemsAtIndexPaths:@[[collectionView indexPathForCell:self]]];
                }];
                
            } else {
                // The cell shouldn't be deleted: animate the content view back to its original position
                [UIView animateWithDuration:1.f animations:^(){
                    [[self contentView] setTransform:CGAffineTransformIdentity];
                }];
            }
            
            break;
        }
            
        default: {
            break;
        }
    }
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    // Return YES to make sure the pan gesture recognizer doesn't interfere with the gesture recognizer of the collection view
    return YES;
}

@end