在通用应用程序中使用 UICollectionView

Question

我需要创建一个带有列表的通用应用程序。在单击一个单元格时，它会显示该单元格的详细视图。我通过在 UIViewController 中使用 UICollectionView 为 iPad 创建了列表。但是当我在 iPhone 中尝试相同的操作时，它无法正确显示。它是 iPad 单元的一种缩放版本。

对于 iPad，我需要像这样的单元格
http://i.stack.imgur.com/8mJnI.png

对于 iPhone，我需要这样的单元格
http://i.stack.imgur.com/moUxm.png

最好的方法是什么？

任何帮助将不胜感激

Answer 1

我建议创建 UICollectionViewCell 的抽象子类，其中包含图像、标题、desc 等属性以及抽象类的两个子类，例如 iPadCell 和 iPhoneCell。

在情节提要中添加两个原型单元并将其类和标识符更改为 iPhoneCell 和 iPadCell。 根据需要对单元格进行布局，并在collectionView:cellForItemAtIndexPath: dequeue right cell 中为适当的设备布置：

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    YourAbstractClass *cell = nil;
    if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ) {
        // Make sure it match storyboard identifier for iPad cell
        cell = [cv dequeueReusableCellWithReuseIdentifier:@"iPadCellIdentifier" forIndexPath:indexPath];
    }
    else { //iPhone device
        cell = [cv dequeueReusableCellWithReuseIdentifier:@"iPhoneCellIdentifier" forIndexPath:indexPath];
    }
    cell.imageView.image = ...;
    cell.title = ...;
    cell.description = ...;

    return cell;
}

如果 iPhone/ipad 的单元格大小不同，您可以以非常相似的方式设置单元格大小：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ) {
            return CGSizeMake(400.0f, 500.0f);
        }
        return CGSizeMake(200.0f, 300.0f)

}

Answer 2

因为你的单元格的内容是相同的，即，

1. 图像视图
2. 标题的UILabel
3. UILabel 描述

除了创建一个抽象类然后将它们子类化，你还可以做的是，你只需创建一个 UICollectionViewCell 的自定义类，例如将其命名为 GenericCollectionViewCell，现在这个类应该有两个 nib 文件，并确保你为它们分配不同的重用标识符和不同的文件名当然，例如

1. iPhoneCell
2. iPadCell

所以，现在基本上你有 GenericCollectionViewCell.h 和 IBOutlets 到两个不同的 nib。

您必须在 GenericeCollectionViewCell 中创建一个 ENUM，例如

typedef NS_ENUM(NSUInteger, CellType) {
    CELLIPHONE = 0,
    CELLIPAD = 1
};

您将使用此 ENUM 进行初始化，例如该单元格使用什么类型的 nib，例如

+ (UINib*)cellNibForCellType:(CellType)cellType{

    switch (cellType) {
        case CELLIPHONE:
            cellNib = [UINib nibWithNibName:@"IPhoneCollectionViewCell"
                                     bundle:nil];
            break;
        case CELLIPAD:
            cellNib = [UINib nibWithNibName:@"IPadCollectionViewCell"
                                     bundle:nil];
            break;
}

完成此操作后，您需要在 ViewController 的 viewDidLoad 中注册此单元格，

- (void)viewDidLoad
{

[super viewDidLoad];

[_collectionView registerNib:[GenericCollectionViewCell cellNibForCellType:CELLIPHONE] forCellWithReuseIdentifier:@"iPhoneCell"];

[_collectionView registerNib:[GenericCollectionViewCell cellNibForCellType:CELLIPAD] forCellWithReuseIdentifier:@"iPadCell"];

}

然后你可以继续@Greg 上面解释的内容，

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    GenericCollectionViewCell *cell = nil;
    if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ) {
        // Make sure it match storyboard identifier for iPad cell
        cell = [cv dequeueReusableCellWithReuseIdentifier:@"iPadCell" forIndexPath:indexPath];
    }
    else { //iPhone device
        cell = [cv dequeueReusableCellWithReuseIdentifier:@"iPhoneCell" forIndexPath:indexPath];
    }
    cell.imageView.image = ...;
    cell.title = ...;
    cell.description = ...;

    return cell;
}

基本上这是我想出来的，如果单元格的内容相同，那么制作超类有什么意义，我的意思是我不知道我可能错了。

Answer 3

在你的 viewDidLoad() 中：

    let layout = collectionViewLayout as! UICollectionViewFlowLayout

    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.Pad)
    {
        layout.minimumLineSpacing = 30
        layout.minimumInteritemSpacing = 10
        layout.itemSize = CGSize(width: 200, height: 200);
        layout.scrollDirection = .Vertical
        layout.sectionInset = UIEdgeInsets(top: 50, left: 20, bottom: 20, right: 20)
    }else if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.Phone){
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 2
        layout.itemSize = CGSize(width: 150, height: 150)
        layout.scrollDirection = .Vertical
        layout.sectionInset = UIEdgeInsets(top: 50, left: 20, bottom: 20, right: 20)
    }