* Bottom Bar的完成
* /chats/index.ui的完成
* /contacts/index.ui的完成
* /discover/index.ui的完成
* /me/index.ui的完成
多人并行工作的前提是代码版本管理比如SVN，GIT，我们这里使用GIT，地址是https://github.com/do-project/Fake-Weixin，每一节结束后我们都会提交GIT服务，你可以下载这个节点的代码参考。我们也会在附件附加这一节的项目代码。
下一节我们完成第一个子任务，BottomBar的实现。
-------------------------------------------------------------
这一节主要是完成底部导航栏的实现。
0. 我们首先来分析一下界面效果图和设计图
整个底部导航分4个重复的部分，每个部分由一个图片ImageView和底部标题Label，以及右上角标示，这个标示可以用圆角Label来实现，这个标示缺省的时候应该是隐藏的。
1. 第一步我们得找到对应的图片资源，通常开发这些资源由美工提供，我们现在模仿微信，最好的方式是从微信原生安装包里获取，不能直接靠截图，而是打开微信ios，android安装包，ios的安装包是ipa和android的安装包apk都是一个压缩文件，解开可以获取到一些图片资源。目前我只需要底部8个图标，包括未点中以及点中的高亮图标，外面把这些图标放在image目录下
2. 先删除先前增加的4个临时按钮，然后按照美工提供的尺寸数据布局好新的组件，包括4个do_ImageView组件和4个Label组件以及4个右上角的Label
简单计算可以得出ImageView的大小是60*60。这里有一个小技巧，设置好一组ImageView和Label后选中2个组件，然后右键“Copy”，然后再"Paste"三次，还可以选中多个组件各种对齐。
再细调一下，把图片和文字设置好，图片设置就是设置ImageView的source属性，Label需要设置文字居中，设置textAlign属性为center，设置字体，设置背景色，前景色等等，设置右上角三个Label的visible为false。中间添加一个ALayout设置背景为灰色，作为ViewShower和Bottom Bar上下的分割线. 这里要注意，右上角的正圆形Label的实现方式就是设置border属性，border设置为FF0000FF,1,15 表示边界线的颜色是红色，宽度1，圆角半径15（Label的宽高都是30），从而实现正圆。
在真机上测试一下效果，iPhone和Android手机真机的效果图如下：
3. 这个时候会有2个问题，如果给ImageView上添加点击事件的话，用户必须点中这个图片才能触发点击，这样体验不好。第二个问题是图片在Android上稍微有点变形，如果在比如iPhone4上，可能圆形会变成椭圆，这个问题是由于不同手机宽高比的差异。
要解决的办法是：
* 把Bottom Bar所在的ALayout增加4个一样大小的子ALayout，然后把imageview，label都放在对应的子ALayout上，然后给子ALayout增加点击事件，这样用户的手指只要接触到差不多位置都能触发事件
* 把上面的4个子ALayout的isStretch属性改成false，这个原理可以参考文档 ALayout的示例demo
4. 修改index.ui.js，添加代码主要是在底部bottom bar切换按钮的时候修改所有图标的颜色和字的前景色。
var button = ui("do_Button_"); var imageview = ui("do_ImageView_"); var label = ui("do_Label_"); button.on("touch", function() { showView("chats"); }); var button = ui("do_Button_"); var imageview = ui("do_ImageView_"); var label = ui("do_Label_"); button.on("touch", function() { showView("contacts"); }); var button = ui("do_Button_"); var imageview = ui("do_ImageView_"); var label = ui("do_Label_"); button.on("touch", function() { showView("discover"); }); var button = ui("do_Button_"); var imageview = ui("do_ImageView_"); var label = ui("do_Label_"); button.on("touch", function() { showView("me"); }); function showView(name) { viewshower.showView(name); if (name == "chats") { imageview.source = "source://image/tabbar_mainframeHL.png"; label.fontColor = "BBFF"; } else { imageview.source = "source://image/tabbar_mainframe.png"; label.fontColor = "FFFFF"; } if (name == "contacts") { imageview.source = "source://image/tabbar_contactsHL.png"; label.fontColor = "BBFF"; } else { imageview.source = "source://image/tabbar_contacts.png"; label.fontColor = "FFFFF"; } if (name == "discover") { imageview.source = "source://image/tabbar_discoverHL.png"; label.fontColor = "BBFF"; } else { imageview.source = "source://image/tabbar_discover.png"; label.fontColor = "FFFFF"; } if (name == "me") { imageview.source = "source://image/tabbar_meHL.png"; label.fontColor = "BBFF"; } else { imageview.source = "source://image/tabbar_me.png"; label.fontColor = "FFFFF"; } }
到此为止，底部导航栏基本实现完成，这一节比较简单，主要是一些细致的ui拖拽调整。我们用调试版本看一下Android，iOS的效果都非常不错。
我们开始实现ViewShower的第一页主体内容.
---------------------------------------------------------------------------------------
接上一节 底部导航 ,我们这一节主要是完成微信4个主页面的第一个页面“微信”页面,这一节内容比较多，我们分多个跟帖来完成
0 老规矩，先分析一下UI，由三个大部分组成，系统状态栏，工具栏和微信聊天记录列表。
