利用UIScrollView和UIPageControl實現圖片切換

一種簡單的圖片切換效果，如下：

通過滾動中間的圖片或頁面控制，都可以實現圖片的切換。

在xib中添加UIScrollView和UIPageControl，並設置為對應類的IBOutlet，

#import <UIKit/UIKit.h>

@interface HomePage : UIViewController<UIScrollViewDelegate>{

    IBOutlet UILabel *message;
    IBOutlet UIScrollView *myScrollView;
    IBOutlet UIPageControl *myPageControl;
}
@property (retain, nonatomic) IBOutlet UILabel *message;
@property (retain, nonatomic) IBOutlet UIScrollView *myScrollView;
@property (retain, nonatomic) IBOutlet UIPageControl *myPageControl;

@end

視圖載入：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
   
    int pageCount = 3;
    
    CGRect scrollViewRect = [self.view bounds];
    //create scrollview
    myScrollView.pagingEnabled = YES; 
    myScrollView.contentSize = CGSizeMake(scrollViewRect.size.width * pageCount,1);
    myScrollView.showsHorizontalScrollIndicator = NO;
    myScrollView.showsVerticalScrollIndicator = NO;
    myScrollView.delegate = self;

    
    
    myPageControl.backgroundColor = [UIColor clearColor];
    myPageControl.numberOfPages = pageCount;
    myPageControl.currentPage = 0;
    [myPageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    
    //create pages
    [self createPages];
    
    

    
}

實現：

#pragma mark 圖片切換
- (void)loadScrollViewWithPage:(UIView *)page 
{
    int pageCount = [[myScrollView subviews] count];
    
    CGRect bounds = myScrollView.bounds;
    bounds.origin.x = bounds.size.width * pageCount;
    bounds.origin.y = 0;
    page.frame = bounds;
    [myScrollView addSubview:page];
    
}

- (void)scrollViewDidScroll:(UIScrollView *)sender 
{
    CGFloat pageWidth = sender.frame.size.width;
    int page = floor((sender.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    myPageControl.currentPage = page;
    
    
    if(page==0){
        message.text=@"fox1";
    }
    if(page==1){
        message.text=@"fox2";
    }
    if(page==2){
        message.text=@"fox3";
    }
    
    
}

- (void)createPages
{
    CGRect pageRect = myScrollView.frame;
    
    //create pages
    UIView *page1 = [[UIView alloc] initWithFrame:pageRect];
    page1.backgroundColor = [UIColor blackColor];
    [page1 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian12.png"]]];
    UIView *page2 = [[UIView alloc] initWithFrame:pageRect];
    page2.backgroundColor = [UIColor blackColor];
    [page2 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian2.png"]]];
    UIView *page3 = [[UIView alloc] initWithFrame:pageRect];
    page3.backgroundColor = [UIColor blackColor];
    [page3 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian3.png"]]];
    
    //add to scrollview
    [self loadScrollViewWithPage:page1];
    [self loadScrollViewWithPage:page2];
    [self loadScrollViewWithPage:page3];
    
    //cleanup
    [page1 release];
    [page2 release];
    [page3 release];
}

- (void)changePage:(id)sender
{
    int page = myPageControl.currentPage;
    
    if (page == 0) {
        self.message.text = @"fox1";
    }else if (page == 1) {
        self.message.text = @"fox2";
    }else {
        self.message.text = @"fox3";
    }
    
    
    
    // update the scroll view to the appropriate page
    CGRect frame = myScrollView.frame;
    frame.origin.x = frame.size.width * page;
    frame.origin.y = 0;
    [myScrollView scrollRectToVisible:frame animated:YES];
}