ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

时间:2022-05-10 18:28:09

先参考下ToolBar的使用和DrawableLayout的使用;

1、主界面布局,主要结构包含一个ToolBar和一个DrawableLayout,DrawableLayout里面有左侧边栏布局和主界面布局(注意ToolBar需要设置Theme,不然菜单项有些设置不起作用):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/MainToolbarMenuStyle">
</android.support.v7.widget.Toolbar> <android.support.v4.widget.DrawerLayout
android:id="@+id/drawablelayout_main"
android:layout_width="match_parent"
android:layout_height="match_parent"> <!--左侧的布局-->
<RelativeLayout
android:id="@+id/layout_left"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/white">
<RelativeLayout
android:id="@+id/layout_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_centerHorizontal="true">
<ImageView
android:id="@+id/iv_user_head"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/user_demo"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/tv_user_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_user_head"
android:text="登录"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout> </android.support.v4.widget.DrawerLayout> </LinearLayout>

2、创建一个menu文件,里面只包含“搜索”项和“扫一扫”项:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/toolbar_search"
android:icon="@drawable/search"
android:orderInCategory="1"
app:showAsAction="always"/> <item
android:id="@+id/toolbar_scan"
android:icon="@drawable/scan"
android:orderInCategory="2"
app:showAsAction="never"
android:title="@string/toolbar_scan"/> </menu>

效果:

ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

3、style中需要添加工具栏的样式:

<!--主界面标题栏,里面三项分别是菜单样式、右边溢出按键样式、左边箭头样式-->
<style name="MainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="actionOverflowMenuStyle">@style/MainToolbarMenuStyle</item>
<!--<item name="actionOverflowButtonStyle">@style/MainOverflowButtonStyle</item>-->
<item name="drawerArrowStyle">@style/MainDrawerArrowToggle</item>
</style> <!--自定义toolbar菜单样式-->
<style name="MainToolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层背景颜色 -->
<item name="android:popupBackground">@color/toolbar_background</item>
<!-- 弹出层垂直方向上的偏移,负值会覆盖toolbar -->
<item name="android:dropDownVerticalOffset">5dp</item>
<!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">-2dp</item>
<!--文字颜色-->
<item name="android:textColor">@color/white</item>
<!-- 溢出菜单(三点)图标颜色-->
<item name="colorControlNormal">@android:color/white</item>
</style> //设置三点图标,需要取消注释上面“主界面标题栏”的代码
<style name="MainOverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
<item name="android:src">@drawable/more</item>
</style> //设置左边箭头的图标颜色
<style name="MainDrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>

4、minifest中对主界面进行绑定样式:

<activity android:name=".MainActivity" android:theme="@style/MainActivityTheme"/>

5、java代码中:

    private Toolbar toolbar_main;
private DrawerLayout drawerlayout_main;
    private void InitView(){
toolbar_main = findViewById(R.id.toolbar_main);
drawerlayout_main = findViewById(R.id.drawablelayout_main);
} private void setToolBar(){//使用ToolBar替换系统自带的ActionBar
setSupportActionBar(toolbar_main);
//设置返回图标
// toolbar_main.setNavigationIcon(R.mipmap.back);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//设置标题文本
toolbar_main.setTitle(R.string.app_name);
//标题文本颜色
toolbar_main.setTitleTextColor(Color.WHITE);
//设置logo图标
// toolbar_main.setLogo(R.drawable.toolbar_icon);
//副标题
// main_head.setSubtitle("副标题");
//工具栏背景
toolbar_main.setBackgroundColor(Color.BLUE);//创建返回键,并实现打开关/闭监听
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,drawerlayout_main, toolbar_main, R.string.app_name, R.string.app_name) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
drawerlayout_main.setDrawerListener(mDrawerToggle);
    //菜单项监听器
toolbar_main.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
switch (menuItem.getItemId()) {
case R.id.toolbar_search:
msg += "search";
break;
case R.id.toolbar_scan:
msg += "scan";
break;
}
if(!msg.equals("")) {
myApp.MakeToast(msg);
}
return true;
}
});
} //绑定菜单
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// 绑定toobar跟menu
getMenuInflater().inflate(R.menu.menu_toolbar_main, menu);
return true;
} //要重写onPrepareOptionsPanel方法才可以显示出图标
@SuppressLint("RestrictedApi")
@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (menu != null) {
if (menu.getClass() == MenuBuilder.class) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onPrepareOptionsPanel(view, menu);
}

