iOS开发-webView添加头部与尾部控件
2015-09-05 14:57
337 查看
在app开发中我们经常会遇到在内容详细页中界面元素比较复杂,或者格式不确定这种情况,通常我们会利用UIWebView来加载html来处理这样的事件,因为这样不仅简单而且可控性更好,我们不会再因为内容格式的改变,再去苦逼的改代码,一层层的解析数据,在苦苦的等待审核,但是因此也会有一些情况出现,比如我们想要在界面上加上很酷炫的效果,或者有些效果是必须要嵌入原生的元素,这样我们又会遇到很多问题,比如怎么在webView头部加入控件,又如何在尾部添加按钮什么的,这篇文章就要介绍如何为webView添加头部与尾部控件:
1.首先创建webView
@property (nonatomic, strong) UIView* webBrowserView;
self.webss = [[UIWebView alloc]init];
self.webss.backgroundColor = [UIColor clearColor];
self.webss.delegate= self;
self.webss.tag = 1314;
self.webss.scrollView.delegate = self;
self.webss.frame = CGRectMake(0, N***HEIGHT, WIDTH,HEIGHT-N***HEIGHT);
[self.view addSubview:self.webss];
2.我们来遍历一下webView的scrollView有哪些子视图:
==self.webss.scrollView.subviews====(
"<UIWebBrowserView: 0x159b9800; frame = (0 0; 320 504); gestureRecognizers = <NSArray: 0x14ee1100>; layer = <UIWebLayer: 0x14ee0eb0>>"
)
可以看到只有一个子视图UIWebBrowserView,而这个正是渲染html的view,并且他的高度为504,而测试用的是5s,高度为568,刚好空出来了64个像素,正好是导航器的位置,由此可见我们只要相应的改变[b]UIWebBrowserView的坐标,便可在头部预留出位置给将要添加的原生视图,操作如3;[/b]
3.添加头部视图:
[b]3.1获取[b]UIWebBrowserView[/b][/b]
self.webBrowserView = self.webss.scrollView.subviews[0];
self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(-20, 0, WIDTH+40, 200)];
[self.webss addSubview:self.headerImageView];
3.2改变UIWebBrowserView的坐标
CGRect frame =
self.webBrowserView.frame;
frame.origin.y =
CGRectGetMaxY(self.headerImageView.frame);
self.webBrowserView.frame = frame;
3.3添加头部视图(这种情况头部视图不会随着webView的滚动而随着滚动,是固定的)
[self.webss
sendSubviewToBack:self.headerImageView];
要想添加的视图随着一块滚动,看以下操作:
3.4将视图添加到webView的ScrollView上
headView = [[UIView alloc]init];
headView.backgroundColor = [UIColor clearColor];
headView.frame = CGRectMake(0, 0, WIDTH, 200);
[self.webss.scrollView addSubview:headView];
至此头部控件已添加完毕,接下来添加尾部控件
4.添加尾部控件
第一:既然要在屁股后边加控件,你总得知道他多高吧,所以我们要获取webView内容页的总高度,而因为可能网速,图片这些原因,他每次的contentsize是实时变化的,所以我们要监听webView的scrollView的contentSize的变化:
- (void)addObserverForWebViewContentSize{
[self.webss.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];
}
- (void)removeObserverForWebViewContentSize{
[self.webss.scrollView removeObserver:self forKeyPath:@"contentSize"];
}
以下是监听结果回调事件:
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
//在这里边添加你的代码
[self layoutCell];
}
//设置footerView的合理位置
- (void)layoutCell{
//取消监听,因为这里会调整contentSize,避免无限递归
[self removeObserverForWebViewContentSize];
UIView *viewss = [self.view viewWithTag:99999];
CGSize contentSize =
self.webss.scrollView.contentSize;
UIView *vi = [[UIView
alloc]init];
vi.backgroundColor = BGCOLOR;
vi.userInteractionEnabled = YES;
vi.tag = 99999;
vi.frame = CGRectMake(0, contentSize.height, WIDTH, 150);
[self.webss.scrollView addSubview:vi];
self.webss.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 150);
//重新监听
[self addObserverForWebViewContentSize];
}
OK,基本上就这样了,因为博主工作比较忙,可能三四个月才会写一篇,所以语言组织不是很好,望大家见谅,源码例子整理后会公布地址,届时在更新文章,在下一篇文章中我将介绍如何实现js与原生OC代码交互
1.首先创建webView
@property (nonatomic, strong) UIView* webBrowserView;
self.webss = [[UIWebView alloc]init];
self.webss.backgroundColor = [UIColor clearColor];
self.webss.delegate= self;
self.webss.tag = 1314;
self.webss.scrollView.delegate = self;
self.webss.frame = CGRectMake(0, N***HEIGHT, WIDTH,HEIGHT-N***HEIGHT);
[self.view addSubview:self.webss];
2.我们来遍历一下webView的scrollView有哪些子视图:
==self.webss.scrollView.subviews====(
"<UIWebBrowserView: 0x159b9800; frame = (0 0; 320 504); gestureRecognizers = <NSArray: 0x14ee1100>; layer = <UIWebLayer: 0x14ee0eb0>>"
)
可以看到只有一个子视图UIWebBrowserView,而这个正是渲染html的view,并且他的高度为504,而测试用的是5s,高度为568,刚好空出来了64个像素,正好是导航器的位置,由此可见我们只要相应的改变[b]UIWebBrowserView的坐标,便可在头部预留出位置给将要添加的原生视图,操作如3;[/b]
3.添加头部视图:
[b]3.1获取[b]UIWebBrowserView[/b][/b]
self.webBrowserView = self.webss.scrollView.subviews[0];
self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(-20, 0, WIDTH+40, 200)];
[self.webss addSubview:self.headerImageView];
3.2改变UIWebBrowserView的坐标
CGRect frame =
self.webBrowserView.frame;
frame.origin.y =
CGRectGetMaxY(self.headerImageView.frame);
self.webBrowserView.frame = frame;
3.3添加头部视图(这种情况头部视图不会随着webView的滚动而随着滚动,是固定的)
[self.webss
sendSubviewToBack:self.headerImageView];
要想添加的视图随着一块滚动,看以下操作:
3.4将视图添加到webView的ScrollView上
headView = [[UIView alloc]init];
headView.backgroundColor = [UIColor clearColor];
headView.frame = CGRectMake(0, 0, WIDTH, 200);
[self.webss.scrollView addSubview:headView];
至此头部控件已添加完毕,接下来添加尾部控件
4.添加尾部控件
第一:既然要在屁股后边加控件,你总得知道他多高吧,所以我们要获取webView内容页的总高度,而因为可能网速,图片这些原因,他每次的contentsize是实时变化的,所以我们要监听webView的scrollView的contentSize的变化:
- (void)addObserverForWebViewContentSize{
[self.webss.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];
}
- (void)removeObserverForWebViewContentSize{
[self.webss.scrollView removeObserver:self forKeyPath:@"contentSize"];
}
以下是监听结果回调事件:
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
//在这里边添加你的代码
[self layoutCell];
}
//设置footerView的合理位置
- (void)layoutCell{
//取消监听,因为这里会调整contentSize,避免无限递归
[self removeObserverForWebViewContentSize];
UIView *viewss = [self.view viewWithTag:99999];
CGSize contentSize =
self.webss.scrollView.contentSize;
UIView *vi = [[UIView
alloc]init];
vi.backgroundColor = BGCOLOR;
vi.userInteractionEnabled = YES;
vi.tag = 99999;
vi.frame = CGRectMake(0, contentSize.height, WIDTH, 150);
[self.webss.scrollView addSubview:vi];
self.webss.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 150);
//重新监听
[self addObserverForWebViewContentSize];
}
OK,基本上就这样了,因为博主工作比较忙,可能三四个月才会写一篇,所以语言组织不是很好,望大家见谅,源码例子整理后会公布地址,届时在更新文章,在下一篇文章中我将介绍如何实现js与原生OC代码交互
相关文章推荐
- iOS开发 计算字符串单行的长度
- 基于cocos2dx 2.x做的一些shader效果Demo
- android 4.4 系统图片库调用
- Unity简介
- Android实战简易教程-第五十四枪(通过实现OnScrollListener接口实现下拉刷新功能)
- iOS开发,集成高德poi功能
- iOS8新特性IBDesignable
- 对Unity3D 中Quaternion一些整理
- android TextUtils类
- Unity3D协程介绍 以及 使用
- 我的第一个有点意思的IOS工程 - 图片局部放大
- 安卓开发获取屏幕像素和密度
- Android LruCache
- IOS 四种保存数据的方式
- Android Studio中Gradle使用详解
- cocos植物大战僵尸(二)主菜单场景:单例类
- android本地轻量级缓存
- 部分手机RadioButton作为Tab键不居中问题
- Android设计模式——抽象工厂模式(Abstract Factory)
- Android ADT 中的项目迁移到 Android Studio出现编码乱码问题