Trust
Trust
  • 发布:2017-03-27 18:48
  • 更新:2021-03-12 17:19
  • 阅读:9554

【示例】使用nativeView绘制窗口的导航栏

分类:HTML5+

##应用场景
HBuilder8.0重大更新中提到,非必要不推荐使用同屏多webview中的title场景。
过去使用了父子webview模式,现在推荐使用nativeView方案,可以进一步提升应用整体性能。

##具体实现
###创建nativeView
参考相关文档原生控件对象

// 创建nativeView  
var headView = new plus.nativeObj.View('test_view', {  
	height: '45px',  
	position: 'dock',  
	dock: 'top'  
});

这里需要注意,将position设置为dock,并且dock设置为top。这样,nativeView就会在整个webview的最上方,并且挤压webview的高度。

###绘制标题
参考相关文档绘制文本

// 绘制标题  
headView.drawText('title', {}, {  
	color: '#000000',  
	size: '16px'  
});

这里的目标区域,采用默认的整个view的区域即可。
###设置背景颜色
参考相关文档绘制矩形区域

// 绘制背景颜色  
headView.drawRect('#ffffff');  
// 绘制边框  
headView.drawRect('#ff0000', {  
	top: '44px',  
	height: '1px'  
});

###绘制icon
参考相关文档绘制图片
这里以绘制back箭头为例

// 绘制back箭头  
var backIcon = new plus.nativeObj.Bitmap('icon_back');  
var BACK_BASE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=';  
backIcon.loadBase64Data(BACK_BASE, function() {  
	headView.drawBitmap(backIcon, {}, {  
		width: '25px',  
		height: '25px',  
		top: '10px',  
		left: '5px'  
	});  
});

如果需要绘制其它更多的icon等内容,可以根据需求继续添加。
###事件监听
参考相关文档添加事件监听器
这里以click事件为例

// 事件监听  
headView.addEventListener('click', function(e) {  
	var x = e.clientX;  
	console.log('触摸目标在view控件中的x坐标:' + x);  
});

事件对象中,主要用到的属性就是clientX,其它更多属性请参考文档说明。
###添加至webview
nativeView创建完成后,需要添加到webview上,有些属性才会生效,例如:dock等。

plus.webview.currentWebview().append(headView);

##通用方法
看完上面的例子,可能很多小伙伴会觉得步骤很多,操作很繁琐。
这里提供一个简单的封装的方法,适用于部分场景,实际开发中还是要自己根据需求进行进一步的定制。
参数说明:

{  
	"id": "nativeView的id",  
	"height": "导航栏高度",  
	"title": "标题",  
	"titleColor": "标题文字颜色",  
	"fontSize": "标题字体大小",  
	"backgroundColor": "导航栏背景颜色",  
	"borderColor": "导航栏边框颜色",  
	"back": "是否绘制back箭头,Boolean"  
}

详细的方法,请见附件中的demo.html。

##更多
为了方便开发者使用,html5plus还提供了titleNView方案,并且mui也提供了相应的扩展方法。
参考原生导航栏控件titleNView使用说明以及打开带原生导航栏的新页面

关于nativeObj的使用,如果大家在实际开发中,有更好的应用例子,欢迎在社区中分享学习交流。

最后附上源码

4 关注 分享
lhyh 4***@qq.com Neil_HL s***@gmail.com

要回复文章请先登录注册

xianne

xianne

怎样画一个圆角图片
2021-03-12 17:19
3***@qq.com

3***@qq.com

如何画一个 圆角的 图片
2018-12-19 15:32
所谓

所谓

这个是不是 被新的方法mui.openWindowWithTitle 给取代了呀
2017-08-01 10:02
y***@qq.com

y***@qq.com

回复 tt0668 :
百度找个网站转换一下就好了
2017-06-28 18:08
tt0668

tt0668

回复 Trust :
请问如何得到icon 的base64 编码
2017-04-26 18:53
c***@163.com

c***@163.com

这个会不会存在沉浸式导航栏的问题,需要怎么设置
2017-04-11 09:00
Trust

Trust (作者)

回复 4***@qq.com :
可以的。
2017-03-28 11:08
4***@qq.com

4***@qq.com

这个能用来绘制底部菜单栏么?
2017-03-28 11:04