UI控制元件篇——UIPageControl及其自定義

張智清發表於2013-07-30
UI控制元件

      UIPageControl類提供一行點來指示當前顯示的是多頁面檢視的哪一頁。當然，由於UIPageControl類可視樣式的點選不太好操作，所以最好是確保再新增了可選擇的導航選項，以便讓頁面控制元件看起來更像一個指示器，而不是一個控制元件。當使用者介面需要按頁面進行顯示時，使用UIPageControl控制元件將要顯示的使用者介面內容分頁進行顯示會使程式設計工作變得快捷。

      使用者點選頁面控制元件，會觸發UIControlEventValueChanged事件，並啟動設定為控制元件動作的任何方法。可以通過呼叫currentPage查詢控制元件的新值，並通過調整numberOfPages屬性設定可用的頁面數。

// 初始化頁面控制元件
pageControl.numberOfPages = 9;
pageControl.currentPage = 0;

[pageControl addTarget:self action:@selector(pageTurn) forControlEvents:UIControlEventValueChanged];
- (void)pageTurn:(UIPageControl *)pageControl
{
      CATransition *transition;
      int secondPage = [pageControl currentPage];
      if((secondPage - currentPage)>0)
           transition = [self getAnimation:@"fromRight"];
      else
           transition = [self getAnimation:@"fromLeft"];

       UIImageView *newView = (UIImageView *)[[contentView subviews] objectAtIndex:0];
       [newView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"ipad_wallpaper%02d.jpg",secondPage+1]]];
       [contentView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
       [[contentView layer] addAnimation:transition forKey:@"transitionView Animation"];

       currentPage = [pageControl currentPage];
}

結合ScrollView後關於UIPageControl的頁面設定演算法：

// 在ScrollView的委託方法中

int index = fabs(scrollView.contentOffset.x) / scrollView.frame.size.width;
pageControl.currentPage = index;

自定義之一：給UIPageControl控制元件新增背景

View Code 
 1 int pagesCount =5;
 2 UIPageControl *pageControl = [[UIPageControl alloc] init];
 3 pageControl.center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height-15);  // 設定pageControl的位置
 4 pageControl.numberOfPages = pagesCount;
 5 pageControl.currentPage = 0;
 6 
 7 [pageControl setBounds:CGRectMake(0,0,16*(pagesCount-1)+16,16)]; //頁面控制元件上的圓點間距基本在16左右。
 8 [pageControl.layer setCornerRadius:8]; // 圓角層
 9 [pageControl.setBackgroundColor:[UIColor clorWithWhite:0.0 alpha:0.2]];
10 [self.view addSubview:pageControl];



 

相關文章