Toolbar与抽屉菜单DrawerLayout

最新推荐文章于 2023-04-28 15:54:03 发布
最新推荐文章于 2023-04-28 15:54:03 发布
阅读量334 收藏
点赞数
分类专栏： Andorid-BILIBILI之路 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/read987/article/details/72811548
版权


（一）toolbar用来替代Actionbar，也就是标题栏。

首先打开res/values/styles.xml

将AppTheme的主题的parent主题改为

Theme.AppCompat.Light.NoActionBar

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#FF4081</item>
        <item name="colorPrimaryDark">#FF4081</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

其中加Light代表单色出题，不要Light则代表深色主题。

AppTheme各项属性如下：


2.接着修改activity_main中的代码

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

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/logo"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="0dp"
                    android:src="@drawable/m" />
            </android.support.v7.widget.Toolbar>

在中间我添加一个圆形的图片。

3.接下来在标题栏添加action按钮，新建一个menu文件夹，创建一个toolbar.xml文件，代码如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="首页"/>
        <item
            android:id="@+id/nav_vip"
            android:icon="@drawable/ic_nav_vip"
            android:title="我的大会员"/>
        <item
            android:id="@+id/nav_download"
            android:icon="@drawable/ic_file_download_black_24dp"
            android:title="离线缓存"/>
        <item
            android:id="@+id/nav_shoucang"
            android:icon="@drawable/ic_star_black_24dp"
            android:title="我的收藏"/>
        <item
            android:id="@+id/nav_time"
            android:icon="@drawable/ic_history_black_24dp"
            android:title="历史记录"/>
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="设置与帮助"/>
    </group>

</menu>
，showAsAction有集中值可以选

always代表永远显示，ifRoom代表空间足够则显示，never代表从来不显示

