单纯学习理论和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代码部分
网友评论