PS:手动关闭侧边栏的代码:

drawerlayout_main.closeDrawer(Gravity.LEFT);

效果如下:

ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏的更多相关文章

  1. 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果

    最近闲来无事,在网上寻找源代码看,突然发现了一个国内技术牛人开发的快速开发框架Andbase,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...

  2. Android 开发自己的网络收音机2——电台列表(SlidingMenu侧滑栏)

    上一篇文章总体规划了这个项目的情况,今天讲讲实现电台列表.今天其实主要想讲解的是SlidingMenu,也就是我们平时说的侧滑栏,现在很多应用都有用这种UI效果.SlidingMenu侧滑栏功能实现的 ...

  3. 安卓开发笔记(三十四)&colon;Material Design框架实现优美的左侧侧滑栏

    首先我们先上图:  下面是主页面的代码,activity_main.xml: <?xml version="1.0" encoding="utf-8"?& ...

  4. 微信小程序实现左侧滑栏

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的*很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果 ...

  5. Android学习总结——DrawerLayout 侧滑栏点击事件穿透

    使用DrawerLayout实现侧滑栏功能时,点击侧滑栏空白处时,主界面会获得事件. 解决方法:侧滑栏布局添加 android:clickable="true"

  6. ViewDragHelper详解(侧滑栏)

    1.Drag拖拽:ViewDrag拖拽视图,拖拽控件:ViewDragHelper拖拽视图助手,拖拽操作类.利用ViewDragHelper类可以实现很多绚丽的效果,比如:拖拽删除,拖拽排序,侧滑栏等 ...

  7. 自定义控件学习——仿qq侧滑栏

    效果 主要步骤: 1. 在xml布局里摆放内容. include    2. 在自定义ViewGroup里, 进行measure测量, layout布局    3. 响应用户的触摸事件    4. i ...

  8. 【Android进阶】SlidingMenu实现侧滑栏效果的实现

    public class MainActivity extends Activity { @Override protected void onCreate(final Bundle savedIns ...

  9. 28 自定义View侧滑栏

    ScrollMenuView.java package com.qf.sxy.customview03.widget; import android.content.Context; import a ...

随机推荐

  1. 个人作业-Week3:代码复审

    软件工程师的成长 我在上大学之前,对于软件工程师之类并无概念,并且高初中的电脑课也从未提及过写代码之类的东西,更多的都是一些教一些办公软件的使用(笑,明明电脑课总是因为老师“有事”变成其他课,根本就没 ...

  2. &lbrack;转&rsqb; 有java基础的人如何转行做大数据?

    数据有两个方向,一个是偏计算机的,另一个是偏经济的.你学过Java,所以你可以偏将计算机基础1. 读书<Introduction to Data Mining>,这本书很浅显易懂,没有复杂 ...

  3. Only Link&colon; Inheritance and the prototype chain

    Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_cha ...

  4. 常见的几个angular&period;js的问题

    来源于网络收集 一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删 ...

  5. Android SDK Manager 在win8&period;1上的闪退问题

    全新安装的Windows 8.1的系统,Android SDK,JDK都是最新的版本,但是SDK Manager打开是命令行窗口一闪而过,就再没反映了. 通过搜索,确定了一个问题就是SDK目录tool ...

  6. WebSite和WebApplication的区别

    1. WebApplication(Web应用程序)和WebSite(网站)的区别:WebSite是为了兼容从ASP转过来的开发人员的习惯而存在的,用起来简单,例如:不需要创建命名控件.C#代码修改以 ...

  7. jqGrid Tree

    CSS: <!--jqGrid--><link rel="stylesheet" href="plugins/jqgird/css/ui.jqgrid. ...

  8. Hoax or what

    Hoax or what 题意是询问一个动态序列的最小值和最大值. 可以用multiset来实现. #include <stdio.h> #include <set> usin ...

  9. react router 4&period;0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  10. DevOps概述

    Devops概念 转载自 devops实践-开篇感想 DevOps(英文Development和Operations的组合)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和 ...