您的位置:首页 > 产品设计 > UI/UE

利用UIScrollView和UIPageControl实现图片切换

2012-04-06 13:04 447 查看
一种简单的图片切换效果,如下:



通过滚动中间的图片或页面控制,都可以实现图片的切换。

在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];
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