移动开发技术-类微信界面设计

移动开发技术-类微信界面设计

1.传统微信界面

上方一个标题栏，中间一个内容栏，下方4个Tab页面，便是一般的app界面了。

2.项目需求

根据课堂展示结果设计APP门户界面，包含4个tab切换效果。

3.项目思路

在安卓studio中建立一个新的项目后，我们可以看到在项目中存在两个不一样的未经修改的原文件 activity_main.xml 和 MainActivity。
1.
(1)点开res下的layout鼠标右键，接着new一个新的XML选择layout xml file建立新的XML文件，这里总共要建立7个XML文件。
首先，在截图5中可以看到top.xml文件，它主要是设置我们看到在截图一中上方有MyWechat这个黑色框中，对Linearlayout和TextView修改从而改变视觉效果。

(2)第二个就是本次设计最重要的部分，我们可以看到在图一的图片下方有四个tab，微信、朋友、通讯录、设置。bottom.xml文件，这里面的配置比较复杂，注意的点比较多，尤其在xml文件的design这个界面的orientation设置，以及注意weight、height、width的设置（在这里强调xml界面，可以code和design切换看自己的设置是否出错），具体的代码设置在我的gitee里可以看。

(3)继续根据bottom.xml文件进行设