如何将多个 UIImageViews 添加到分页 UIScrollView？

Posted 2023-03-16

【中文标题】如何将多个 UIImageViews 添加到分页 UIScrollView？

【英文标题】：How to add multiple UIImageViews to paging UIScrollView?

【发布时间】：2012-05-27 11:21:14

【问题描述】：

我有一个启用了分页的 UIScrollView，页面上有多个子视图：一个 UIButton、UIwebview 和 UIImageView。每个页面上的 webview 和图像都会发生变化。这工作正常。我使用 Apples scrolling image paging example 开始。

但是当我添加第二个 UIImageView 时，我所在的图像位置已经获得了新值，并且新图像不会显示。

这是第一张图片的 viewdidload 中的代码（工作正常）：

// load all the images from our bundle and add them to the scroll view
for (i = 1; i <= kNumImages; i++)

    NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
    UIImage *image2 = [UIImage imageNamed:imageName];
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image2];


    // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
    CGRect rect = imageView2.frame;
    rect.size.height = imageviewScrollObjHeight;
    rect.size.width = imageviewScrollObjWidth;

    // Get the Layer of any view
    CALayer * imageLayer = [imageView2 layer];
    [imageLayer setMasksToBounds:YES];
    [imageLayer setCornerRadius:7.0];

    // You can even add a border
    [imageLayer setBorderWidth:1.0];
    [imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];

    imageView2.frame = rect;
    imageView2.tag = i; // tag our images for later use when we place them in serial fashion  


    [scrollView1 addSubview:imageView2];



[self layoutScrollImages];  // now place the photos in serial layout within the scrollview

这是在每个页面上布局第一张图片的代码，每页不同的图片（在 viewdidload 之外）（工作正常）：

// layout images for imageview1
- (void)layoutScrollImages

UIImageView *imageView = nil;
NSArray *subviews = [scrollView1 subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 10;
for (imageView in subviews)

    if ([imageView isKindOfClass:[UIImageView class]] && imageView.tag > 0)
    
        CGRect frame = imageView.frame;
        frame.origin = CGPointMake(curXLoc, 50);
        imageView.frame = frame;

        curXLoc += (kScrollObjWidth);
    


// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];

这是第二张图片的代码（在 viewdidload 中）：（当我删除 [self layoutNavScrollImages] 时；图片仅在第一页加载）

for (i = 1; i <= kNumImages; i++)


    UIImage *navBarImage = [UIImage imageNamed:@"navigationbar.png"];
    UIImageView *imageViewNavBar = [[UIImageView alloc] initWithImage:navBarImage];

    // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
    CGRect navBarRect = imageViewNavBar.frame;
    navBarRect.size.height = 44;
    navBarRect.size.width = 320;
    navBarRect.origin.x = 0;
    navBarRect.origin.y = 0;

    /* Get the Layer of any view
     CALayer * imageLayer = [imageView3 layer];
     [imageLayer setMasksToBounds:YES];
     [imageLayer setCornerRadius:7.0];

     // You can even add a border
     [imageLayer setBorderWidth:1.0];
     [imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];
     */
    imageViewNavBar.frame = navBarRect;
    imageViewNavBar.tag = i;    // tag our images for later use when we place them in serial fashion  

    [scrollView1 addSubview:imageViewNavBar];



[self layoutNavScrollImages];

还有viewdidload外面的代码：（这会覆盖第一张图片的位置）

- (void)layoutNavScrollImages

UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)

    if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
    
        CGRect frame = view.frame;
        frame.origin = CGPointMake(curXLoc, 0);
        view.frame = frame;

        curXLoc += (kScrollObjWidth);
    


// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];

【问题讨论】：

为什么要删除 [self layoutNavScrollImages];？

我没有删除它，只是说：当我删除它时，图像在一页上正确加载。我需要一种方法来使图像加载到每个页面上并且仍然具有页面切换动画。

尚未找到解决方案，但可以通过添加标签而不是图像作为背景的图像视图来解决此特定项目的问题。 myLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"navigationbar.png"]];然后在 layoutNavScrollImages 中将 UIImageView 更改为 UILabel: - (void)layoutNavScrollImages UILabel *view = nil;等等……

【参考方案1】：

这样做的方法是制作一个（大）UIView 并将每个 UIImageView 添加为该 UIView 的子视图。然后将 UIView 作为子视图添加到 UIScrollView。

[totalView addSubview:imageView1];
[totalView addSubview:imageView2;
[totalView addSubview:buttonView1];
[totalView addSubview:buttonView2];
[totalView addSubview:webView];

[scrollView addSubview:totalView];

请务必设置正确的内容大小，否则滚动视图将不起作用：

[scrollView setContentSize:CGSizeMake((320*kNumImages), 411)];

设置视图并标记 UIView（在 viewdidload 内）：

NSUInteger i;
for (i = 1; i <= kNumImages; i++)
   
      //... code to setup views
      totalView.tag = i;
   
[self layoutViews]; // now place the views in serial layout within the scrollview

然后在每一页上布局视图：

- (void)layoutViews

UIView *view = nil;
NSArray *subviews = [scrollView subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)

    if ([view isKindOfClass:[UIView class]] && view.tag > 0)
    
        CGRect frame = view.frame;
        frame.origin = CGPointMake(curXLoc, 0);
        view.frame = frame;

        curXLoc += (kScrollObjWidth);
    

我希望这尽可能清楚。如果有人认为这不是正确的做法，请发表评论。