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