Instagram项目profile页面实战(三)

之前模仿Youtube大神做Instagram实战项目，已经更新了两篇。这一篇主要是记录下如何做Profile页面，也就是自己的主页部分。

一：布局方面实现

    1.    activity_profile.xml主页布局

            主布局为CoordinatorLayout，主页面代码中不放入任何关于页面要展示的控件，而是通过include元素调用从而减低耦合度。

            

activity_profile.xml代码

            <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布局

layout_center_profile_viewpager.xml的Top部分代码

           Middle部分分为三个部分：

                1.    头像图片：CircleImageView组件

                        通过include元素调用一个显示用户粉丝数量，关注用户等信息的xml布局：<include layout="@layout/layout_snippet_top_profile" />

                2.    由LinearLayout和orientation='vertical'的布局和三个TextView组成的用来显示用户基本信息描述的部分

                    

用户信息描述部分代码

                3.    最后一个部分是用GridView来显示用户上传过得instagram图片。

GridView部分显示用户已上传的图片

              Bottom部分依旧调用写好的BottomNavigationView即可

        下图是整体的布局的效果：

        

布局效果

       3.    layout_snippet_top_profilebar.xml布局：

              上图中的“赵四”部分是由toolbar控件完成的

                

layout_snippet_top_profilebar.xml代码

                        android:background="@drawable/white_grey_border_bottom"是我们在之前写好的actionbar的border样式。

        4. layout_snippet_top_profile.xml布局：

            

layout_snippet_top_profile.xml第一部分

            

            

layout_snippet_top_profile.xml第二部分 layout_snippet_top_profile.xml第三部分

    上述代码主布局用了ConstraintLayout，为每个TextView设置了边框的constraint，这样在使用不同尺寸屏幕时能够达到很好的比例效果。