在旋转时自动排列网格样式元素的最佳方法?

时间:2012-07-09 16:37:59

标签: ios xcode

我的应用程序中有一个项目网格,如下所示:

http://cl.ly/1m243117220B060Z0M26/Screen%20Shot%202012-07-09%20at%2011.34.22%20AM.png

目前这些只是自定义UIButton。什么可能是让这些网格项自动重新排列以适应横向模式宽度的最佳方法?

http://cl.ly/1d0x431P1n211W1H2n3B/Screen%20Shot%202012-07-09%20at%2011.35.42%20AM.png

显然这在应用程序中很常见,但我搜索了一下,找不到我想要的内容。

如果有人知道像Isotope for iOS(http://isotope.metafizzy.co/

这样的东西,则会增加奖励

1 个答案:

答案 0 :(得分:1)

您可能想要一个例程,根据滚动视图的大小调整您的滚动视图和图像(或者在我的情况下,带图像的按钮)(并确保设置滚动视图的autoSizingMask,使其延伸为方向变化)。

所以,例如,我有一个例程,它执行以下操作(它假设您已经为每个图标添加了UIButton创建的scrollview ...如果您使用UIImageViews,这个基本想法也会起作用,虽然):

- (void)rearrangeImages
{
    if (!_listOfImages)
    {
        [self loadImages];
        return;
    }

    // a few varibles to keep track of where I am

    int const imageWidth = [self thumbnailSize];
    int const imagesPerRow = self.view.frame.size.width / (imageWidth + 2);
    int const imageHeight = imageWidth;
    int const imagePadding = (self.view.frame.size.width - imageWidth*imagesPerRow) / (imagesPerRow + 1);
    int const cellWidth = imageWidth + imagePadding;
    int const cellHeight = imageHeight + imagePadding;

    NSInteger row;
    NSInteger column;
    NSInteger index;

    CGRect newFrame;

    // iterate through the buttons

    for (UIView *button in [_scrollView subviews])
    {
        index = [button tag];

        if ([button isKindOfClass:[UIButton class]] && index < [_listOfImages count])
        {
            // figure out where the button should go

            row = floor(index / imagesPerRow);
            column = index % imagesPerRow;
            newFrame = CGRectMake(column * cellWidth  + imagePadding, 
                                  row    * cellHeight, 
                                  imageWidth, 
                                  imageHeight);

            if (button.frame.origin.x != newFrame.origin.x || button.frame.origin.y != newFrame.origin.y)
                [button setFrame:newFrame];
        }
    }

    NSInteger numberOfRows = floor(([_listOfImages count] - 1) / imagesPerRow) + 1;

    [_scrollView setContentSize:CGSizeMake(self.view.frame.size.width, numberOfRows * cellHeight)];
}

然后,当屏幕改变方向时,我会让我的应用程序调用此方法,例如

- (void)viewWillLayoutSubviews
{
    [self rearrangeImages];
}

如果您支持iOS 5之前的版本,则可能还需要以下内容:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    float iOSversion = [[[UIDevice currentDevice] systemVersion] floatValue];

    // we don't need to do this in iOS 5, because viewWillLayoutSubviews is automatically called

    if (iOSversion < 5.0)
        [self viewWillLayoutSubviews];
}