UIWebView分页显示

問題：使用iOS UIWebView時，載入本地html檔案，但是該檔案太大，結果螢幕畫面形成一長條型顯示，雖然用滾動畫面可以看見整個html檔案，但是滑來滑去，不好用。

目標：用UIWebView載入html檔時，將html檔案切成一頁一頁，向左滑動螢幕可看下一頁，向右滑動螢幕可看下一頁。

做法：我用的是Xcode V4.2 Build 4C199， MAC OS X 10.6 (10K549)

(1) 用File/New/New Project產生一個新專案， 選iOS/Application/Single View Application。下一個螢幕，Product Name：UIWebViewPage、Company Identifier：com.yourcompany、 Class Prefix：UIWebViewPage ，Device Family:iPhone，勾選 Use Automatic Reference Counting，其他均不勾選。下一個螢幕，不勾選 Source Control: Create local git repository for this project。完成後，有UIWebViewPageAppDelegate.h、UIWebViewPageAppDelegate.m、UIWebViewPageViewController.h、UIWebViewPageViewController.m、UIWebViewPageViewController.xib。

(2)點UIWebViewPageViewController.xib，Navigation Area及Debug Area中有File's Owner、First Responder、View三個圖標icon，點View，Debug Area出現代表View的框框，在Utility Area最下方鍵入UIWebView，出現WebView圖示，將WebView圖示拉到View的框框，讓它佔滿整個View，這時View框框成了UIWebView框框。

(3)點UIWebViewPageViewController.h，加入「@property (strong, nonatomic) IBoutlet UIWebView* webView;」及<UIScrollViewDelegate>，如下：

@interface UIWebViewPageViewController : UIViewController <UIScrollViewDelegate>

@property (strong, nonatomic) IBOutletUIWebView* webView;

@end

(4)點UIWebViewPageViewController.m，加入「@synthesize webView;」，如下：

@implementation UIWebViewPageViewController

@synthesize webView;

(5)點UIWebViewPageViewController.xib，點Debug Area的File's Owner，點Utility Area/Show the Connections inspector，Outlets下有webView，點右方圓圈並拉到Debug Area的UIWebView框框，將instance variable webView連上.xib的UIWebViewPageViewControllerUIWebView。

(6)準備一個html檔，我使用2012-09-19.htm，將其拉入專案，注意用「copy」。請注意2012-09-19.htm檔內的css3，如下：

<style>

#swipe-horizontal{

font-size: 100%;

-webkit-column-320px;

height:440px;

}

</style>

說明：2012-09-19.htm檔內使用這一段css3可以讓滑動螢幕後，讓html檔一頁一頁地向左或向右滑入螢幕，主要的css3是「-webkit-column-320px;」這個設定column的css3將2012-09-19.htm橫向分頁。如果2012-09-19.htm檔內不使用這一段css3，滑動螢幕後，每一頁只會從上方或下方滑入螢幕。

(7)點UIWebViewPageViewController.m，修改viewDidLoad如下：

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

// 將htm檔載入UIWebView

NSString *path;

NSBundle *thisBundle = [NSBundle mainBundle];

path = [thisBundle pathForResource:@"2012-09-19" ofType:@"htm"];

// make a file: URL out of the path

NSURL *instructionsURL = [NSURL fileURLWithPath:path];

[webView loadRequest:[NSURLRequest requestWithURL:instructionsURL]];

//for iOS 4.x pagination

// 以下是針對iOS4.x做UIWebView分頁

// 「pagingEnabled = YES;」將html檔案切成一頁一頁需將每一個subview均pagingEnabled

// 同時，不要反彈，「bounces = NO;」

// 同時，不要有橫向滑動軸，「showsHorizontalScrollIndicator = NO;」

// 同時，不要有直向滑動軸，「showsVerticalScrollIndicator = NO;」

for(id subview in webView.subviews)

if ([[subview class] isSubclassOfClass:[UIScrollView class]]) {

((UIScrollView *)subview).pagingEnabled = YES;

((UIScrollView *)subview).bounces = NO;

((UIScrollView *)subview).showsHorizontalScrollIndicator = NO;

((UIScrollView *)subview).showsVerticalScrollIndicator = NO;

break;

}

// for iOS 5.0 pagination

// 以下是針對iOS5做UIWebView分頁，iOS5在UIWebView下有scrollView，所以不需要再對所有subview設定

// 可以試試將上段iOS4.x部份註解comment掉並用以下這一段

/*

self.webView.scrollView.pagingEnabled = YES;

self.webView.scrollView.bounces = NO;

self.webView.scrollView.showsHorizontalScrollIndicator = NO;

self.webView.scrollView.showsVerticalScrollIndicator = NO;

*/

}

說明：閱讀以上這一段程式碼的註解部份，即可了解viewDidLoad有兩大部份：

1. 將htm檔載入UIWebView：從「NSString *path;」到「[webView loadRequest:[NSURLRequestrequestWithURL:instructionsURL]];」，這一段程式是將htm檔載入UIWebView的標準作法。基本上是先設定path(用NSBundle)、NSURL，再用[webView loadRequest:...]將.htm檔載入webView。
2. 做UIWebView分頁：針對iOS4.x及iOS5不同，現針對iOS4.x說明：「for(id subview in webView.subviews)」及「if ([[subview class] isSubclassOfClass:[UIScrollView class]])」是在找到webView所有屬於UIScrollView class的subview，並將其pagingEnabled=YES，其他「bounces = NO;」、「showsHorizontalScrollIndicator = NO;」、「showsVerticalScrollIndicator = NO;」設定不要反彈、不要有橫向滑動軸、不要有直向滑動軸只是讓螢幕好看–些。iOS5因UIWebView有scrollView，故簡化很多，只要設定self.webView.scrollView的pagingEnabled=YES、showsHorizontalScrollIndicator = NO、showsVerticalScrollIndicator = NO即可。

結論：Paginate html file in UIWebView 、 UIWebView分頁看起來十分困難，其實，只有一行，iOS4.x：「((UIScrollView *)subview).pagingEnabled = YES;」，iOS5：「self.webView.scrollView.pagingEnabled = YES;」。這時，每一頁只會從上方或下方滑入螢幕，因此，2012-09-19.htm檔內需使用一段css3，主要是「-webkit-column-320px;」這個設定column的css3，將2012-09-19.htm橫向分頁。