如何使用 UIScrollView 和 UIPageControl 实现图像视图库并预览下一张和上一张图像？

Posted 2023-03-16

【中文标题】如何使用 UIScrollView 和 UIPageControl 实现图像视图库并预览下一张和上一张图像？

【英文标题】：How to implement image view gallery using UIScrollView & UIPageControl with preview of next and previous images?

【发布时间】：2012-03-25 20:13:53

【问题描述】：

所以我想制作一个带有预览下一张和上一张图像的滑动图像视图库。我希望它部分显示下一张图片（如果有）和上一张图片（如果有的话）。我到底是什么意思？假设总共有 3 张图像。

第一张图片。所以我希望第一张图片显示在中心（水平）和下一张图片的一部分，所以用户可以看到至少有一张图片剩余。 示意图：[&&&] [

第二张图片。我想显示第一张图片的一部分（左侧）和第二张图片（中间）和第三张图片的一部分（右侧）。因此，任何用户都可以轻松确定至少有 1 张图像在后面，并且至少有 1 张图像剩余。 示意图：] [###] [

第三张也是最后一张图片。第 2 幅图像（左侧）的一部分和第 3 幅图像在中间。所以毫无疑问，没有图像残留，至少有1个图像落后。 示意图：] [@@@].

那么如何以正确的方式实现这个想法呢？

我这样做了：

//  ItemGalleryVC.h


#import <UIKit/UIKit.h>


@interface ItemGalleryVC : UIViewController <UIScrollViewDelegate>

    IBOutlet UIScrollView  *scrollView;
    IBOutlet UIPageControl *pageControl;

    BOOL pageControlIsChangingPage;


@property (nonatomic, retain) IBOutlet UIScrollView  *scrollView;
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl;

- (IBAction)changePage:(id)sender;
- (void)setupPage;

@end

和

    //  ItemGalleryVC.m

    #import "ItemGalleryVC.h"

    @implementation ItemGalleryVC
    @synthesize scrollView;
    @synthesize pageControl;

    - (void)viewDidLoad 
    
        [self setupPage];
        [super viewDidLoad];
    


    - (void)didReceiveMemoryWarning 
    
        [super didReceiveMemoryWarning];
    

    - (void)viewDidUnload 
    
        [scrollView release];
        [pageControl release];
    


    - (void)dealloc 
    
        [super dealloc];
    

    - (void)setupPage
    
        NSLog(@"setupPage");
        scrollView.delegate = self;

        [scrollView setCanCancelContentTouches:NO];

        scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
        scrollView.clipsToBounds = YES;
        scrollView.scrollEnabled = YES;
        scrollView.pagingEnabled = YES;

        NSUInteger nimages = 0;
        CGFloat cx = 0; //the total scroll width
        CGRect rect = scrollView.frame; //image frame
        rect.size.height = scrollView.frame.size.height; 
        rect.size.width = scrollView.frame.size.width - 100; //50px at left and right sides
        rect.origin.y = scrollView.frame.origin.y+5; //down by 5 px
        for (; ; nimages++) 
            NSString *imageName = [NSString stringWithFormat:@"item_image0%d.jpg", (nimages + 1)];
            UIImage *image = [UIImage imageNamed:imageName];
            if (image == nil) 
                NSLog(@"no more imagez");
                break;
            
            NSLog(@"setting up img: %@",imageName);
            UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

            rect.origin.x = cx+50; //move right by 50px

            imageView.frame = rect;
            imageView.contentMode = UIViewContentModeScaleAspectFit;
            imageView.backgroundColor = [UIColor blackColor];

            [scrollView addSubview:imageView];
            [imageView release];

            cx += rect.size.width+30;
        

        self.pageControl.numberOfPages = nimages;
            // for the last image to be centered frame need to be wider by 100px
        [scrollView setContentSize:CGSizeMake(cx+100, [scrollView bounds].size.height)];
    


    - (void)scrollViewDidScroll:(UIScrollView *)_scrollView
    
        if (pageControlIsChangingPage) 
            return;
        

        // calc page number according to its frame size 
        CGFloat pageWidth = _scrollView.frame.size.width;
        int page = floor((_scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
        pageControl.currentPage = page;

    

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView 
    
        pageControlIsChangingPage = NO;

// this code added to correct image position (frame width) when using touch sliding
        CGRect frame = scrollView.frame;
        frame.origin.x = (frame.size.width-70) * pageControl.currentPage;
        frame.origin.y = 0;

        [scrollView scrollRectToVisible:frame animated:YES];
    

    - (IBAction)changePage:(id)sender 
    
        /*
         *  Change the scroll view
         */
        CGRect frame = scrollView.frame;
        frame.origin.x = (frame.size.width-70) * pageControl.currentPage;
        frame.origin.y = 0;

        [scrollView scrollRectToVisible:frame animated:YES];

        pageControlIsChangingPage = NO;
    

    @end 

问题在于框架大小（宽度）。它的 ScrollView.frame 大小，但我需要它更小（更小）。 使用此代码，如果我仅使用页面控件来切换图像，一切正常，动画看起来也不错。但是如果我使用滑动它完全不好。 上面的代码包含一个修复（在 scrollViewDidEndDecelerating 中），但它在滑动时仍然不是原生的，它适用于 3 个图像。它滑到不正确的位置，然后向后移动了一点。如果超过 3 张图片滑块不会滑到最后一张图片。 我很好奇是否有其他适当的方法可以做到这一点。

【问题讨论】：

尝试使用这个滚动的应用程序舞会，这可能对你有帮助

【参考方案1】：

其实我找到了另一个灵魂——http://www.cocoacontrols.com/platforms/ios/controls/hgpagescrollview 这个控件就是我想要的。

【参考方案2】：

试试看，scrollView 会画到它的边界之外。

[scrollView setClipsToBounds:NO];