Question

I like the kindle for iPhone’s navigation – the one which enables you to just slide the titles in the navigation bar to move from one view to another. (I’m attaching the image)

However, I was searching for a long time yesterday and I cannot find anybody who has done something similar.

Would you have any ideas on how to do this?

UPDATE: May 24, 2012

So now I have codes. Thanks to this tutorial http://bit.ly/xNOiqd. (I just copied most of his code.) But I still cannot achieve the same effect that the kindle app’s nav bar has. I can now peek on the left and the right item but my scroll view skips the labels which are on the odd indices of my array. Let’s say I have ‘Favourites’, ‘All Products’, and ‘Categories’. When I swipe left, I move from ‘Favourites’ to ‘Categories’ and skip ‘All Products’

Here’s the code.

#pragma mark -

- (void)loadVisiblePages {
    // First, determine which page is currently visible
    CGFloat pageWidth = self.scrollView.frame.size.width;
    NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));

    // Update the page control
    self.pageControl.currentPage = page;

    // Work out which pages we want to load
    NSInteger firstPage = page - 1;
    NSInteger lastPage = page + 1;

    // Purge anything before the first page
    for (NSInteger i=0; i<firstPage; i++) {
        [self purgePage:i];
    }
    for (NSInteger i=firstPage; i<=lastPage; i++) {
        [self loadPage:i];
    }
    for (NSInteger i=lastPage+1; i<self.pageImages.count; i++) {
        [self purgePage:i];
    }
}

- (void)loadPage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what we have to display, then do nothing
        return;
    }

    // Load an individual page, first seeing if we've already loaded it
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView == [NSNull null]) {
        CGRect frame = self.scrollView.bounds;

        //frame.origin.x = frame.size.width * page;
        frame.origin.x = (frame.size.width /2) * page;
        frame.origin.y = 0.0f;

        //
        frame = CGRectInset(frame, 10.0f, 0.0f);
        //self.scrollView.bounds = frame;

        /* == orig line
         UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.pageImages objectAtIndex:page]];
         newPageView.contentMode = UIViewContentModeScaleAspectFit;
         newPageView.frame = frame;
         */

        UILabel *newPageView = [[UILabel  alloc] init];
        newPageView.text = [self.pageImages objectAtIndex:page];
        newPageView.textColor = [UIColor whiteColor];
        //newPageView.textColor = [UIColor grayColor];
        newPageView.textAlignment = UITextAlignmentCenter;
        newPageView.font = [UIFont fontWithName:@"Helvetica-Bold" size:20];
        [newPageView setBackgroundColor:[UIColor clearColor]];



        newPageView.frame = frame;

        [self.scrollView addSubview:newPageView];
        [self.pageViews replaceObjectAtIndex:page withObject:newPageView];
    }
}

- (void)purgePage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what we have to display, then do nothing
        return;
    }

    // Remove a page from the scroll view and reset the container array
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView != [NSNull null]) {
        //[pageView removeFromSuperview];
        //[self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];
//scroll view stuff
    self.scrollView.delegate = self;

    //attempt to make size of scrollview smaller
    //CGRect frame = self.scrollView.bounds;
    //frame = CGRectInset(frame, 10.0f, 0.0f);
    //CGFloat width = self.scrollView.frame.size.width/2.0f;

    self.pageImages = [NSArray arrayWithObjects:@"Favourites", @"All Products", @"Categories",@"Boo yah", nil];
    NSInteger pageCount = self.pageImages.count;

    // Set up the page control
    self.pageControl.currentPage = 0;
    self.pageControl.numberOfPages = pageCount;

    // Set up the array to hold the views for each page
    self.pageViews = [[NSMutableArray alloc] init];
    for (NSInteger i = 0; i < pageCount; ++i) {
        [self.pageViews addObject:[NSNull null]];
    }

}
- (void) viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
CGSize pagesScrollViewSize = self.scrollView.frame.size;
    //self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.pageImages.count, pagesScrollViewSize.height);

//This modifies the size of the scroll view, I can't seem to get it right
    self.scrollView.contentSize = CGSizeMake((pagesScrollViewSize.width / 1.50f )* self.pageImages.count, self.scrollView.frame.size.height);

    // Load the initial set of pages that are on screen
    [self loadVisiblePages];


}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // Load the pages which are now on screen
    [self loadVisiblePages];
}

Answer 1

iCarousel is a nice open source project with lots of scroll types.