Day4 基于DrawerLayout的菜单栏设计
来源：互联网 发布：矢量软件 编辑：程序博客网 时间：2024/06/06 15:42
关于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
阅读全文
0 0
- Day4 基于DrawerLayout的菜单栏设计
- 菜单栏的设计
- DrawerLayout中菜单栏和主界面点击失效的原因
- Android drawerlayout 点击菜单栏 drawerlayout 关闭
- #Android笔记#基于popupwindow的底部菜单栏设计与功能实现
- 基于Hadoop的第二个分布式算法Day4
- MFC基于对话框加载菜单栏的方法
- MFC编程--添加基于对话框的菜单栏
- Android左侧菜单栏之DrawerLayout+Fragment
- Android DrawerLayout 实现侧滑菜单栏
- NavigationView和DrawerLayout实现侧滑菜单栏
- Android学习之基于DrawerLayout的侧边栏实现
- 基于对话框灰化菜单栏
- 【UI设计】DrawerLayout使用
- MFC基于对话框的菜单栏，工具栏和状态栏的创建
- MFC基于单文档菜单栏调用对话框的实现
- jQuery菜单栏设计
- Android底部菜单栏设计
- NodeJS安装使用
- C语言中open与fopen的的解释和区别
- 2017ACM-ICPC南宁网络赛Frequent Subsets Problem（康托展开+bfs）
- Java ———KMP算法(字符串匹配)
- Java 将枚举存入List集合
- Day4 基于DrawerLayout的菜单栏设计
- Springboot学习笔记（一）FastJson解析JSON数据
- java jxl 读取excel
- 排序算法学习体会
- 磁盘阵列RAID0，1，10，5，6
- Coursera/py4inf/python data structure 笔记 密歇根大学
- Java文件压缩
- GMapping源码分析之随手笔记
- Java9新特性——module模块系统
