『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

这篇具有很好参考价值的文章主要介绍了『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟

🏡个人主页:starry陆离

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

为什么默认的Android应用跑出来都是紫色的主题?

可在看到原来默认给我们设置了主题的颜色

Material Theme 可以定义为以下 3 种

  • Theme.Material(深色版本)
  • Theme.Material.Light(浅色版本)
  • Theme.Material.Light.DarkActionBar(浅色版本,深色 Action Bar)

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

1.自定义主题颜色

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

2.使用Toolbar

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar。

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

虽然这样看上去好像和ActionBar外观上没什么两样,不过是我们还没用到Material Design中的特性,Toolbar的强大之处在于它可和其它控件联动实现强大的效果,之后再慢慢体验。

3.结合滑动菜单

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

在Activity中添加一个事件唤出滑动控件

注意这里是android.R.id.home,它默认指代ToolBar左边的图标,这里默认有一个不会显示返回按钮,作用是返回上一个Activity。我们通过setDisplayHomeAsUpEnabled(true);方法将其显示,除此之外我还通过setHomeAsUpIndicator(R.drawable.ic_menu);修改了它的默认样式,ic_menu是我放在drawable文件夹下的一个png图片

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

然后为android.R.id.home添加响应,调用drawerLayout.openDrawer()方法将滑动菜单展示出来。其中的参数是指代滑出的方向,start是左边滑出

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

4.结合NavigationView

NavigationView是应用程序的标准导航菜单。菜单内容可以通过菜单资源文件填充。导航视图通常放置在 .DrawerLayout搭配着一起使用

使用NavigationView之前先要准备menu和headerLayout

  • menu:显示具体的菜单项
  • headerLayout:显示头部布局

menu

checkableBehavior="single"指定group中的菜单项都只能单选

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

headerLayout

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

回到activity_main.xml中,用NavigationView替换掉原来的Button,其中的两个属性正是我们刚刚创建的资源

app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

稍作美化,这里用到了一个开源库

    implementation 'de.hdodenhof:circleimageview:3.0.1'

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

5.添加响应

navView=findViewById(R.id.navView);
//        添加NavigationView的事件监听
navView.setCheckedItem(R.id.navCall);//默认选中navCall子项
navView.setNavigationItemSelectedListener(item -> {
    //此处省略具体的逻辑操作
    //用户在点击对应的菜单子项应该调用对应的逻辑代码,然后关闭滑动窗口
    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
});

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

6.优化1:不遮挡菜单锚点

设置toolbar的popup_theme属性中的overlapAnchor为false

<style name="popup_theme" parent="@style/Theme.MaterialComponents.Light">
    <!--设置背景-->
    <item name="android:background">@android:color/white</item>
    <!--设置字体颜色-->
    <item name="android:textColor">@android:color/black</item>
    <!--设置不覆盖锚点-->
    <item name="overlapAnchor">false</item>
</style>

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

记得在toolbar控件中使用这个样式

『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果

7.总结

这里其实学到了很多的新控件和新知识,例如Toolbar,然后复习了drawerLayout,学到了一个新的控件NavigationView以及一个处理图片成圆形格式的开源库circleimageview。总之收获颇丰,文中素材全是来自《第一行代码——Android》(作者郭霖),谨以此文记录自己的学习过程。

8.参考资料

【译】为Android设置Material Components主题

GitHub - hdodenhof/CircleImageView: A circular ImageView for Android

Android,安卓,toolbar,menu显示位置,及样式调整,及使用PopupWindow 实现menu下拉菜单

Android ToolBar 使用完全解析

Android Material 常用组件详解(九)—— NavigationView 使用详解文章来源地址https://www.toymoban.com/news/detail-438097.html

到了这里,关于『Android』Toolbar+DrawerLayout+NavigationView实现类似QQ侧边栏效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android工具栏ToolBar

    主流APP除了底部有一排标签栏外,通常顶部还有一排导航栏。在Android5.0之前,这个顶部导航栏以ActionBar控件的形式出现,但AcionBar存在不灵活、难以扩展等毛病,所以Android5.0之后推出了 ToolBar工具栏 控件,意在取代AcionBar。 但为了兼容之前的版本,ActionBar按件仍然保留。 T

    2024年02月05日
    浏览(52)
  • 新手必看:Android studio 侧边栏实现,带源码

    本篇内容主要是自己实现侧边栏后的一些总结,部分理论来自网络和ai助手,如有错误,欢迎大佬指点 我刚开始没有找到很合适新手的实例,所有我尝试了Android studio自带侧边栏的布局 但是使用过后,我发现他有一些东西是我不想要的,我就把我不要的东西删掉,保留我想要

    2024年02月04日
    浏览(54)
  • Android实现qq登录注册和好友列表界面

    学习Android已经有一个多月了,老师留了实现qq登陆注册和好友列表的作业,要求: 设计登录界面,注册界面和好友列表界面。 在登录界面输入用户名“ admin ”,密码“ abc123 ”后,判断用户名和密码是否正确。 若用户名或密码错误则给出相应提示:“用户名或密码输入有误

    2024年02月02日
    浏览(51)
  • Android SwitchCompat 实现类似IOS的UI效果

    在Android中,可以通过自定义样式和选择器来实现类似iOS的开关效果。请按照以下步骤进行操作: 首先,创建一个选择器 xml 文件,例如 switch_selector.xml,用来设置 Switch 的样式,示例代码如下: 在这里,我们定义了两个 item,通过设置 state_checked 来设置 Switch 的状态,如果 S

    2024年02月08日
    浏览(39)
  • android仿QQ列表实现 android studio大作业,android studio课程设计

    1. 效果图 2.功能介绍:登录,注册,好友列表 3.核心代码

    2024年02月11日
    浏览(52)
  • Android笔记:监听侧边音量键

    2024年03月22日
    浏览(34)
  • Android跳转到QQ加群、聊天页面

    1.跳转到QQ聊天页面(单聊) 2.跳转到QQ群页面 在跳转到QQ群页面前,需要先获取要跳转到QQ群的Key,获取Key的网址:https://qun.qq.com/join.html 电脑 加群的 链接, 是 扫描 群的 二维码 图片 可以 得到 点击, 手机里打不开

    2024年02月04日
    浏览(45)
  • 开源大模型LLaMA 2会扮演类似Android的角色么?

    在AI大模型没有商业模式?等文章中,我多次表达过这样一个观点:不要把大模型的未来应用方式比喻成公有云,大模型最终会是云端操作系统的核心(新通用计算平台),而它的落地形式会很像过去的沃森,以系统型超级应用的形态落地。假如真的这样,那无疑的就需要一

    2024年02月15日
    浏览(46)
  • 在 Android Studio 中创建一个简单的 QQ 登录界面

            打开 Android Studio,选择 \\\"Start a new Android Studio project\\\",然后填写应用程序名称、包名和保存路径等信息。接下来,选择 \\\"Phone and Tablet\\\" 作为您的设备类型,然后选择 \\\"Empty Activity\\\" 作为您的 Activity 模板。         在 Android Studio 中,布局文件用于指定应用程序的用

    2024年02月07日
    浏览(53)
  • Android类似微信聊天页面教程(Kotlin)五——选择发送图片

      安装并配置好Android Studio Android Studio Electric Eel | 2022.1.1 Patch 2 Build #AI-221.6008.13.2211.9619390, built on February 17, 2023 Runtime version: 11.0.15+0-b2043.56-9505619 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. Windows 11 10.0 GC: G1 Young Generation, G1 Old Generation Memory: 1280M Cores: 6 Registry:     external.system.a

    2024年02月03日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包