Day4 基于DrawerLayout的菜单栏设计

关于DrawerLayout的使用本篇不再赘述，因为使用起来很是简单，如果你确实没有用过不知道如何下手，那么可以看这几篇：
- DrawerLayout快速实现

• DrawerLayout配合主页面的滑动和缩放
  

• DrawerLayout不同的遮盖效果
  
  

而今天我们主要进行“爱阅”中侧边栏的实现方式，在开始之前看一下“爱阅”的实现效果：

点此进入目录：[干货] 十天 教你从创意到上线APP

1、主布局文件编写

首先我们找到MainActivity的布局文件，然后在布局文件中添加如下内容：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <ImageView
                    android:id="@+id/more_main"
                    android:layout_width="37dp"
                    android:layout_height="37dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="5dp"
                    android:padding="6dp"
                    android:src="@drawable/ic_more"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/search_main"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:paddingLeft="7dp"
                    android:paddingRight="7dp"
                    android:paddingTop="17dp"
                    android:paddingBottom="17dp"
                    android:src="@drawable/ic_search"
                    android:visibility="visible" />
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout_main"
                style="@style/MyCustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="center"
                app:tabMode="scrollable" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fadingEdge="none"
            android:overScrollMode="never"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right" />
</android.support.v4.widget.DrawerLayout>

在CoordinatorLayout下方我们可以看到两个NavigationView的身影，这就对应着我们左右的两个侧边栏。其中的 android:layout_gravity 属性用于指定菜单栏的布局发方向。我们在这里指定第一个为左侧的主菜单，第二个为右侧的副菜单。这时我们就能够在主界面划出左右两侧的菜单栏了，接下来我们来为两个菜单做个性化定制。

2、个性化设置侧边栏

我们这里采用的方式是动态加载的方式，加载方式如下所示：

    private void initView() {
        // init Left Drawer
        DLog.i("init Left Drawer");
        Category leftCategory = DataCacheHelper.getInstance().getLeftCategory();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_left,
                navigationLeftFragment = (NavigationLeftFragment) new NavigationLeftFragment()
                        .newInstance(this, leftCategory, getSupportFragmentManager())).commit();
        // init Right Drawer
        DLog.i("init Right Drawer");
        Category rightCategory = DataCacheHelper.getInstance().getRightCategory();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_right,
                navigationRightFragment = (NavigationRightFragment) new NavigationRightFragment()
                        .newInstance(this, rightCategory)).commit();
    }

可以看到，我们在初始化侧边栏的时候采用了相同的替换方法，首先new出了一个Fragment，然后调用getSupportFragmentManager().beginTransaction().replace()把刚才在主页定义的布局文件替换掉，所以我们需要提前准备两侧的Fragment，如下所示：

• NavigationLeftFragment

