問題:使用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-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有兩大部份:

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

UIWebView分页显示的更多相关文章

  1. C#关于分页显示

    ---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...

  2. 多页的TIFF图片在aspx页面分页显示

    一.逻辑实现:将数据库中的二进制TIFF图片读出并分页显示在页面上. 1.显示界面 public FrameDimension MyGuid; ; ; public static MemoryStre ...

  3. asp.net gridview 分页显示不出来的问题

    使用gridview分页显示,在点击第二页的时候显示空白,无数据. 原因是页面刷新,绑定datatable未执行 解决方法: 1.将datatable设置为静态 2.在OnPageIndexChang ...

  4. SSRS(rdl报表)分页显示表头和对表头的冻结处理

    基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...

  5. JSP分页显示实例(基于Bootstrap)

    首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...

  6. scroll事件实现监控滚动条并分页显示示例(zepto.js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  7. 如何对sharepoint图片库的文件夹的图片按照时间排序并分页显示

    /// <summary> /// 获取图片库第一层文件夹--根据文件夹名称排序 /// </summary> /// <param name="siteUrl ...

  8. php中关于 left join 的分页显示

    /* * 统计商机搜索总条数信息 * ftt * 2015-11-10 10:13:15 */ public function getBusinessCount($btype='',$buname=' ...

  9. 《ASP.NET1200例》<asp:DataList>分页显示图片

    aspx页面代码 <asp:DataList ID="dlPhoto" runat="server" Height="137px" W ...

随机推荐

  1. (转)【Android】获取Mac地址【2】

    [Android]获取Mac地址[2] 之前写了[Android]获取Mac地址[1]有些不够详细,现在贴上一些其他代码,仅供参考. (1) 调用android 的API: NetworkInterf ...

  2. The method of type must override a superclass method解决方式(转)

    今天做struts2上传文件的时候出现了这个问题: The method execute() of type UploadAction must override or implement a sup ...

  3. cxGrid使用汇总3

    32根据单元的值设置样式   解决:procedure   <aForm>.<aColumn>StylesGetContentStyle(         Sender:   ...

  4. 1046 Shortest Distance

    题意:给出一个环和结点之间的距离,求任意两结点之间的最近距离.如图: 思路:令数组dis[i]表示1号结点逆时针至i号结点的距离,初始化dis[1]=0,其他值在输入是确定,即 dis[i] 0 1 ...

  5. 1039 Course List for Student

    题意:给出K门课程(编号1~K)以及报名该课程的学生,然后有N个学生查询,对于每一个查询,输出该学生所报的相关课程编号,且要求编号按增序输出. 思路:题目不难,解析略.(本来用map直接映射,用STL ...

  6. php创建token

    token是唯一的标识,随机字符串+时间戳结合,一般不会出现重复的字符串了. 这是一种方式 function create_token() { $randLength = 6; $chars = 'a ...

  7. modelform实例学习

    先来回顾下form的用法 一对多关系,form显示的是下拉框 多对多关系,form显示的是多选框 modelform的用法 modelsform的写法 from django.forms import ...

  8. linux输入子系统之按键驱动

    上一节中,我们讲解了Linux  input子系统的框架,到内核源码里详细分析了输入子系统的分离分层的框架等. 上一节文章链接:http://blog.csdn.net/lwj103862095/ar ...

  9. python 模块 optparse

    optparse,是一个能够让程式设计人员轻松设计出简单明了.易于使用.符合标准的Unix命令列程式的Python模块.生成使用和帮助信息. 下面是一个简单的示例: import optparse p ...

  10. Hadoop编码解码【压缩解压缩】机制详解(1)

    想想一下,当你需要处理500TB的数据的时候,你最先要做的是存储下来.你是选择源文件存储呢?还是处理压缩再存储?很显然,压缩编码处理是必须的.一段刚刚捕获的60分钟原始视屏可能达到2G,经过压缩处理可 ...