問題:使用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. Hadoop体系结构之 Mapreduce

    MR框架是由一个单独运行在主节点上的JobTracker和运行在每个集群从节点上的TaskTracker共同组成.主节点负责调度构成一个作业的所有任务,这些任务分布在不同的不同的从节点上.主节点监视它 ...

  2. composer.phar的作用和安装laravel5.5.4 和 vendor目录

    composer.phar有什么作用 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖 ...

  3. java代码水仙花

    总结:分离出百位,十位,各位,我总是模模糊糊的,总是分不清取膜与除号的作用区别: “%”的意思是“取膜”,表示取得的是余数 “/”的意思是除,得到的是除数. package com.a; //求水仙花 ...

  4. mybatis-spring升级导致的异常

    先记录一下,已被后面排查问题 升级前pom.xml依赖信息: <dependency> <groupId>org.mybatis</groupId> <art ...

  5. Linux MTD系统剖析

    MTD,Memory Technology Device即内存技术设备,在Linux内核中,引入MTD层为NOR FLASH和NAND FLASH设备提供统一接口.MTD将文件系统与底层FLASH存储 ...

  6. 如何正确且成功破解跨平台数据库管理工具DbVisualizer?(图文详解)

    前期博客 基于JDBC的跨平台数据库管理工具DbVisualizer安装步骤(图文详解)(博主推荐) 上图,所示,说明这个还只是免费版而已,没又破解为Pro版本. 接下来,就是带领大家如何正确且成功破 ...

  7. 4.solr学习速成之bean

    以bean的形式提交索引,以bean的形式查询出来 package com.liucheng.solr; import java.io.Serializable; import org.apache. ...

  8. list map set 集合的区别

    Java中的集合包括三大类,它们是Set.List和Map,它们都处于java.util包中,Set.List和Map都是接口,它们有各自的实现 类.Set的实现类主要有HashSet和TreeSet ...

  9. PHP_File文件操作简单常用函数

    php测试文件 <?php header("Content-type:text/html;charest=utf-8");$fileDir='Upload/File/cont ...

  10. win7系统程序未响应怎么办

    问题描述:出现“程序未响应...”而后系统程序就没有反应了. 解决方案:1.运行→输入“regedit”→hkey_current_usser/control panel/desktop/window ...