利用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];
}