之前模仿Youtube大神做Instagram实战项目,已经更新了两篇。这一篇主要是记录下如何做Profile页面,也就是自己的主页部分。
一:布局方面实现
1. activity_profile.xml主页布局
主布局为CoordinatorLayout,主页面代码中不放入任何关于页面要展示的控件,而是通过include元素调用从而减低耦合度。
<include layout="@layout/layout_center_profile_viewpager" /> 页面的Top部分和Middle部分写在了layout_center_profile_viewpager中。
<include layout="@layout/layout_bottom_navigation_view" /> 页面的BottomNavgaitonBar,在之前的文章已经放出了代码,直接调用就可以了。
2. layout_center_profile_viewpager.xml布局:
Top部分通过include元素调用一个ToolBar的xml布局
Middle部分分为三个部分:
1. 头像图片:CircleImageView组件
通过include元素调用一个显示用户粉丝数量,关注用户等信息的xml布局:<include layout="@layout/layout_snippet_top_profile" />
2. 由LinearLayout和orientation='vertical'的布局和三个TextView组成的用来显示用户基本信息描述的部分
3. 最后一个部分是用GridView来显示用户上传过得instagram图片。
Bottom部分依旧调用写好的BottomNavigationView即可
下图是整体的布局的效果:
3. layout_snippet_top_profilebar.xml布局:
上图中的“赵四”部分是由toolbar控件完成的
android:background="@drawable/white_grey_border_bottom"是我们在之前写好的actionbar的border样式。
4. layout_snippet_top_profile.xml布局:
上述代码主布局用了ConstraintLayout,为每个TextView设置了边框的constraint,这样在使用不同尺寸屏幕时能够达到很好的比例效果。