/* syntax highlight */ /* end of syntax highlight */

2011年1月4日 星期二

iphone app 開發 (三十九) 實做分頁控制

Bookmark and Share

在 App 開發我們很常會使用到分頁的機制

這篇文章就是要教你們怎樣做出以下效果,還有進一步增加更多分頁的方法

 螢幕快照 2011-01-04 下午3.55.28

 

只要你手勢移往左或是往右滑,就可以改變顯示的分頁

本範例參考自 iPhone 創意程式設計家,裡面的第四章畫面元件

如果需要更詳細的描述,建議可以購買此本書來參考

原本範例是用三個分頁,本範例會在後面增加第四個分頁,很簡單,我們開始吧

 

本篇文章主要分為五大步驟

第一步驟:建立會用到的 Class

第二步驟:鍵入程式碼

第三步驟:安排畫面元件

第四步驟:編譯

第五步驟:繼續增加分頁

 

 

第一步驟:建立會用到的 Class

一開始請先建立一個 View-based Applicaton

螢幕快照 2011-01-03 下午7.40.32

 

然後建立我們之後會用到的 BaseView 與 rootView ,請分別建立兩個 Objective-C class 並且選擇繼續自 UIView 這個類別,然後取名叫做 BaseView 與 rootView

螢幕快照 2011-01-04 下午12.25.16

 

完成後應該會看到以下的畫面

螢幕快照 2011-01-04 下午12.26.06

 

 

第二步驟:鍵入程式碼

請打開你的 controller.h 檔,並鍵入以下程式碼,其中 page1~3 是我們等下會切換的 pageView,而 pageControl 是我們負責顯示 page 變化的元件,而我們是靠著人們手觸控的 endPoint 減掉 startPoint 來看出使用者是往右滑或是往左滑,我們我們需要建立壹個 CGPoint 來紀錄此項資訊,而當我們切換到下一頁時,必須知道上一頁是哪頁,所以我們設計一個 prevPage 來紀錄上一頁的資訊。

 

#import <UIKit/UIKit.h>

@class RootView;

@interface UIPageControlViewController : UIViewController {
    IBOutlet UIView *page1;
    IBOutlet UIView *page2;
    IBOutlet UIView *page3;
    IBOutlet UIPageControl *pageControl;
    IBOutlet RootView *rootView;
    CGPoint startLocation;
    int prevPage;
}

-(IBAction)pageTurn:(UIPageControl*)sender;

@end

 

 

接下來實做我們分頁的邏輯,請打開 Controller.m 檔案,由於我們程式中有用到 CATransaction 這個元件,幫助我們快速建立畫面與畫面切換的動畫,一開始請先引入  QuartzCore framework

螢幕快照 2011-01-04 下午1.45.19

 

然後加入以下代碼:

#import <QuartzCore/QuartzCore.h>

 

我們在這裡需要建立換頁的動作,程式碼如下,其邏輯就是使用剛剛引入的 QuartzCore 裡面的 CATransition 這個元件來實做 UIPageControl 換頁的特效,前面幾行都是參數的設置,例如 setDuration 是動畫切換的時間,setTimingFunction 則是動畫的速度變化,而判斷如果 currentPage > prevPage 指往下一頁,則動畫是由右到左,反之也是;但如果現在已經在第一頁 (currentPage ==0) 則還是回第一頁,而最多到第三頁 (bringSubviewToFront:page3) 。

 

-(IBAction)pageTurn:(UIPageControl*)sender{
    int currentPage = [sender currentPage];
    CATransition *anim = [CATransition animation];
    [anim setDelegate:self];
    [anim setDuration:0.3f];
    [anim setTimingFunction:UIViewAnimationCurveEaseInOut];
    [anim setType:kCATransitionPush];
    if(currentPage > prevPage){
        [anim setSubtype:kCATransitionFromRight];
    }
    else {
        [anim setSubtype:kCATransitionFromLeft];
    }

    if (currentPage ==0){
        [rootView bringSubviewToFront:page1];
    }else if(currentPage ==1){
        [rootView bringSubviewToFront:page2];
    }
    else{
        [rootView bringSubviewToFront:page3];
    }
    [[rootView layer]addAnimation:anim forKey:@"Tran"];
    prevPage = currentPage;
}

 

