第一次Android Studio作业——界面框架的搭建

项目最终功能

Android Studio的本学期作业是要做一个模仿类似微信界面的Android app，第一次作业的要求是搭建出一个app界面框架，这个框架有四个界面。我的初始构想是一个类似游戏商店的app,如下：

这个app将会包含四个界面：发现、商城、讨论、我的。
发现：用户在此界面可以看见游戏推送。
商城：用户在此可以购买一些付费游戏，以及相关游戏实物纪念品等。
讨论：用户在这个可以融入相关游戏圈子，营造社区氛围。
我的：用户在此界面查看个人信息以及对app进行个性化设置。
第一次作业完成四个界面的大致框架，点击底部图标可以实现界面切换。

项目结构

建议大致的编写顺序：

• 顶部、底部布局；
• tab01~tab04四个fragment布局；
• activity_main布局；
• 四个fragment对象化java文件；
• MainActivity.java文件；
  相关文件作用及部分代码解释均在Github源代码注释中
  
  

详细步骤

1.准备图标资源文件
图标是从iconfont下载的png格式：

然后放到了项目目录的 /res/drawable文件夹下。
2.编写界面顶部布局文件 top.xml
这个部分比较简单，只用一个TextView即可，但需要耐心调一下样式
3.编写界面底部布局文件 bottom.xml
这个文件相对来说有些复杂，需要用四个子 LinearLayout，每个子 LinearLayout 里面包裹一个 ImageButton 和 TextView 。需要注意调整样式、各标签id、正确引用 /res/drawable下的图标，这些地方可能会马虎出错。
4.编写四个中间内容内容文件 tab01.xml, tab02.xml, tab03.xml, tab04.xml
这几个页面暂时都只放一个简单的TextView即可，比较简单
5.编写主布局文件 activity_main.xml
这个部分也比较简单，只要放置好顶部、底部、内容布局文件顺序即可
6.编写四个 xxxFragment.java 文件
这四个java文件将对应的 fragment (tab) 对象化，这样在 MainActivity.java 中就可以通过调用对象的形式来调用相应布局
7.编写 MainActivity.java 文件
要实现对图标按钮 (准确的说是包裹图标和文字的LinearLayout) 的监听，就要使该 MainActivity类 实现 OnClickListener 。
同时切换页面使用FragmentTransaction,并且在initFragment()函数中使用add()方法将四个切换页面添加到FrameLayout中，然后通过show()就可以展示对应的页面，而hide()可以隐藏相应的页面。
同时，要注意界面初始是选中一个界面的，然后在用户点击一个被监听的 LinearLayout 后，所有图标初始化颜色 (黄色)，然后隐藏所有 tab ，然后被选中的 LinearLayout 下的 ImageButton 的图片变为选中颜色 (绿色)，且对应的tab会展示出来，这些都是瞬间完成的，这就实现了页面的切换与图标的颜色恢复。

可能遇到的问题

1.java文件的导包

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.widget.ImageButton;
import android.widget.LinearLayout;

由于Android版本更新较多，开发时自导包可能会出现相互矛盾而报错，这里是我的MainActivity.java的导包（可用），自导包主要问题可能会出在Fragment、FragmentManager、FragmentTransaction的版本上。


2.图标大小
发现xml中 android: 好像没有提供可以调整图标大小的属性（目前还没学到和搜索到），于是就对从图标库下载的图标进行了编辑一一进行长宽等比例缩小，最终找到合适的适应比例。

最终gif效果图

作业源码

Github:
https://github.com/Tanqsh/AS_firstHomework.git