UIWebView分页显示

时间 2019-11-18 标签 uiwebview 分页显示

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

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

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

(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。git

(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框框。web

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

@interface UIWebViewPageViewController : UIViewController <UIScrollViewDelegate>this

@property (strong, nonatomic) IBOutletUIWebView* webView;atom

@endcode

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

@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-width:320px;

height:440px;

}

</style>

說明：2012-09-19.htm檔內使用這一段css3能够讓滑動螢幕後，讓html檔一頁一頁地向左或向右滑入螢幕，主要的css3是「-webkit-column-width: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有兩大部份：

將htm檔載入UIWebView：從「NSString *path;」到「[webView loadRequest:[NSURLRequestrequestWithURL:instructionsURL]];」，這一段程式是將htm檔載入UIWebView的標準做法。基本上是先設定path(用NSBundle)、NSURL，再用[webView loadRequest:...]將.htm檔載入webView。

作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-width:320px;」這個設定column的css3，將2012-09-19.htm橫向分頁。