仿写“同行说”之界面分析篇

仿写优秀的APP是初学者一条非常不错的学习途径，即培养了审美，又增强了手感。那么，既然是要仿写，业务逻辑上的东西就不需要我们过于费心了，可以直接从界面布局入手。废话不多说，直接上图。

“同行说”的主要界面并不复杂，如上图中的六张截图所示。这里我们简单的说明一下。第一张是该应用的引导页面，在启动APP时出现；第二张是APP的主界面；第三张是主界面的左边栏，在点击头像或者向右滑动时出现；第四和第五张，是在主界面点击“加班夜话”后进入的界面，两者的不同在于我们进行上下滑动时，顶部的布局会发生变化；第六张则是点击主界面listview的item后进入的详情界面。整个"同行说"APP的UI设计是非常彻底的Material Design风格，下面我们依次分析实现上述页面所需要的各种控件。

1.引导页面

对于引导页面的实现，最简单的方法就是新建一个GuideActivity（背景设置为自己想要的图片）并将其设为APP入口（通过在Manifest文件配置），同时在GuideActivity中利用handler的postDelayed（）方法，延迟进入APP的主界面已达到引导页的效果，我们在接下来的实现阶段也会使用这种最简单的方式。当然，如果你对于引导页要求比较高，可以在Github上搜索GuideView,Splash等关键字，项目多多，必有一款适合你。

2.主界面

接下来我们分析一下主界面的UI。首先，在最上方是一个ToolBar。在ToolBar下方是一个Pull-To-Refresh listview或者recyclerview（我们的实现将会使用github上的Ultra-Pull-To-Refresh项目）。在listview内部，我们还需要设置headview以实现“加班夜话”的布局，同时我们可以使用cardview来配合listview实现其内部item的布局。最后，就是右下角的button，对应于Material Design中FAB（Floating Action Button）。

3.侧边栏

类似这种侧边栏的实现，也有很多种方式。我们既可以自定义控件，通过继承HorizontalScrollView来实现（但这种方式需要处理可能会遇到各种滑动冲突，后面的博客会加以说明）。当然，我们也可以直接使用DrawerLayout或者Material Navigation Drawer等。在我们后面的实现过程中会使用Navigation Drawer，毕竟这是Material Design推荐的嘛~

4.加班夜话

可以看到“加班夜话“页面的布局跟主页面并没有太大差别，唯一比较有意思的就是图4和图5所示的，在对listview进行上下拖拽时，顶部的ToolBar或者说header会自动的收缩或者拓展，这需要我们借助CoordinatorLayout来实现这种Scroll Animations。

5.详情界面

详情界面的整体布局较为简单，内容区域由一个webview覆盖，在底部则是一个回复区包含了几个基本控件，如edittext，imageview等。

在下一篇博客中，我们将会介绍需要用到的几个Material Design中的核心控件，详细阐述他们的用法及注意事项。今天就先这样吧，睡~