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

Android开发之仿写dialog 仿写app界面难吗_Android开发之仿写dialog

“同行说”的主要界面并不复杂,如上图中的六张截图所示。这里我们简单的说明一下。第一张是该应用的引导页面,在启动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等。