要求：根据课堂展示结果设计APP门户界面，包含四个Tab切换效果。

最实验结果：

要点难点：切换四个Tab
实验思路：首先构思布局整个页面，实现视图层，再考虑实现逻辑层。
实验步骤：

1 将整个页面划分为三个部分：顶部top，底部bottom、中间content

首先是布局，将页面划分为三个部分。
划分思路：
根据想要达到的切换效果，显然顶部是静态的，只需要布局就可以实现了。底部和中间有一层逻辑，也就是底部点击相应的按钮，就要切换成相应的界面。那么中间content部分就得达到一个切换页面的效果，而且里面得有四个xml对应相关的页面，所以可以考虑使用FragmentTransaction这个类。而底部按钮则需要达到点击一个切换为点亮图片，而其他图片变灰，并且切换到相应的页面，这里显然得监听四个按钮，然后对监听的四个按钮绑定触发事件。

2 完成页面布局

2.1 顶部页面效果

2.2 底部页面效果

2.3 内容页面效果

2.4 将顶部、底部、内容三个模块组成一个页面

至此，页面的视图层完成

3 完成页面切换效果

完成的页面的视图层，就要开始完成逻辑层。对于页面切换，就是监听图片按钮，触发事件。

3.1 切换页面

切换页面可以使用FragmentTransaction,并且在initFragment()函数中使用add()方法将四个切换页面添加到FrameLayout中，然后通过show()就可以展示对应的页面，而hide()可以隐藏相应的页面。所以这里可以想到，在show之前调用hide隐藏所有被add的页面，就可以达到切换页面的效果。

3.2 绑定事件

实现View.OnClickListener接口，implements View.OnClickListener，然后调用实现的方法initEvent()，再对相应的组件使用setOnClickListener()方法进行监听点击事件。

3.3 定义事件

对组件绑定好事件后，就得定义触发后会执行的事件onClick(View v)。这里想达到点击后切换页面，点击图标变亮，并且其他图标变灰的效果。
大致思路为：点击后，会从v传入对应的组件，先获取组件的id，知道是哪个按钮，然后将所有图片变灰，再判断传入的id，切换到这个按钮对应的页面，并将这个页面的按钮变亮。

至此，逻辑层也完成，实验完成。

4 源代码仓库地址以及实验结果

仓库地址：https://gitee.com/hu_hong_tao/android-development-experiment