/**
 * Created by   : WGH.
 */
    public class NavigationLeftFragment extends Fragment {
        private static final String EXTRA_CATEGORY = "extra_drawerLeft_category";

        Unbinder unbinder;
        @BindView(R.id.icon_image)
        CircleImageView iconImage;
        @BindView(R.id.authorname)
        TextView authorname;
        @BindView(R.id.email)
        TextView email;
        @BindView(R.id.text_collection)
        TextView textCollection;
        @BindView(R.id.text_subscription)
        TextView textSubscription;
        @BindView(R.id.text_setting)
        TextView textSetting;
        @BindView(R.id.text_about)
        TextView textAbout;
        @BindView(R.id.button_pay)
        TextView buttonPay;
        @BindView(R.id.recycler_view_subscription)
        RecyclerView recyclerViewSubscription;
        @BindView(R.id.imageView_subscription)
        ImageView imageViewSubscription;
        @BindView(R.id.imageView_setting)
        ImageView imageViewSetting;
        @BindView(R.id.button_theme)
        TextView buttonTheme;
        @BindView(R.id.layout_setting)
        LinearLayout layoutSetting;
        @BindView(R.id.layout_about)
        LinearLayout layoutAbout;

        private static Context mContext;
        private static FragmentManager mFragmentManager;
        @BindView(R.id.layout_collection)
        LinearLayout layoutCollection;

        private Category mCategory;
        private boolean flagRecyclerVisible = true;
        private boolean flagSettingVisible = true;


        public NavigationLeftFragment() {
        }

        public static Fragment newInstance(Context context, Category category, FragmentManager supportFragmentManager) {
            mContext = context;
            mFragmentManager = supportFragmentManager;
            Bundle bundle = new Bundle();
            bundle.putSerializable(EXTRA_CATEGORY, category);
            return Fragment.instantiate(context, NavigationLeftFragment.class.getName(), bundle);
        }

        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mCategory = (Category) getArguments().getSerializable(EXTRA_CATEGORY);
        }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup viewGroup, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_navigation_left, viewGroup, false);
            unbinder = ButterKnife.bind(this, view);

            iconImage.setImageResource(DataCacheHelper.getInstance().getThemeIconId());

            final RecyclerSubscriptionAdapter subscriptionAdapter = new RecyclerSubscriptionAdapter(mContext, mCategory);
            recyclerViewSubscription.setAdapter(subscriptionAdapter);
            recyclerViewSubscription.setLayoutManager(new GridLayoutManager(mContext, PreDefine.SubscriptionRecyclerViewColumnNum));

            subscriptionAdapter.setOnItemClickListener(new RecyclerSubscriptionAdapter.OnItemClickListener() {
                @Override
                public void onItemClick(View view, String nextName) {
                    String rightCategoryKey = mCategory.getName() + nextName;
                    if (PreDefine.getRightDrawerCategoryKey() == null || !PreDefine.getRightDrawerCategoryKey().equals(rightCategoryKey)) {
                        PreDefine.setRightDrawerCategoryKey(rightCategoryKey);
                        MessageUtil.postRightCategoryChangeMsg(rightCategoryKey);
                    }
                }
            });

            return view;
        }

        @Override
        public void onDestroyView() {
            super.onDestroyView();
            unbinder.unbind();
        }

        @OnClick({R.id.icon_image, R.id.authorname, R.id.email, R.id.layout_collection, R.id.button_pay, R.id.imageView_subscription, R.id.imageView_setting, R.id.button_theme, R.id.layout_about})
        public void onViewClicked(View view) {
            switch (view.getId()) {
                case R.id.layout_collection:
                    IntentUtil.openFavorite(mContext);
                    break;
                case R.id.imageView_subscription:
                    if (flagRecyclerVisible) {
                        recyclerViewSubscription.setVisibility(View.VISIBLE);
                        flagRecyclerVisible = false;
                        AnimationUtil.rotateSelf(imageViewSubscription, 180, 0);
                    } else {
                        recyclerViewSubscription.setVisibility(View.GONE);
                        flagRecyclerVisible = true;
                        AnimationUtil.rotateSelf(imageViewSubscription, 0, 180);
                    }
                    break;
                case R.id.imageView_setting:
                    if (flagSettingVisible) {
                        layoutSetting.setVisibility(View.VISIBLE);
                        flagSettingVisible = false;
                        AnimationUtil.rotateSelf(imageViewSetting, 180, 0);
                    } else {
                        layoutSetting.setVisibility(View.GONE);
                        flagSettingVisible = true;
                        AnimationUtil.rotateSelf(imageViewSetting, 0, 180);
                    }
                    break;
                case R.id.button_theme:
                    ThemeDialog dialog = new ThemeDialog();
                    dialog.show(mFragmentManager, "theme");
                    break;
                case R.id.icon_image:
                    break;
                case R.id.authorname:
                case R.id.email:
                case R.id.layout_about:
                    IntentUtil.openAbout(mContext);
                    break;
                case R.id.button_pay:
                    break;
                default:
                    break;
            }
        }
    }

可以看到的是，我们这里用依赖注入框架buffernife对布局文件中的各个控件进行绑定,然后对各个控件进行操作即可，比如：设置适配器、设置点击监听等。下面我们给出相应的布局文件：
- fragment_navigation_left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="?attr/colorPrimary"
        android:padding="10dp">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/icon_image"
            android:layout_width="88dp"
            android:layout_height="88dp"
            android:layout_centerInParent="true"
            android:src="@drawable/head_love" />

        <TextView
            android:id="@+id/authorname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/email"
            android:text="@string/navigation_left_username"
            android:textColor="?attr/colorPrimaryLight"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="@string/navigation_left_mail"
            android:textColor="?attr/colorPrimaryLight"
            android:textSize="13sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_collection"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="10dp"
            android:src="@drawable/ic_stars_black_48dp" />

        <TextView
            android:id="@+id/text_collection"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="@string/navigation_left_collection"
            android:textSize="20sp" />
    </LinearLayout>


    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/blue_grey_primary_light" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="10dp"
            android:src="@drawable/ic_loyalty_black_48dp" />

        <TextView
            android:id="@+id/text_subscription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"
            android:layout_toEndOf="@+id/imageView2"
            android:text="@string/navigation_left_subscription"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/imageView_subscription"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="15dp"
            android:src="@drawable/ic_keyboard_arrow_down" />
    </RelativeLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_subscription"
        android:layout_width="wrap_content"
        android:layout_height="135dp"
        android:fadingEdge="none"
        android:overScrollMode="never"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:visibility="gone" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/blue_grey_primary_light" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="10dp"
            android:src="@drawable/ic_settings_black_48dp" />

        <TextView
            android:id="@+id/text_setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"
            android:layout_toEndOf="@+id/imageView"
            android:text="@string/navigation_left_settings"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/imageView_setting"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="15dp"
            android:src="@drawable/ic_keyboard_arrow_down" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_setting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:visibility="gone"
        android:weightSum="2">

        <TextView
            android:id="@+id/button_theme"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_margin="3dp"
            android:layout_weight="1"
            android:background="?attr/colorPrimaryDark"
            android:gravity="center"
            android:text="@string/navigation_left_theme"
            android:textColor="?attr/colorPrimaryLight"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/button_pay"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_margin="3dp"
            android:background="?attr/colorPrimaryDark"
            android:gravity="center"
            android:text="@string/navigation_left_pay"
            android:textColor="?attr/colorPrimaryLight"
            android:textSize="18sp" />
    </LinearLayout>


    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/blue_grey_primary_light" />

    <LinearLayout
        android:id="@+id/layout_about"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:padding="10dp"
            android:src="@drawable/ic_face_black_48dp" />

        <TextView
            android:id="@+id/text_about"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="@string/navigation_left_about"
            android:textSize="20sp" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/blue_grey_primary_light" />
</LinearLayout>

对于右侧的Fragment也是同样如此，只不过右侧的布局文件中我们引入了一个自定义的布局控件 ChannelView。这使得我们可以在该侧边栏内实现点击、拖拽以及长按进入编辑模式的功能。下面给出右侧的Fragment以及对应的布局文件：
- NavigationRightFragment

