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

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

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文件进行设置，可以看到图五的layout下有tab01、tab02、tab03、tab04，这四个文件，就是在bottom.xml文件的linearlayout下进行参数的修改，以及它们自身的参数修改。我们可以看到在图一到图四白色界面中都有一句话，就需要在tab.xml文件自身配置修改。

(4)最后一个就是activity_main.xml文件，需要在它的linearlayout下增添一个f’ramelayout，这里f’ramelayout是一个简单的布局，用来显示每次我选择一个就会是一个新的界面和新的内容。

2

(1)

除了MainActivity之外，每一个Fragment文件都对应一个tab

weixinFragment、frdFragment、contactFragment、settingsFragment，这四个文件都基本上不需要自己敲代码，直接new一个后里面就存在一些函数、参数（鼠标右键点击com.example.mywechat后new一个Fragment文件，记住是blank）参数里修改是如图：

找对应的tab进行修改。

(2)

这里最重要的就是MainActivity文件的代码编写，是本次项目代码的核心

我们之前建立了7个xml文件，如何将这7个xml运行起来，将这个完整的界面展示出来？如何让这四个tab有顺序有效的执行，都需要主代码来控制。

具体的函数用法和分析我在第四部分解释。

4.分析

要有逻辑控制思路

(1)我们看代码可以知道，LinearLayout、ImageButton、Fragment三个私有的类型以及后面所带的变量名都是私有，接着又声明了五个私有函数（当然在编写代码的时候是不可能直接就知道我要什么变量或者什么函数，函数的类型又是怎样，以及参数的配置都是不可能在编写前知道的，而是从开始写慢慢发现自己需要什么函数、需要什么参数、类型如何等等，在这里我直接我直接解释函数作用吧）

initFragment：代码中是固定语句，

transaction.add(R.id.id_content,mTab01);中的transaction是起到通讯，就是添加这四个fragment到content中。

initView：我们自己定义的一个函数，包含了我们之前定义的每个linearlayout，找到所有响应的控件。

setSelect：此函数是来控制它的变换，指的是每次点击不同的按钮，显示不同的界面。用switch case语句，i的值不同，就是不同的tab，在图中画红框的地方是这次函数的核心，第一个是fragment再一个的控制，红框的下方有个hideFragment也是自己写的函数，用来隐藏图标，就是你不点击的时候，不变色。第二个红框是显示函数，显示tab。

hideFragment：此函数就是根据setSelect函数，起到隐藏的功能（图标隐藏）

initEvent：点击监听函数，就是对于你每次的点击，函数会调用，产生相应的反应。

(2)新的函数是getId，就表示我能获得控件的Id，视图对象调用Id。我们可以看我们调用的具体是哪个Id。

5.结果展示

微信界面

朋友界面

通讯录界面

设置界面

6.源码链接

gitee链接: https://gitee.com/yzq2236516175/as_-program.