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 ...
随机推荐
- Hadoop体系结构之 Mapreduce
MR框架是由一个单独运行在主节点上的JobTracker和运行在每个集群从节点上的TaskTracker共同组成.主节点负责调度构成一个作业的所有任务,这些任务分布在不同的不同的从节点上.主节点监视它 ...
- composer.phar的作用和安装laravel5.5.4 和 vendor目录
composer.phar有什么作用 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖 ...
- java代码水仙花
总结:分离出百位,十位,各位,我总是模模糊糊的,总是分不清取膜与除号的作用区别: “%”的意思是“取膜”,表示取得的是余数 “/”的意思是除,得到的是除数. package com.a; //求水仙花 ...
- mybatis-spring升级导致的异常
先记录一下,已被后面排查问题 升级前pom.xml依赖信息: <dependency> <groupId>org.mybatis</groupId> <art ...
- Linux MTD系统剖析
MTD,Memory Technology Device即内存技术设备,在Linux内核中,引入MTD层为NOR FLASH和NAND FLASH设备提供统一接口.MTD将文件系统与底层FLASH存储 ...
- 如何正确且成功破解跨平台数据库管理工具DbVisualizer?(图文详解)
前期博客 基于JDBC的跨平台数据库管理工具DbVisualizer安装步骤(图文详解)(博主推荐) 上图,所示,说明这个还只是免费版而已,没又破解为Pro版本. 接下来,就是带领大家如何正确且成功破 ...
- 4.solr学习速成之bean
以bean的形式提交索引,以bean的形式查询出来 package com.liucheng.solr; import java.io.Serializable; import org.apache. ...
- list map set 集合的区别
Java中的集合包括三大类,它们是Set.List和Map,它们都处于java.util包中,Set.List和Map都是接口,它们有各自的实现 类.Set的实现类主要有HashSet和TreeSet ...
- PHP_File文件操作简单常用函数
php测试文件 <?php header("Content-type:text/html;charest=utf-8");$fileDir='Upload/File/cont ...
- win7系统程序未响应怎么办
问题描述:出现“程序未响应...”而后系统程序就没有反应了. 解决方案:1.运行→输入“regedit”→hkey_current_usser/control panel/desktop/window ...