单纯学习理论和layout等功能时也是非常枯燥的，所以为了能够提高兴趣和在实战中学习，所以找了一个大神模仿Instagram的项目用来让自己学习和上手，顺便记录下，希望能够帮助到大家

第一天构建页面基本布局

一.    添加依赖和去除ActionBar

        -    build.gradle中添加design依赖

        -    为了实现Tabs功能，将style中改为NoActionBar

二.    activity_home.xml作为HomeActivity.java的代码的布局

            -    将top-level的viewgroup设置为CoordinatorLayout, 可以实现material.design的滚动效果    

                -    在top-level的CoordinatorLayout中添加RelativeLayout

                    -    再在其中添加三个RelativeLayout作为Top，Middle和Bottom的viewGroup布局

                        Top:    实现Tabs功能(会利用AppBarLayout和TabLayout)

                        Middle:    实现Fragment功能(利用ViewPager)

                        Bottom:    实现bottomNavigationView功能(利用bottomNavigationViewEx源自于别人封装的包)

activity_home.xml

三：新建Top，Middle和Bottom页面的布局

    1.    添加Top布局，新建layout_top_tabs.xml 

layout_top_tabs.xml代码

                -    <merge xmlns:android="...">    定义namespace为android

                -    RelativeLayout下加入AppBarLayout和TabLayout实现Tabs功能

                -    android:background是给bottomNavigationView设置的背景样式

    2.    添加Middle布局，新建layout_middle_viewPager.xml

layout_middle_viewPager.xml代码

                -    <merge xmlns:android="...">    定义namespace为android

                -    RelativeLayout下加入ViewPager实现切换Fragment功能

    3.    添加Bottom布局，新建layout_bottom_navigation_view.xml

layout_bottom_navigation_view.xml代码

                -    <merge xmlns:android="...">    定义namespace为android

                -    RelativeLayout下加入BottomNavigationViewEx，此包来自大神制作，提供了多种跳转动画的方式，所以在后续的代码中也要初始化当跳转menu时用哪一种动画方式

    利用merge和include标签降低代码耦合度，并与activity_home.xml相关联

    4.    在activity_home.xml中通过include将layout_top_tabs.xml, layout_middle_viewPager, layout_bottom_navigation_view.xml添加到activity_home.xml

四：为BottomNavigationView添加相应的menu Item

        -   实战项目中添加了五个item

            -    分别为home，search，add，like,    settings，所以后续的Activity也要添加五个

bottom_navigation_menu.xml代码

            -    添加响应id，图标和title

                另外补充下之前没有介绍过得android:id="@+id/id_name语句含义，@表示解析器应解析@后面的的字符，+id表示新添id

五：为menu后面中的Home item添加三个Fragment：home, camera和message

fragment_home.xml代码

        -    RelativeLayout中添加一个TextView，显示切换后的效果

所有大体布局部分已经完成，下一篇中会添加Java代码部分