Question

所以我想创建一个滑动图像视图库，预览下一个和上一个图像。我希望它能部分显示下一张图像（如果有）和前一张图像（如果有的话）。我的意思是什么？假设有3张图像。

第一张图片。所以我希望第一张图像显示在中心（水平）和下一张图像的一部分，这样用户就可以看到至少剩下1张图像。示意图：[&&&] [
第二张图片。我想要显示第一张图像（左侧）和第二张图像（中央）的一部分以及第三张图像的一部分（右侧）。因此，任何用户都可以轻松确定后面至少有1张图像，并且至少有1张图像。示意图：] [###] [
第3张和最后一张图片。第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个图像，则滑块不会滑动到最后一个图像我很好奇是否有其他正确的方法可以做到。

Answer 1

实际上我发现了另一个灵魂 - http://www.cocoacontrols.com/platforms/ios/controls/hgpagescrollview 这种控制就是我想要的。

Answer 2

尝试，并且scrollView将在其边界之外绘制。

[scrollView setClipsToBounds:NO];

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

2 个答案: