2018-09-30 关于商城页面的编写

商城首页的编写，思路，首先我们需要需要Activity去展示，现在流行的底部导航，也就是说，我们需要ViewPager+Fragment+BottomNavigationView组合设计界面UI，那么，我们一起来看看。
一基本概念
ViewPager :
1、什么是ViewPager

TIM截图20180930201616.png

可以从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

TIM截图20180930203455.png

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文件夹，如图所示：

TIM截图20181001094629.png

可以看到在menu菜单下有资源文件，正是我们需要编写的菜单文件：

TIM截图20181001094848.png

可以看到，每个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需要实现的效果。

感谢大家的阅读！