使用Scroll View和Page Control實現分頁滾動

新建Simple View Application工程ScrollPage;

將Scroll View和Page Control拖到VC裏,如下;

(注意:Scroll View和Page Control必須是同一層次)

可以attributes inspector裏修改scroll view的背景顏色,然後運行查看效果(page control同樣),默認情況下爲白色。


接下來給ViewController.h添加代碼,VC必須遵守UI ScrollViewDelegate協議

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIScrollViewDelegate>

@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;

@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;

@end

接下來給ViewController.m添加代碼;

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) NSArray *photoAlbum;//將照片存在該數組裏

@end
將照片文件添加到項目文件夾裏;

繼續寫代碼

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.photoAlbum = [NSArray arrayWithObjects:[UIImage imageNamed:@"1.jpg"], [UIImage imageNamed:@"2.jpg"], [UIImage imageNamed:@"3.jpg"], nil];
    
    NSInteger pageCount = self.photoAlbum.count;

    self.pageControl.backgroundColor = [UIColor clearColor]; //背景顏色
    self.pageControl.hidesForSinglePage = YES; //單頁隱藏
    self.pageControl.userInteractionEnabled = NO; //用戶點擊
    self.pageControl.currentPage = 0; //首頁
    self.pageControl.numberOfPages = pageCount; //頁數
    
    self.scrollView.frame = CGRectMake(0, 0, 375, 500);
    self.scrollView.delegate = self;
    
    for(NSInteger i=0; i<pageCount; i++){
        CGRect frame;
        frame.origin.x = self.scrollView.frame.size.width *i;
        frame.origin.y = 0;
        frame.size = self.scrollView.frame.size;
        //frame = CGRectInset(frame, 10.0f, 10.0f);
    
        UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.photoAlbum objectAtIndex:i]];
        newPageView.contentMode = UIViewContentModeScaleAspectFill;
        newPageView.frame = frame;
    
        [self.scrollView addSubview:newPageView];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    
    CGSize PagedScrollViewSize = self.scrollView.frame.size;
    // 設置scroll view的contentSize屬性,這個是包含所有頁面的scroll view的尺寸
    self.scrollView.contentSize = CGSizeMake(PagedScrollViewSize.width * self.photoList.count, PagedScrollViewSize.height);
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    int index = fabs(self.scrollView.contentOffset.x) / self.scrollView.frame.size.width;
    //NSLog(@"%d", index);
    self.pageControl.currentPage = index;
}

@end
到此爲止,所有工作都已經完成,接下來運行;




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章