UI基础-UIPageControl的详细使用

UIPageControl 控件在程序中出现的比较频繁，尤其在和UIScrollView配合来显示大量数据时，会使用它来控制UIScrollView的翻页。在滚动 ScrollView时可通过PageControll中的小白点来观察当前页面的位置，也可通过点击PageContrll中的小白点来滚动到指定的页 面。下面以一个简单但实用的例子来讲解PageControll的用法。

 

如上图中的曲线图和表格便是由ScrollView加载两个控件 （UIWebView 和 UITableView）实用其翻页属性实现的页面滚动。而PageControll但当配合角色，页面滚动小白点会跟着变化位置，而点击小白点 ScrollView会滚动到指定的页面。

代码：（只罗列主要代码）

 

- (void)viewDidLoad

{

    [superviewDidLoad];

    self.view.backgroundColor = [UIColorcolorWithPatternImage:[UIImageimageNamed:@"bg_blank.png"]];

  //  self.view.backgroundColor = [UIColor clearColor];

 

／／定义UIScrollView

    scrollview = [[UIScrollViewalloc] init];

    scrollview.frame = CGRectMake(10, 0, 300, 108);    

    scrollview.contentSize = CGSizeMake(600, 108);  ／／scrollview的滚动范围

    scrollview.showsVerticalScrollIndicator = NO;

    scrollview.showsHorizontalScrollIndicator = NO;

//myScrollView.clipsToBounds = YES;

    scrollview.delegate = self;

     scrollview.scrollEnabled = YES;

    scrollview.pagingEnabled = YES; ／／使用翻页属性 

    scrollview.bounces = NO; 

      

／／定义WebView加载曲线图

    webview = [[UIWebViewalloc] init];

    webview.frame = CGRectMake(-7, -10, 307, 118);

    webview.delegate = self;

    [webviewsetBackgroundColor:[UIColorclearColor]];

    [webviewsetOpaque:NO];    

    NSString *fullPath = [NSBundlepathForResource:@"sline"ofType:@"htm"inDirectory:[[NSBundlemainBundle] bundlePath]];  

    [self.webviewloadRequest:[NSURLRequestrequestWithURL:[NSURLfileURLWithPath:fullPath]]];   

    

    ／／用来制定边框

    view22 = [[UIViewalloc] init];

    //将图层的边框设置为圆脚   

    view22.layer.cornerRadius = 10;

    view22.layer.masksToBounds = YES;

    //给图层添加一个有色边框

    view22.layer.borderWidth = 1;

    //view1.layer.borderColor = [[UIColor colorWithRed:0.52 green:0.09 blue:0.07 alpha:1] CGColor]; 

    view22.layer.borderColor = [[UIColorcolorWithRed:0green:0blue:0alpha:1] CGColor];   

    view22.frame = CGRectMake(0, 0, 300, 108);

    view22.backgroundColor = [UIColorcolorWithRed:0.31green:0.31blue:0.31alpha:1];  

 

    tableview.frame = CGRectMake(0, 21, 300, 87);

    tableview.allowsSelection = NO;

    tableview.backgroundColor = [UIColorcolorWithRed:0.31green:0.31blue:0.31alpha:1];

 

／／用来制定边框

    view11 = [[UIViewalloc] init];

    //将图层的边框设置为圆脚   

    view11.layer.cornerRadius = 10;

    view11.layer.masksToBounds = YES;

    //给图层添加一个有色边框

    view11.layer.borderWidth = 1;

    //view1.layer.borderColor = [[UIColor colorWithRed:0.52 green:0.09 blue:0.07 alpha:1] CGColor]; 

    view11.layer.borderColor = [[UIColorcolorWithRed:0green:0blue:0alpha:1] CGColor];   

    view11.frame = CGRectMake(300, 0, 300, 108);

    view11.backgroundColor = [UIColorblackColor];

 

    [view11addSubview:tableview];

    [scrollviewaddSubview:view11];

   

    [view22addSubview:webview];

    [scrollviewaddSubview:view22];

 

／／定义PageControll

    pageControl = [[UIPageControlalloc] init];

    pageControl.frame = CGRectMake(150, 100, 20, 20);／／指定位置大小

    pageControl.numberOfPages = 2;／／指定页面个数

    pageControl.currentPage = 0;／／指定pagecontroll的值，默认选中的小白点（第一个）

    [pageControladdTarget:selfaction:@selector(changePage:)forControlEvents:UIControlEventValueChanged];

    ／／添加委托方法，当点击小白点就执行此方法

    [self.viewaddSubview:scrollview];

    [self.viewaddSubview:pageControl];    

}

 

／／scrollview的委托方法，当滚动时执行

- (void)scrollViewDidScroll:(UIScrollView *)sender {

    int page = scrollview.contentOffset.x / 290;／／通过滚动的偏移量来判断目前页面所对应的小白点

     pageControl.currentPage = page;／／pagecontroll响应值的变化

}

 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

  

}

 

／／pagecontroll的委托方法

- (IBAction)changePage:(id)sender { 

    int page = pageControl.currentPage;／／获取当前pagecontroll的值

    [scrollview setContentOffset:CGPointMake(300 * page, 0)];／／根据pagecontroll的值来改变scrollview的滚动位置，以此切换到指定的页面

}

 

以上是一种简单的方法来实现pagecontroll的切换页面功能，以后会为大家添加 “无限循环切换页面”和“动态的增加和减少页面”。