/**
 * Created by   : WGH.
 */
    public class NavigationRightFragment extends Fragment {
        private static final String TAG = NavigationRightFragment.class.getSimpleName();
        private static final String EXTRA_CATEGORY = "extra_drawerRight_category";

        Unbinder unbinder;
        @BindView(R.id.head_navigation_right)
        TextView textNavigationRight;
        @BindView(R.id.layout_navigation_right)
        LinearLayout layoutNavigationRight;
        @BindView(R.id.channel_view)
        ChannelView channelView;


        private static Context mContext;
        private Category mCategory;
        private ArrayList<Category> mDragCategories = new ArrayList<>();
        private ArrayList<Category> mBelowCategories = new ArrayList<>();

        public NavigationRightFragment() {
        }

        public static Fragment newInstance(Context context, Category category) {
            mContext = context;
            Bundle bundle = new Bundle();
            bundle.putSerializable(EXTRA_CATEGORY, category);
            return Fragment.instantiate(context, NavigationRightFragment.class.getName(), bundle);
        }

        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mCategory = (Category) getArguments().getSerializable(EXTRA_CATEGORY);
            mDragCategories = DataCacheHelper.getInstance().getRightDragCategoryList();
            mBelowCategories= DataCacheHelper.getInstance().getRightBelowCategoryList();
        }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup viewGroup, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_navigation_right, viewGroup, false);
            unbinder = ButterKnife.bind(this, view);

            channelView.initData(mDragCategories, mBelowCategories);
            channelView.setOnChannelViewActionListener(new OnChannelViewActionListener() {

                @Override
                public void onEditMode(boolean isEditMode) {
                    DLog.i(TAG, "onEditMode : " + isEditMode);
                }

                @Override
                public void onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                    DLog.i(TAG, "onItemLongClick" + " parentId : " + parent.getId() + ", view : " + view + ", position : " + position + ", id : " + id);
                }

                @Override
                public void onItemDragPosition(int startPosition, int endPosition) {
                    DLog.i(TAG, "startPosition : " + startPosition + "  endPosition : " + endPosition);
                }

                @Override
                public void onItemDragFinish() {
                    DLog.i(TAG, "onItemDragFinish!");
                    saveData();
                }

                @Override
                public void onDragItemClick(int position) {
                    Category pagerCategory  = mDragCategories.get(position);
                    String pagerCategoryKey = DataCacheHelper.getInstance().getCategoryKey(pagerCategory);
                    if (PreDefine.getViewPagerKey() == null || !PreDefine.getViewPagerKey().equals(pagerCategoryKey)) {
                        PreDefine.setViewPagerKey(pagerCategoryKey);
                        MessageUtil.postPagerCategoryChangeMsg(pagerCategoryKey);
                    }
                }

                @Override
                public void onBelowItemClick(int position) {
                    DLog.i(TAG, "onBelowItemClick : " + position);
                }

                @Override
                public void onDragItemEditClick(int position) {
                    DLog.i(TAG, "onDragItemEditClick : " + position);
                    saveData();
                }

                @Override
                public void onBelowItemEditClick(int position) {
                    DLog.i(TAG, "onBelowItemEditClick : " + position);
                    saveData();
                }
            });
            return view;
        }

        private void saveData() {
            DataCacheHelper.getInstance().saveRightChildCategoryList(
                    channelView.getDragViewCategoryList(), channelView.getBelowViewCategoryList());
        }

        public void onBackPress() {
            channelView.setEditMode(false);
        }

        @Override
        public void onDestroyView() {
            super.onDestroyView();
            unbinder.unbind();
        }

        @Override
        public void onDestroy() {
            super.onDestroy();
        }
    }

• fragment_navigation_right.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_navigation_right"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/head_navigation_right"
        android:layout_width="match_parent"
        android:layout_height="168dp"
        android:background="?attr/colorPrimaryDark"
        android:elevation="10dp"
        android:fontFamily="sans-serif"
        android:gravity="center"
        android:textAppearance="?android:textAppearanceLarge"
        android:textColor="?attr/colorPrimaryLight"
        android:textSize="37dp"
        android:textStyle="bold|italic"
        android:visibility="visible" />

    <com.wgh.willflowaicollection.ui.view.ChannelView
        android:id="@+id/channel_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

到此为止，我们的左右两侧菜单的框架和内容基本上就设计完毕了，之后我们就可以进行数据库、网络以及图片加载方面的功能设计了。

联系方式：

简书：WillFlow
CSDN：WillFlow
微信公众号：WillFlow