mui实现下方突出大按钮图标

所属分类：[APP] | 创建时间：2017-11-16 | 文章属性：原创 | 文章来源：http://windfly.cn | 作者：windfly

#原理
> 使用nativeView原生画图，第一个画原型按钮和外扩边线，第二个画其他按钮

#参考画图代码
##画图代码
```
var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = navUtil.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#d74b28',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '+', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '30px'
						}
					}]);

tags = [{
							tag: 'rect',
							id: 'bg',
							position: {
								top: '1px',
								left: '0px',
								width: '100%',
								height: '100%'
							},
							rectStyles: {
								color: '#fff',
								borderColor: '#ccc',
								borderWidth: '1px'
							}
						}, {
							"tag": "font",
							"id": "indexIcon",
							"text": "\ue500",
							"position": {
								"top": "4px",
								"left": "0",
								"width": "45%",
								"height": "24px"
							},
							"textStyles": {
								"fontSrc": "_www/fonts/mui.ttf",
								"align": "center",
								"size": "24px"
							}
						}, {
							"tag": "font",
							"id": "indexText",
							"text": "首页",
							"position": {
								"top": "23px",
								"left": "0",
								"width": "45%",
								"height": "24px"
							},
							"textStyles": {
								"align": "center",
								"size": "10px"
							}
						}, /*{
							"tag": "font",
							"id": "newsIcon",
							"text": "\ue201",
							"position": {
								"top": "4px",
								"left": "20%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"fontSrc": "_www/fonts/mui.ttf",
								"align": "center",
								"size": "24px"
							}
						}, {
							"tag": "font",
							"id": "newsText",
							"text": "消息",
							"position": {
								"top": "23px",
								"left": "20%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"align": "center",
								"size": "10px"
							}
						},*/ {
							"tag": "font",
							"id": "contactIcon",
							"text": "\ue100",
							"position": {
								"top": "4px",
								"left": "65%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"fontSrc": "_www/fonts/mui.ttf",
								"align": "center",
								"size": "24px"
							}
						}, {
							"tag": "font",
							"id": "contactText",
							"text": "设置",
							"position": {
								"top": "24px",
								"left": "65%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"align": "center",
								"size": "10px"
							}
						} /*{
							"tag": "font",
							"id": "newwindowIcon",
							"text": "\ue6c9",
							"position": {
								"top": "4px",
								"left": "75%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"fontSrc": "_www/fonts/iconfont.ttf",
								"align": "center",
								"size": "24px"
							}
						}, {
							"tag": "font",
							"id": "newwindowText",
							"text": "新窗口",
							"position": {
								"top": "24px",
								"left": "75%",
								"width": "25%",
								"height": "24px"
							},
							"textStyles": {
								"align": "center",
								"size": "10px"
							}
						},*/
						
					];

var drawNativeIcon1 = navUtil.drawNative('tabBar', {
						bottom: '0px',
						left: '0px',
						width: '100%',
						height: '50px'
					}, tags);

self.append(drawNativeIcon1);
					// append 到父webview中
					self.append(drawNativeIcon);

//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');

});
					// 中间凸起图标绘制及监听点击完毕

// 创建子webview窗口 并初始化
					var aniShow = {};
					navUtil.initSubpage(aniShow);

var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = navUtil.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;

/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						currIndex = currIndex > 0 ?1:currIndex;
						console.log(currIndex);
						
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

if(targetPage == activePage) {
							return;
						}

if(currIndex !== 3) {
							//底部选项卡切换
							navUtil.toggleNview(currIndex);
							// 子页面切换
							navUtil.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else {
							//第四个tab 打开新窗口
							plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
						}
					});

});
```
##工具类代码
```
var navUtil = {
	options: {
		ACTIVE_COLOR: "#007aff",
		NORMAL_COLOR: "#000",
		subpages: ["../html/tab-webview-subpage-chat.html", "../html/tab-webview-subpage-contact.html"]
	},
	/**
	 *  简单封装了绘制原生view控件的方法
	 *  绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
	 */
	drawNative: function(id, styles, tags) {
		var view = new plus.nativeObj.View(id, styles, tags);
		return view;
	},
	/**
	 * 初始化首个tab窗口 和 创建子webview窗口 
	 */
	initSubpage: function(aniShow) {
		var subpage_style = {
				top: 0,
				bottom: 51
			},
			subpages = navUtil.options.subpages,
			self = plus.webview.currentWebview(),
			temp = {};
			
		//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
		if(mui.os.android) {
			if(plus.navigator.isImmersedStatusbar()) {
				subpage_style.top += plus.navigator.getStatusbarHeight();
			}
			if(self.getTitleNView()) {
				subpage_style.top += 40;
			}
			
		}

// 初始化第一个tab项为首次显示
		temp[self.id] = "true";
		mui.extend(aniShow, temp);
		// 初始化绘制首个tab按钮
		//navUtil.toggleNview(0);

for(var i = 0, len = subpages.length; i < len; i++) {

if(!plus.webview.getWebviewById(subpages[i])) {
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				//初始化隐藏
				sub.hide();
				// append到当前父webview
				self.append(sub);
			}
		}
	},
	/**	
	 * 点击切换tab窗口 
	 */
	changeSubpage: function(targetPage, activePage, aniShow) {
		//若为iOS平台或非首次显示，则直接显示
		if(mui.os.ios || aniShow[targetPage]) {
			plus.webview.show(targetPage);
		} else {
			//否则，使用fade-in动画，且保存变量
			var temp = {};
			temp[targetPage] = "true";
			mui.extend(aniShow, temp);
			plus.webview.show(targetPage, "fade-in", 300);
		}
		//隐藏当前 除了第一个父窗口
		if(activePage !== plus.webview.getLaunchWebview()) {
			plus.webview.hide(activePage);
		}
	},
	/**
	 * 点击重绘底部tab （view控件）
	 */
	toggleNview: function(currIndex) {
		currIndex = currIndex * 2;
		// 重绘当前tag 包括icon和text，所以执行两个重绘操作
		navUtil.updateSubNView(currIndex, navUtil.options.ACTIVE_COLOR);
		navUtil.updateSubNView(currIndex + 1, navUtil.options.ACTIVE_COLOR);
		// 重绘兄弟tag 反之排除当前点击的icon和text
		for(var i = 0; i < 8; i++) {
			if(i !== currIndex && i !== currIndex + 1) {
				navUtil.updateSubNView(i, navUtil.options.NORMAL_COLOR);
			}
		}
	},
	/*
	 * 改变颜色
	 */
	changeColor: function(obj, color) {
		obj.color = color;
		return obj;
	},
	/*
	 * 利用 plus.nativeObj.View 提供的 drawText 方法更新 view 控件
	 */
	updateSubNView: function(currIndex, color) {
		var self = plus.webview.currentWebview(), 
		nviewEvent = plus.nativeObj.View.getViewById("tabBar");//, // 获取nview控件对象
		currTag = tags[currIndex+1];
		if(!currTag)return; 
		//console.log(JSON.stringify(tags[currIndex+1]+color));
		nviewEvent.drawText(currTag.text, currTag.position, navUtil.changeColor(currTag.textStyles, color), currTag.id);
	}
};
```