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>
@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>
</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 {
} |
說明:閱讀以上這一段程式碼的註解部份,即可了解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橫向分頁。
UIWebView分页显示的更多相关文章
- C#关于分页显示
---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...
- 多页的TIFF图片在aspx页面分页显示
一.逻辑实现:将数据库中的二进制TIFF图片读出并分页显示在页面上. 1.显示界面 public FrameDimension MyGuid; ; ; public static MemoryStre ...
- asp.net gridview 分页显示不出来的问题
使用gridview分页显示,在点击第二页的时候显示空白,无数据. 原因是页面刷新,绑定datatable未执行 解决方法: 1.将datatable设置为静态 2.在OnPageIndexChang ...
- SSRS(rdl报表)分页显示表头和对表头的冻结处理
基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...
- JSP分页显示实例(基于Bootstrap)
首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- 如何对sharepoint图片库的文件夹的图片按照时间排序并分页显示
/// <summary> /// 获取图片库第一层文件夹--根据文件夹名称排序 /// </summary> /// <param name="siteUrl ...
- php中关于 left join 的分页显示
/* * 统计商机搜索总条数信息 * ftt * 2015-11-10 10:13:15 */ public function getBusinessCount($btype='',$buname=' ...
- 《ASP.NET1200例》<asp:DataList>分页显示图片
aspx页面代码 <asp:DataList ID="dlPhoto" runat="server" Height="137px" W ...
随机推荐
- (转)【Android】获取Mac地址【2】
[Android]获取Mac地址[2] 之前写了[Android]获取Mac地址[1]有些不够详细,现在贴上一些其他代码,仅供参考. (1) 调用android 的API: NetworkInterf ...
- The method of type must override a superclass method解决方式(转)
今天做struts2上传文件的时候出现了这个问题: The method execute() of type UploadAction must override or implement a sup ...
- cxGrid使用汇总3
32根据单元的值设置样式 解决:procedure <aForm>.<aColumn>StylesGetContentStyle( Sender: ...
- 1046 Shortest Distance
题意:给出一个环和结点之间的距离,求任意两结点之间的最近距离.如图: 思路:令数组dis[i]表示1号结点逆时针至i号结点的距离,初始化dis[1]=0,其他值在输入是确定,即 dis[i] 0 1 ...
- 1039 Course List for Student
题意:给出K门课程(编号1~K)以及报名该课程的学生,然后有N个学生查询,对于每一个查询,输出该学生所报的相关课程编号,且要求编号按增序输出. 思路:题目不难,解析略.(本来用map直接映射,用STL ...
- php创建token
token是唯一的标识,随机字符串+时间戳结合,一般不会出现重复的字符串了. 这是一种方式 function create_token() { $randLength = 6; $chars = 'a ...
- modelform实例学习
先来回顾下form的用法 一对多关系,form显示的是下拉框 多对多关系,form显示的是多选框 modelform的用法 modelsform的写法 from django.forms import ...
- linux输入子系统之按键驱动
上一节中,我们讲解了Linux input子系统的框架,到内核源码里详细分析了输入子系统的分离分层的框架等. 上一节文章链接:http://blog.csdn.net/lwj103862095/ar ...
- python 模块 optparse
optparse,是一个能够让程式设计人员轻松设计出简单明了.易于使用.符合标准的Unix命令列程式的Python模块.生成使用和帮助信息. 下面是一个简单的示例: import optparse p ...
- Hadoop编码解码【压缩解压缩】机制详解(1)
想想一下,当你需要处理500TB的数据的时候,你最先要做的是存储下来.你是选择源文件存储呢?还是处理压缩再存储?很显然,压缩编码处理是必须的.一段刚刚捕获的60分钟原始视屏可能达到2G,经过压缩处理可 ...