我們必須先建立畫面一開始會 loading 進來的畫面,請在 viewDidLoad 裡面加入以下代碼,rootView 是我們主要要呈現的 View,但是我們會在上面用 page 1~3 壓過它,至於 height-50 的原因是因為畫面下方要放 page 切換的白點。

 

- (void)viewDidLoad {
    [super viewDidLoad];
    CGRect frame = [[self view] frame];
    [rootView addSubview:page3];
    [page3 setFrame:CGRectMake(0,0,frame.size.width,frame.size.height-50)];
    [rootView addSubview:page2];
    [page2 setFrame:CGRectMake(0,0,frame.size.width,frame.size.height-50)];
    [rootView addSubview:page1];
    [page1 setFrame:CGRectMake(0,0,frame.size.width,frame.size.height-50)];
    prevPage = 0;
}

 

至於畫面切換的邏輯之前有提過,我們是靠判斷 endLocation 與 startLocation 位置的差異,當使用者手指往左滑,則 endLocation  - startLocation  是負值,則我們往右移一格,相反也同,所以這邊必須實做 touchesBegan 函式來偵測使用者的手指,

 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    startLocation = [touch locationInView:[self view]];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint endLocation = [touch locationInView:[self view]];
    if(endLocation.x-startLocation.x<0){ //下一頁
        int currentPage = [pageControl currentPage];
        if(currentPage ==2){
            return;
        }
        [pageControl setCurrentPage:currentPage+1];
    }
    else{
        int currentPage = [pageControl currentPage];
        if(currentPage ==0){
            return;
        }
        [pageControl setCurrentPage:currentPage-1];
    }
    [self pageTurn:pageControl];

}

 

 

第三步驟:安排畫面元件

現在我們都已經在程式碼裡面準備好要放置的元件了,我們整個程式的邏輯是將所有元件放在最底層的 BaseView 上面 (內容 + pageControl) ,在 BaseView上面我們放置一個 RootView 來做為顯示的畫面 (即內容的部份) 及一個 PageControl 元件 (下面的白點) ,然後另外建立三個 View 做為切換的畫面,讓我們開始吧

 

第一,先把原本的 View 改為 BaseView

螢幕快照 2011-01-04 下午12.12.50

 

第二,再建立一個 View,class 設定為 RootView,且拉進一個 PageControl 到畫面中

螢幕快照 2011-01-04 下午4.13.38

image

 

第三,再拉三個 View  做為畫面切換用,並把背景設定為不同顏色

螢幕快照 2011-01-04 下午12.20.23

 

最後就是建立連結,請從 File’s Owner 拉線到不同元件上面,建立以下的關係,其中, Received Action 是我們剛剛寫的 IBAciton 方法,所以是從 PageControl 拉線到 File’s Owner 以建立互動關係。

螢幕快照 2011-01-04 下午2.19.38

 

如此一來就完成了我們的 Page Control 效果

 

 

第四步驟:編譯

快試著編譯看看 ,如果正常的話應該會看到以下的畫面,恭喜

螢幕快照 2011-01-04 下午2.18.33 螢幕快照 2011-01-04 下午3.55.28螢幕快照 2011-01-04 下午2.19.17  

 

 

第五步驟:繼續增加分頁

 

你可以更改以下地方成為下面的 code 以增加更多分頁,首先是程式部份

 

// UIPageControlViewController.h

    if (currentPage ==0){
        [rootView bringSubviewToFront:page1];
    }else if(currentPage ==1){
        [rootView bringSubviewToFront:page2];
    }else if(currentPage ==2){
        [rootView bringSubviewToFront:page3];
    }
    else{
        [rootView bringSubviewToFront:page4];
    }

 

// UIPageControlViewController.m

[rootView addSubview:page4];
[page4 setFrame:CGRectMake(0,0,frame.size.width,frame.size.height-50)];

 

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint endLocation = [touch locationInView:[self view]];
    if(endLocation.x-startLocation.x<0){ //下一頁
        int currentPage = [pageControl currentPage];
        if(currentPage ==3){
            return;
        }

 

然後在 xib 中再多建立一個 View ,設置不同的背景,再編譯看看

應該就會有第四個 pages 摟

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...