如何创建一个按钮布局在网格中的视图控制器？

Question

我有一个应用程序，其中主屏幕应该包含一个徽标和六个按钮，这些按钮在纵向模式下为 2x3，在横向模式下为 3x2。

使用自动布局，我可以正确放置徽标 (uiumage) 和 uicollectionview，并且它们的布局正确，即使在设备改变旋转时也能很好地工作。

这是我得到的（使用 RDHCollectionViewGridLayout class）：

-(void)viewDidLoadImpl{
self.navCollectionView.delegate = self;
self.navCollectionView.dataSource = self;
titlesArray = [NSArray arrayWithObjects:
               @"Meine Hunde",
               @"Füttern",
               @"Einstellungen",
               @"Fragen & Antworten",
               @"Über diese App",
               @"Rechtliches", nil];
seguesArray = [NSArray arrayWithObjects:
               @"dogs",
               @"feed",
               @"settings",
               @"faq",
               @"about",
               @"law", nil];
imagesArray = [NSArray arrayWithObjects:
               [UIImage imageNamed:@"hunde_button"],
               [UIImage imageNamed:@"fuettern_button"],
               [UIImage imageNamed:@"einstellungen_button"],
               [UIImage imageNamed:@"fragen_button"],
               [UIImage imageNamed:@"ueber_button"],
               [UIImage imageNamed:@"rechtlich_button"], nil];
imagesHoverArray = [NSArray arrayWithObjects:
               [UIImage imageNamed:@"hunde_button_hover"],
               [UIImage imageNamed:@"fuettern_button_hover"],
               [UIImage imageNamed:@"einstellungen_button_hover"],
               [UIImage imageNamed:@"fragen_button_hover"],
               [UIImage imageNamed:@"ueber_button_hover"],
               [UIImage imageNamed:@"rechtlich_button"], nil];
RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
layout.lineItemCount = 2;
layout.lineDimension = 0;
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
layout.sectionsStartOnNewLine = YES;
[self.navCollectionView setCollectionViewLayout:layout];
}


   #pragma mark - UICollection View Datasource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 6;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = @"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UILabel *label = (UILabel *)[cell viewWithTag:10];
label.text = [titlesArray objectAtIndex:indexPath.row];
UIButton *button = (UIButton *)[cell viewWithTag:20];
// do something with the button
return cell;
}

#pragma mark - UICollectionViewDelegatFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
if(orientation == UIInterfaceOrientationLandscapeLeft) {
    // orientation is landscape left
    CGSize s = {100,200};
    return s;
} else if(orientation == UIInterfaceOrientationLandscapeRight) {
    // orientation is landscape right
    CGSize s = {100,200};
    return s;
} else if(orientation == UIInterfaceOrientationMaskPortrait) {
    // orientation is portrait
    CGSize s = {100,100};
    return s;
} else if(orientation == UIInterfaceOrientationMaskPortraitUpsideDown) {
    // orientation is portrait upsidedown
    CGSize s = {100,100};
    return s;
} else {
    CGSize s = {100,100};
    return s;
}
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
if (toInterfaceOrientation == UIInterfaceOrientationPortrait || toInterfaceOrientation ==     UIInterfaceOrientationPortrait) {

    RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
    layout.lineItemCount = 2;
    layout.lineDimension = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.sectionsStartOnNewLine = YES;
    [self.navCollectionView setCollectionViewLayout:layout];
} else {
    RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
    layout.lineItemCount = 3;
    layout.lineDimension = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.sectionsStartOnNewLine = YES;
    [self.navCollectionView setCollectionViewLayout:layout];
}
}

但是，旋转变化的布局不正确，请参见屏幕截图：

加载后：

切换到横向后：

切换回纵向后：

我什至不确定使用 collectionview 是否是正确的方法？我更愿意使用静态表视图之类的东西，但这只给了我 1 列？

Answer 1

集合视图就是您所需要的（即二维 table）。第一次加载网格时，每个单元格的大小是 100 x 100 吗？那是您在界面生成器中指出的吗？可能一开始大小合适，转横向时调整，转回纵向时调整不正确。

Answer 2

我的解决方案是不使用 RDHCollectionViewGridLayout 并使用 UICollectionViewDelegateFlowLayout class 及其方法来计算值以使其适合。

如何创建一个按钮布局在网格中的视图控制器？

How to create a view controller with buttons layed out in a grid?

ios

uicollectionview

uicollectionviewlayout