商城首页的编写，思路，首先我们需要需要Activity去展示，现在流行的底部导航，也就是说，我们需要ViewPager+Fragment+BottomNavigationView组合设计界面UI，那么，我们一起来看看。
一基本概念
ViewPager :
1、什么是ViewPager
可以从Api看出ViewPager是Google自带的翻页控件，存放在V4兼容包中，继承于ViewGroup，官方推荐和Fragment一块使用。
2、Viewpager有什么作用
ViewPager可以实现与fragemt联动，简单说，就是可以做引导页面或者轮播图。而且ViewPager也有adapter适配器，类似ListView一样需要我们去配置
具体的有关ViewPager介绍请戳这里
https://www.jianshu.com/p/f36b2355d82e
api请戳这里
https://developer.android.com/reference/android/support/v4/view/ViewPager
BottomNavigationView
1、什么是BottomNavigationView
BottomNavigationView 存在于 design 包中，且继承于FrameLayout。
是谷歌推出的新一代导航栏，具体详细说明请戳这里
https://www.jianshu.com/p/854c458d2f0b
好了，fragment 大家都很熟悉了，就不赘述了
下面直接上代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite"
android:orientation="vertical"
tools:context=".Activity.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/bottom_navigation_above_color" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemTextColor="@color/selector_nav_text_color"
app:menu="@menu/menu_navigation_bottom" />
这个XML界面还是挺简单的
没啥好说的，重点是我们怎么配置底部导航栏。关键代码在app:menu="@menu/menu_navigation_bottom"
这个是需要我们在res文件下新建menu文件夹，如图所示：
可以看到在menu菜单下有资源文件，正是我们需要编写的菜单文件：
可以看到，每个Item就是一个菜单，之后我们通过
- app:menu="@menu/menu_navigation_bottom"
添加，就可以了.
附上actiivity代码：
private void mNavigationViewListener() {
mNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
boolean bSelected = false;
switch (menuItem.getItemId()) {
case R.id.bottom_nav_home:
mViewPager.setCurrentItem(0);
bSelected = true;
break;
case R.id.bottom_nav_mall:
mViewPager.setCurrentItem(1);
bSelected = true;
break;
case R.id.bottom_nav_financial:
mViewPager.setCurrentItem(2);
bSelected = true;
break;
case R.id.bottom_nav_housekeeper:
mViewPager.setCurrentItem(3);
bSelected = true;
break;
case R.id.bottom_nav_mine:
mViewPager.setCurrentItem(4);
bSelected = true;
break;
default:
break;
}
return bSelected;
}
});
}
private void mViewPagerListener() {
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
if (mMenuItem != null) {
mMenuItem.setChecked(false);
} else {
mNavigationView.getMenu().getItem(0).setChecked(false);
}
mMenuItem = mNavigationView.getMenu().getItem(i);
mMenuItem.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
setupViewPager(mViewPager);
}
private void setupViewPager(ViewPager viewPager) {
NavigationViewPagerAdapter adapter = new NavigationViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(NewHomeFragment.newInstance());
adapter.addFragment(MallFragment.newInstance());
adapter.addFragment(FinancialFragment.newInstance());
adapter.addFragment(HouseKeeperFragment.newInstance());
adapter.addFragment(NewMineFragment.newInstance());
viewPager.setAdapter(adapter);
}
一共三个方法，第一个方法是对 BottomNavigationView
进行监听，控制ViewPager滑动到相应的页面，第二个方法是对 ViewPager
进行监听依据滑动方向设置 BottomNavigationView 相应的菜单状态，第三个方法是为 ViewPager设置适配器，然后将Fragment依次添加到ViewPager里面。
简单吧，下一章，我们将分析每个Fragment需要实现的效果。
感谢大家的阅读！