4.修改MainActivity

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
   @Override
    public boolean onOptionsItemSelected(MenuItem item){
        switch (item.getItemId()){
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.download:
                Toast.makeText(this,"You clicked download",Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

在onCreateOption中夹在toolbar.xml菜单文件

然后处理按钮点击事件。


（二）滑动菜单

使用DrawerLayout。他是一个布局，在布局中放入两个子空间，第一个子空间是主屏幕中显示的内容，第二个子控件是滑动菜单中的显示的内容。同时在导航栏最左边添加一个按钮，点击则打开滑动菜单。 
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/logo"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="0dp"
                    android:src="@drawable/m" />
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:tabIndicatorColor="@android:color/white"
                app:tabSelectedTextColor="@android:color/white"></android.support.design.widget.TabLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                ></android.support.v4.view.ViewPager>


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="250sp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

上面代码中有个NavigationView，需要引入complie ’com.android.support:design:24.2.1'
其中nav_menu和nav_head代表头部和身体 
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="首页"/>
        <item
            android:id="@+id/nav_vip"
            android:icon="@drawable/ic_nav_vip"
            android:title="我的大会员"/>
        <item
            android:id="@+id/nav_download"
            android:icon="@drawable/ic_file_download_black_24dp"
            android:title="离线缓存"/>
        <item
            android:id="@+id/nav_shoucang"
            android:icon="@drawable/ic_star_black_24dp"
            android:title="我的收藏"/>
        <item
            android:id="@+id/nav_time"
            android:icon="@drawable/ic_history_black_24dp"
            android:title="历史记录"/>
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="设置与帮助"/>
    </group>

</menu>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="秘术师"
        android:textColor="#FFF"
        android:textSize="20sp"/>

</RelativeLayout>

接着在MainActivity中处理点击事件 
 NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
  navigationView.setCheckedItem(R.id.nav_home);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(MenuItem item){
                mDrawerLayout.closeDrawers();
                return true;
            }
        });


以上就是滑动菜单和Toolbar了。有错误的地方欢迎指出，水平有限写不出什么好文章，以此记录自己的学习。


SakuraKong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MaterialDesign学习篇(二)，Toolbar、DrawerLayout的使用
Chay_Chan的博客
07-24 3288
什么是ToolbarToolbar是应用的内容的标准工具栏，可以说是Actionbar的升级版，两者不是独立关系，要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar，Toolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。Toolbar提供了一些可定制化
Android App中DrawerLayout抽屉效果的菜单编写实例
10-22
主要介绍了Android App中DrawerLayout抽屉效果的菜单编写实例,包括结合Toolbar实现复合Material Design的策划菜单例子,需要的朋友可以参考下
DrawerLayout侧滑菜单、Toolbar和沉浸式状态栏的使用
想你依然心痛的博客
01-16 5750
最近在开发中需要用到侧滑菜单，以前使用的SlidingMenu，但似乎已经被Google淘汰了（过时了），于是乎使用了DrawerLayout来实现，既然是在项目使用的，那么Toolbar和沉浸式状态栏也是要配合使用的，这里做一下记录。 我们先来看一看效果，这里是用模拟器实现的，效果不太好，真机上没问题。 一、沉浸式状态栏其实挺简单的，网上也很多，为了兼容低版本的手机可以先通过判断版本再来设置，
ToolBar+DrawLayout+Navigation界面实战
weixin_43436958的博客
07-08 666
一、ToolBar 1.基本用法   android系统默认显示的是ActionBar,这个是根据项目中指定的主题来显示的，我们新建一个项目MyApplication，打开AndroidManifest.xml文件看一下： <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.shuting.my
ToolBar和DrawerLayout和SlidingMenu
yc_2001的博客
04-28 55
4. 在复制官方文档SlidingMenu-master里面library里面的 两个包个一个文件 ，复制到Linrary的main层级下，如下图。二：--------------------------------DrawerLayout抽屉。三：----------------------------------SlidingMenu。一：--------------------------------ToolBar。5.然后就是将src包名改成java 如下图：​​​​​​​。
Toobar，DrawerLayout，NavigationVIew的简单使用 （部分）
weixin_58124208的博客
08-17 595
toolbar DrawerLayout NavigationVIew
toolbar_drawerlayout
10-29
使用ToolBar和DrawerLayout实现抽屉菜单，包含了两个demo
Toolbar与DrawerLayout配合详解
05-26
Toolbar的基本使用以及进阶使用，详细介绍了Toolbar的使用发方法 可以结合http://blog.csdn.net/cuihaoren0中Material Design学习！
侧滑菜单DrawerLayout Demo
09-30
DrawerLayout 功能有点类似抽屉，但区别是抽屉有拉开的手把，又有点类似DrawerMenu，但区别是menu的效果在滑动的过程中底部的内容会随着滑动，而DrawerLayout是直接盖在上面的滑动效果，该控件是android.support.v4...
ToolBar与DrawerLayout
07-05
ToolBar与DrawerLayout结合实现
DrawerLayout+ToolBar官方API实现仿网易V4.4.4导航抽屉
04-25
主要在原本Google官方提供的利用DrawerLayout创建导航抽屉的基础上，加入Toolbar，实现仿网易V4.4.4导航抽屉滑动动画效果及Menu。
Toolbar+DrawerLayout简单简介和简单使用方法
SageDeceiveFiend的博客
06-09 873
Toolbar+DrawerLayout Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件， 以此来取代之前的Actionbar 。我们需要在工程中引入appcompat-v7的兼容包以便向下兼容， 使用android.support.v7.widget.Toolbar进行开发。在设计 Toolbar 的时候， Google也留...
Android使用DrawLayout，ToolBar和ActionBarDrawerToggle实现抽屉
weixin_44223180的博客
07-15 357
效果： 点击可切换不同页面 对Toolbar的设置，添加三个菜单选项，并给菜单选项设置点击事件 public class DrawerLayoutUsing extends AppCompatActivity { private DrawerLayout mDrawerLayout; private ListView mDrawerList; ArrayList<String> menuList; private ArrayAdapter<String&
Android抽屉式导航栏drawerlayout与toolbar的共同使用
s402621342的博客
06-26 1832
drawerlayout是一种可以隐藏的导航栏，非常适合屏幕控件有限的移动设备使用，具体效果如下图。 drawerlayout可以设置在屏幕的左侧或者右侧，通过在屏幕左侧向右滑动来打开，或是在右侧向左滑动打开 使用了drawerlayout的xml布局文件如下 <android.support.v4.widget.DrawerLayout android:lay
Toolbar+NavigationView实现抽屉式菜单
playing_the_fool的博客
09-21 2722
一、Menu部分在res文件上右键->new->Android resource directory，新建Menu文件夹toolbar_menu.xml，在本例中toolbar仅包含一个扫一扫的菜单<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android
安卓ToolBar+抽屉
qq_44946212的博客
06-09 330
前言 抽屉是生活中最常见的存放东西的容器，无论衣柜，茶几还是冰箱，都有抽屉的应用，他可以将空间很好的隐藏，不影响外部的美观还会节省空间，在安卓开发中也有抽屉的应用。 抽屉效果（此为示例图，百度搜的！！） ToolBar布局代码 <android.support.v7.widget.Toolbar android:layout_width="match_parent" ...
侧滑菜单DrawerLayout+Toolbar结合使用，切换菜单
时光荏苒的博客
06-29 3506
因为最近项目中用到侧滑菜单，于是就想到了谷歌提供的这个类网上看了看资料完成了侧滑菜单的功能，并写了一个demo记录下来，加深记忆和以后做类似功能时，直接看看笔记比住较方便 主布局文件分为两个一个是侧滑菜单覆盖toolbar一个是不覆盖toolbar具体看效果图，无赖不会上传gif 1.覆盖toolbar 2、不覆盖toolbar 2、menu 主布局文件（
【Android】两种抽屉写法（NavigationView和Toolbar互动）
大船
11-26 4751
其实这两种的效果差不多，只是第一种的抽屉比较高，把Toolbar都盖住了，看不到Toolbar上三道杆的动画；另一种嘛，就是抽屉在Toolbar下方，三道杆变成箭头的动画可以完整展现。来先看效果图。
Android 修改Toolbar 样式 且 实现抽屉式
android之旅的博客
05-25 1081
首先新建一个 官方的Nacigation Drawer Activity 现在有个需求要把 官方默认效果如下：public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCrea
qt toolbar添加下拉菜单
最新发布
07-28
在 Qt 中，可以使用 QToolBar 类来创建工具栏，并且可以在工具栏中添加下拉菜单。下面是一个简单的示例代码，展示了如何添加一个带有下拉菜单的工具栏： ```cpp #include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QMainWindow mainWindow; QToolBar *toolBar = new QToolBar("My Toolbar", &mainWindow); QAction *action1 = new QAction(QIcon(":/icons/icon1.png"), "Action 1", &mainWindow); QAction *action2 = new QAction(QIcon(":/icons/icon2.png"), "Action 2", &mainWindow); QMenu *menu = new QMenu(&mainWindow); menu->addAction("Menu Item 1"); menu->addAction("Menu Item 2"); QToolButton *dropdownButton = new QToolButton(&mainWindow); dropdownButton->setText("Dropdown"); dropdownButton->setPopupMode(QToolButton::InstantPopup); dropdownButton->setMenu(menu); toolBar->addAction(action1); toolBar->addAction(action2); toolBar->addWidget(dropdownButton); mainWindow.addToolBar(toolBar); mainWindow.show(); return app.exec(); } ``` 在这个示例中，我们创建了一个 `QToolBar` 对象，并将其添加到 `QMainWindow` 中。然后，我们创建了两个 `QAction` 对象，分别代表工具栏上的两个动作。接下来，我们创建了一个 `QMenu` 对象，并向其添加了两个菜单项。然后，我们创建了一个 `QToolButton` 对象，并将其设置为下拉模式，将 `QMenu` 对象设置为其菜单。最后，我们将动作和下拉按钮添加到工具栏中，并将工具栏添加到主窗口中。 你可以根据自己的需求进行修改和扩展，例如更改图标、文本和菜单项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值