仿知乎日报第三篇：MainActivity的布局分析

一：结构



二.

1.上一篇说到ImageView组件动画完成后就跳转到MainActivity，MainActivity比起上一篇中的SplashActivity要复杂一点，首先我们先看一下最终效果，然后再一步步分析以上的结构



这是个滑动菜单，平时就显示内容区域，手指往右滑的时候就可以显示菜单区了。这个效果我们就不用自己实现了，可以使用SlidingMenu开源库，关于导入库的方法，仿知乎日报第一篇这篇文章中已经讲到了。

2.菜单区域和内容区域分别是MainActivity中的两个Fragment。为了避免大家看不清楚，我盖住了所有的布局，变成了两张蓝色，绿色背景的纸。先确定结构，具体的内容后面再慢慢添上去。



3.现在菜单区，内容区什么都没有，Fragment中有一个回调方法onCreateView(),这里可以分别在菜单区，内容区加载布局



4.菜单区的Fragment布局的很简单，整个是一个垂直的LinearLayout，然后上面是LinearLayout，下面是ListView。这个布局在Fragment的onCreateView()中加载出来就可以显示下面的效果了。



5.内容区也很简单，整个就是一个ViewPager。ViewPager的一页页内容就是首页，日常心理学，用户推荐日报，不许无聊，设计日报等13个页面。看起来很多，但是除了首页布局稍有不同，其他12页面布局都相同，所有实现起来也非常容易。然后通过ViewPager适配器的instantiateItem()方法将一个个布局显示出来。

下面简单分析下首页和另外12页面的代表设计日报：

1）首页



2）设计日报



3）看起来首页和其他12个页面中间两个部分不一样，但是其实可以写在同一个布局里面。简单来说，就是不同的部分，比如首页的第二部分ViewPager和设计日报的第二部分ImageView都放在FrameLayout，这个ViewPager和ImageView重叠在第二部分，只要显示的时候一个显示一个隐藏就可以了。比如在首页，ViewPager设置显示，ImageView隐藏。在设计页面，ImageView显示，ViewPager隐藏。