Extending PageControl, stumbling over UIScrollView...

Question

I'm trying to make something work in my app and having no luck, so I went back to the PageControl example to see if I could do it there.
At the bottom by the PageControl widget I added two buttons, one to add a page, one to remove a page.
1) If I add a page at the end it works fine. I created a handler for the add button, and basically do this:
kNumberOfPages++;
pageControl.numberOfPages = kNumberOfPages;
[pageControl updateCurrentPageDisplay];
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height);
[self changePage:self];
However, it's not quite right as the page control doesn't update on the next move left or right, but on the one after that.
I am completely unclear how to insert in the middle of the view.
2) If I delete a page what I end up with is a blank frame in the middle. That is pages to the "right" don't move left to fill in the space. And indeed, if I scroll to the right end I can see "past" the right most page to the old right most page.
It almost looks like the only way to remove something is to delete the UIScrollView and build a new one based only of the items you want. Is that true? If so it may help explain my next problem, which is I want to make the remove button work like trash in photos or mail, sucking the current page down into it. Is the solution to build a new UIScrollView behind, then suck the current one down into the trash? That sounds heavyweight.

Answer 1

Thanks for the very useful reply. I hadn't quite grasped what was going on in the page control demo before, but with the code you provided and the description I think I finally got it. For the archives here, this is the code you provided with minor cleanup, plus the delete page method as well. I added two buttons to the bottom of the screen, one for add, one for delete and linked them to these methods. Note that I disable the delete page button if there is only one page, and disable the add page button if we've hit the maximum number of pages.
// AppDelegate.h
@interface AppDelegate : NSObject <UIApplicationDelegate, UIScrollViewDelegate> {
IBOutlet UIButton *addPageButton;
IBOutlet UIButton *deletePageButton;
@property (nonatomic, retain) UIButton *addPageButton;
@property (nonatomic, retain) UIButton *deletePageButton;
//AppDelegate.m
static NSUInteger kNumberOfPages = 1;
static NSUInteger kMaxNumberOfPages = 6;
@implementation AppDelegate
@synthesize addPageButton, deletePageButton;
// New Code
- (IBAction)deletePage:(id)sender {
NSLog(@"AppDelegate: deletePage");
int page = pageControl.currentPage; // changed
kNumberOfPages--;
[viewControllers removeObjectAtIndex:page]; // changed
// added loop - adjust page numbers and frames of pages which have been bumped up
for (int iIndex = page; iIndex < kNumberOfPages; iIndex++) {
MyViewController *controller = [viewControllers objectAtIndex:iIndex];
if ((NSNull *)controller == [NSNull null])
continue;
[controller resetPageNumberTo:iIndex];
if (nil != controller.view.superview) {
// the attached view needs to be relocated before scrolling begins
CGRect frame = scrollView.frame;
frame.origin.x = frame.size.width * iIndex;
frame.origin.y = 0;
controller.view.frame = frame;
NSLog(@"     page %d, origin.x=%3.0f", iIndex, controller.view.frame.origin.x);
pageControl.numberOfPages = kNumberOfPages;
if (kNumberOfPages == 1) {
deletePageButton.enabled = NO;
addPageButton.enabled = YES;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages,
scrollView.frame.size.height);
pageControl.currentPage = page - 1; // added line
[self changePage:self];
- (IBAction)addPage:(id)sender {
NSLog(@"AppDelegate: addPage");
int page = pageControl.currentPage + 1; // added line
kNumberOfPages++;
[viewControllers insertObject:[NSNull null] atIndex:page]; // added line
// added loop - adjust page numbers and frames of pages which have been bumped up
for (int iIndex = page + 1; iIndex < kNumberOfPages; iIndex++) {
MyViewController *controller = [viewControllers objectAtIndex:iIndex];
if ((NSNull *)controller == [NSNull null])
continue;
[controller resetPageNumberTo:iIndex];
if (nil != controller.view.superview) {
// the attached view needs to be relocated before scrolling begins
CGRect frame = scrollView.frame;
frame.origin.x = frame.size.width * iIndex;
frame.origin.y = 0;
controller.view.frame = frame;
NSLog(@"     page %d, origin.x=%3.0f", iIndex, controller.view.frame.origin.x);
pageControl.numberOfPages = kNumberOfPages;
if (kNumberOfPages == kMaxNumberOfPages) {
addPageButton.enabled = NO;
deletePageButton.enabled = YES;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages,
scrollView.frame.size.height);
pageControl.currentPage = page; // added line
[self changePage:self];
And of course, we still need the update in MyViewController to make this example complete...
@implemention MyViewController
// added to support page insertion and deletion
- (void)resetPageNumberTo:(int)page {
pageNumber = page;
pageNumberLabel.text = [NSString stringWithFormat:@"Page %d", pageNumber + 1];
self.view.backgroundColor = [MyViewController pageControlColorWithIndex:pageNumber];
With all that working well, I have one more request. I would like to animate the page addition and removal to make it more obvious what is going on. On page removal, I would like to make it work like the trash can in the Photos app, or the trash can in mail. That sort of suck the page down into the icon animation. I'm not quite sure what adding a new one should look like. Any tips on how to make those animations work?