Question

如何在添加到UIScrollView的多个图像之间添加间隙/空格？

一个例子是照片应用程序，在分页时图像之间有黑色间距。

Answer 1

我假设您知道如何在启用分页的情况下将图像添加到UIScrollView。我还假设您想要查看全屏照片，但在滚动时，您希望它们之间存在差距。如果是，这是可能的解决方案之一...

将差距定义为20px
UIScrollView是全屏视图，适用于iPhone的320x480
将UIScrollView框架设置为CGRectMake（0,0,340,480）; // 340 = 320 + 20（间隙，这些20px在屏幕外）
将第一个图像帧设置为CGRectMake（0,0,320,480）;
第二个图像帧到CGRectMake（340,0,320,480）;
...我的图像CGRectMake（340 * I，0,320,480）//我是索引 - 0..N-1
将UIScrollView内容大小设置为CGSizeMake（340 * N，480）// N =图像数

...如果您不想进行缩放，只需全屏，分页，滚动显示间隙，这是非常快速的解决方案。

Answer 2

这只是基础数学..

您可以将UIImageView添加为子视图，并计算您想知道子视图大小和scrollView的contentSize的空间。

编辑：

这基本上构建了一个画廊

-(void)photosGallery
{
    UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:(CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = 320.0f, .size.height = 416.0f}];
    scrollView.contentSize = (CGSize){.width = view.frame.size.width, .height = 372.0f};
    scrollView.backgroundColor = [UIColor whiteColor];
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.showsHorizontalScrollIndicator = NO;
    /// Build gallery
    CGSize thumbSize = (CGSize){.width = 75.0f, .height = 75.0f};
    const CGFloat xSpace = (scrollView.frame.size.width - (thumbSize.width * kPictsPerRow)) / (kPictsPerRow + 1); // kPictsPerRow = Number of pictures in a row
    const CGFloat xInc = thumbSize.width + xSpace;
    const CGFloat yInc = thumbSize.height + 15.0f;
    CGFloat x = xSpace, y = 10.0f;
    for (NSUInteger i = kMaxPictures; i--;)
    {
        UIImageView* pv = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = x, .origin.y = y, .size = thumbSize}];
        [scrollView addSubview:pv];
        [pv release];
        x += xInc;
        const NSUInteger eor = i % kPictsPerRow;

        if (!eor)
            y += yInc, x = xSpace;
    }
    [scrollView release];
}

Answer 3

只需要为UIImageVIew设置框架，并在它们之间留出一些空间。例如，如果scroll_view是您可以执行的UIScrollView

scroll_view.contentSize = CGSizeMake(1000,100);
for (int i=0;i<10;i++){
    UIImageView *imv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"some_image.png"]];
    CGRect frame = CGRectInset(CGRectMake(i * 100,0.0,100.0,100.0), 5.0, 4.0);
    imv.frame = frame;
    [scroll_view addSubview:imv];
}

这是一个粗略的例子，但显示了重点。通过嵌入CGRect（CGRectInset），您可以在滚动视图中的图像之间获得一些空格。

Answer 4

我必须在类似的应用程序中执行此操作，我的解决方案记录在此答案中（请注意，该问题与滚动视图无关，但所涉及的概念类似）：PDF in UIWebView

Answer 5

您可能正在寻找此代码：

#define FRAME_WIDTH 330
- (void)viewDidLoad {
    [super viewDidLoad];

    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, FRAME_WIDTH, self.view.bounds.size.height)];
    self.scrollView.bounces = YES;
    self.scrollView.pagingEnabled = YES;

    UIImageView *leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];
    leftView.frame = CGRectMake(0, 0, 320, self.view.bounds.size.height);

    UIImageView* centerView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"9.png"]];
    centerView.frame = CGRectMake(FRAME_WIDTH, 0, 320, self.view.bounds.size.height);

    UIImageView *rightView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"10.png"]];
    rightView.frame = CGRectMake(FRAME_WIDTH * 2, 0,320,self.view.bounds.size.height);

    [self.scrollView addSubview:leftView];
    [self.scrollView addSubview:centerView];
    [self.scrollView addSubview:rightView];

    [self.scrollView setContentSize:CGSizeMake(FRAME_WIDTH * 3, 0)];
    [self.scrollView setContentOffset:CGPointMake(FRAME_WIDTH, 0)];

    [self.view addSubview:self.scrollView];
}

看起来像iOS相册应用。此示例创建3个ImageView。

附上一个测试项目，以便您自己尝试：Project

Answer 6

为避免弄乱UIScrollView的框架，您可以继承UIScrollView并覆盖layoutSubviews以对每个页面应用偏移量。

这个想法基于以下观察：

当zoomScale！= 1时，当它在左/右边缘时偏移为零
当zoomScale == 1时，当它位于可见的矩形中心时，偏移量为零

然后导出以下代码：

- (void) layoutSubviews
{
    [super layoutSubviews];

    // Find a reference point to calculate the offset:
    CGRect bounds = self.bounds;
    CGFloat pageGap = 8.f;
    CGSize pageSize = bounds.size;
    CGFloat pageWidth = pageSize.width;
    CGFloat halfPageWidth = pageWidth / 2.f;
    CGFloat scale = self.zoomScale;
    CGRect visibleRect = CGRectMake(bounds.origin.x / scale, bounds.origin.y / scale, bounds.size.width / scale, bounds.size.height / scale);
    CGFloat totalWidth = [self contentSize].width / scale;
    CGFloat scrollWidth = totalWidth - visibleRect.size.width;
    CGFloat scrollX = CGRectGetMidX(visibleRect) - visibleRect.size.width / 2.f;
    CGFloat scrollPercentage = scrollX / scrollWidth;
    CGFloat referencePoint = (totalWidth - pageWidth) * scrollPercentage + halfPageWidth;

    // (use your own way to get all visible pages, each page is assumed to be inside a common container)
    NSArray * visiblePages = [self visiblePages];

    // Layout each visible page:
    for (UIView * view in visiblePages)
    {
        NSInteger pageIndex = [self pageIndexForView:view]; // (use your own way to get the page index)

        // make a gap between pages
        CGFloat actualPageCenter = pageWidth * pageIndex + halfPageWidth;
        CGFloat distanceFromRefPoint = actualPageCenter - referencePoint;
        CGFloat numOfPageFromRefPoint = distanceFromRefPoint / pageWidth;
        CGFloat offset = numOfPageFromRefPoint * pageGap;
        CGFloat pageLeft = actualPageCenter - halfPageWidth + offset;

        view.frame = CGRectMake(pageLeft, 0.f, pageSize.width, pageSize.height);
    }
}

在UIScrollView中添加图像之间的间距

6 个答案: