使用 UIScrollView 和 PageControl 定义滚动量

Posted

技术标签:

【中文标题】使用 UIScrollView 和 PageControl 定义滚动量【英文标题】:Defining scroll amount with UIScrollView and PageControl 【发布时间】:2010-09-09 07:05:51 【问题描述】:

对于我正在处理的应用程序,我需要一个带有分页功能的滚动视图以及多个视图(在本例中为表格视图)。设置它(使用 Apple 的 PageControl 示例)非常简单,我可以毫无问题地让它在页面之间滚动和对齐。我希望表格视图几乎就像滚动视图中表格视图的缩略图表示。一旦您单击一个,它就会打开或放大以让 tableview 覆盖整个屏幕。同样,设置它并不是一个真正的问题,我可以将滚动视图中的视图设置为任何我想要的大小,并且点击我确信当我到达那个部分时我可以开始工作。 :)

我的问题是:在任何给定的视图中,无论您碰巧在哪个页面上,我都希望下一页和上一页分别在右侧和左侧略微可见。当然,在第一页上,右侧只会再显示一个页面,或者在最后一页的左侧显示。同样,通过设置显示的视图(tableviews)的 x 原点,我可以让第一页看起来正确。但是,一旦您滚动问题就会变得明显,即屏幕滚动得太远。

打破它我想我的主要问题是我似乎无法更改切换页面时完成的滚动量。

如果我能在这方面得到任何帮助,我将不胜感激,谢谢。

AppDelegate.h

#import <UIKit/UIKit.h>

@interface AppDelegate : NSObject <UIApplicationDelegate, UIScrollViewDelegate> 
UIWindow *window;
UIView *background;
UIScrollView *scrollView;
UIPageControl *pageControl;
NSMutableArray *viewControllers;

// To be used when scrolls originate from the UIPageControl
// I've commented this out (and all references to it) since I've disabled user interaction with the UIPageControl
//BOOL pageControlUsed;


@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UIView *background;

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

- (IBAction)changePage:(id)sender;

@end  

AppDelegate.m

#import "AppDelegate.h"
#import "MyViewController.h"

static NSUInteger kNumberOfPages = 4;

@interface AppDelegate (PrivateMethods)

- (void)loadScrollViewWithPage:(int)page;
- (void)scrollViewDidScroll:(UIScrollView *)sender;

@end

@implementation AppDelegate

@synthesize window, scrollView, pageControl, viewControllers, background;

- (void)dealloc 
[background release];
[viewControllers release];
[scrollView release];
[pageControl release];
[window release];
[super dealloc];


- (void)applicationDidFinishLaunching:(UIApplication *)application 

background.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Background.png"]];

// view controllers are created lazily
// in the meantime, load the array with placeholders which will be replaced on demand
NSMutableArray *controllers = [[NSMutableArray alloc] init];
for (unsigned i = 0; i < kNumberOfPages; i++) 
    [controllers addObject:[NSNull null]];

self.viewControllers = controllers;
[controllers release];

// a page is the width of the scroll view
scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height);
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.scrollsToTop = NO;
scrollView.delegate = self;

pageControl.numberOfPages = kNumberOfPages;
pageControl.currentPage = 0;

// pages are created on demand
// load the visible page
// load the page on either side to avoid flashes when the user starts scrolling
[self loadScrollViewWithPage:0];
[self loadScrollViewWithPage:1];


- (void)loadScrollViewWithPage:(int)page 
if (page < 0) return;
if (page >= kNumberOfPages) return;

// replace the placeholder if necessary
MyViewController *controller = [viewControllers objectAtIndex:page];
if ((NSNull *)controller == [NSNull null]) 
    controller = [[MyViewController alloc] initWithPageNumber:page];
    [viewControllers replaceObjectAtIndex:page withObject:controller];
    [controller release];


// add the controller's view to the scroll view
if (nil == controller.view.superview) 
    CGRect frame = CGRectMake(50, 50, 220, 330);
    frame.origin.x = 50 + (250 * page);
    frame.origin.y = 50;
    controller.view.frame = frame;
    [scrollView addSubview:controller.view];



- (void)scrollViewDidScroll:(UIScrollView *)sender 
// We don't want a "feedback loop" between the UIPageControl and the scroll delegate in
// which a scroll event generated from the user hitting the page control triggers updates from
// the delegate method. We use a boolean to disable the delegate logic when the page control is used.
/*if (pageControlUsed) 
    // do nothing - the scroll was initiated from the page control, not the user dragging
    return;
*/

// Switch the indicator when more than 50% of the previous/next page is visible
CGFloat pageWidth = scrollView.frame.size.width;
int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
pageControl.currentPage = page;

// load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
[self loadScrollViewWithPage:page - 1];
[self loadScrollViewWithPage:page];
[self loadScrollViewWithPage:page + 1];

// A possible optimization would be to unload the views+controllers which are no longer visible


// At the begin of scroll dragging, reset the boolean used when scrolls originate from the UIPageControl
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView 
//pageControlUsed = NO;


// At the end of scroll animation, reset the boolean used when scrolls originate from the UIPageControl
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 
//pageControlUsed = NO;


- (IBAction)changePage:(id)sender 
int page = pageControl.currentPage;

// load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
[self loadScrollViewWithPage:page - 1];
[self loadScrollViewWithPage:page];
[self loadScrollViewWithPage:page + 1];

// update the scroll view to the appropriate page
CGRect frame = scrollView.frame;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0;
[scrollView scrollRectToVisible:frame animated:YES];

// Set the boolean used when scrolls originate from the UIPageControl. See       scrollViewDidScroll: above.
//pageControlUsed = YES;


@end

【问题讨论】:

我正在就这个问题寻求帮助...将滚动量更改为小于屏幕尺寸的值。我有上一页/下一页可见,但是当滚动到下一页时,它滚动到很远。由于下一页/上一页略微可见,因此页面滚动非常轻微。有人有想法吗? 我最终使用了这种方法:blog.proculo.de/index.php?url=archives/…。希望对你有帮助 【参考方案1】:

您似乎在设置 scrollView 的框架大小和 controller.view 的框架不同。 scrollView 是一个 IBOutlet,这意味着您正在使用界面构建器创建 scrollView,但您正在使用以下行放置内容:

CGRect frame = CGRectMake(50, 50, 220, 330);
frame.origin.x = 50 + (250 * page);
frame.origin.y = 50;
controller.view.frame = frame;
[scrollView addSubview:controller.view];

并将其放入滚动视图中。如果您不想在滚动视图一侧看到上一页/下一页,则必须更改您在第一行使用的数字。尝试使用 `scrollView.frame.size 或检查您从 IB 创建的 scrollView 的帧大小并使用它们而不是幻数,您应该避免这种情况。

【讨论】:

以上是关于使用 UIScrollView 和 PageControl 定义滚动量的主要内容,如果未能解决你的问题,请参考以下文章

UIScrollView和UIPageControl结合使用

使用 UIScrollView 和自动布局的图像滑块

使用 UIScrollView 和 NSNotificationCenter 继续上课

UIScrollView和UIPageControl的使用(实现图片的循环滚动)

使用 UIScrollView 进行放大和缩小视图

如何同时使用 UIScrollView 和 UITableView 实现平滑滚动?