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

Posted

技术标签:

【中文标题】如何使用 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];

【讨论】:

以上是关于如何使用 UIScrollView 和 UIPageControl 实现图像视图库并预览下一张和上一张图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 uiscrollview 向上滚动?

如何使用 UIScrollView 和 CATiledLayer 在可缩放的 UIView 上绘制标记

如何使 UIScrollView 与自动布局和动态内容一起使用? [复制]

如何区分 UIScrollView 中的平移和滚动

如何创建 UIScrollView?

如何使用 UIScrollView 和 UIPageControl 重新创建 iOS 应用切换器