关于DrawerLayout的使用本篇不再赘述，因为使用起来很是简单，如果你确实没有用过不知道如何下手，那么可以看这几篇：
-
DrawerLayout快速实现
-
DrawerLayout配合主页面的滑动和缩放
- DrawerLayout不同的遮盖效果
而今天我们主要进行“爱阅”中侧边栏的实现方式，在开始之前看一下“爱阅”的实现效果：
点此进入目录：[干货] 十天 教你从创意到上线APP
1、主布局文件编写
首先我们找到MainActivity的布局文件，然后在布局文件中添加如下内容：
在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
对于右侧的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 mDragCategories = new ArrayList<>();
private ArrayList 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
到此为止，我们的左右两侧菜单的框架和内容基本上就设计完毕了，之后我们就可以进行数据库、网络以及图片加载方面的功能设计了。
联系方式：
：WillFlow
GitHub：爱阅