Meterial Design常见控件的使用（一）：Toolbar

最新推荐文章于 2024-08-05 23:13:57 发布
最新推荐文章于 2024-08-05 23:13:57 发布
阅读量962 收藏 17
点赞数 20
分类专栏： 程序员 文章标签： python 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82101470/article/details/138886153
版权

在这里插入图片描述

注意： 此时 TextView 控件的宽和高都是自适应大小，java 代码中此行代码setSupportActionBar(toolbar);就不要添加了，否则就会显示不正常。如果你非要添加setSupportActionBar(toolbar);这行代码的话，TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。

至于它的作用，在此做一下简单的说明吧：

1）在Toolbar这个控件出现之前，其实我们也可以通过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar，（前提你的activity主题theme，是采用的带actionbar的主题，如果你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的）之后你就可以采用诸如下面的方面来操作actionbar啦。

ActionBar actionBar = getSupportActionBar();

if (actionBar != null) {

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setDisplayShowTitleEnabled(true);

actionBar.setTitle(“主标题”);

…

} else {

Log.i(TAG, “onCreate: actionBar is null”);

}

但是，原生自带的ActionBar设置的灵活性，还是有限，因此Toolbar 这个控件，也就应运而生啦！此时，有的小伙伴说了，我虽然使用了Toolbar来代替ActionBar，但是我还想使用ActionBar的一些特性怎么办呢？这个时候 setSupportActionBar(toolbar);就发挥其作用啦。添加这行代码，你的toolbar可以说也就具有了ActionBar的相关属性了。好啦，到此setSupportActionBar(toolbar) 的作用也讲完了。如果你还不太明白的话，可以参考一下篇文章：

ActionBar和Toolbar的基础使用

结合menu配置文件的用法。

这里先看一下效果图：

在这里插入图片描述

首先在menu文件夹中，创建名为 menu.xml 文件（文件名随意的）：

xmlns:app=“http://schemas.android.com/apk/res-auto”>

<item

android:id=“@+id/action_search”

android:icon=“@drawable/ic_search”

android:title=“Search”

app:showAsAction=“ifRoom” />

<item

android:id=“@+id/action_notifications”

android:icon=“@drawable/ic_delete_white_24dp”

android:title=“notifications”

app:showAsAction=“ifRoom” />

<item

android:id=“@+id/action_settings”

android:icon=“@mipmap/ic_launcher”

android:orderInCategory=“100”

android:title=“@string/action_settings”

app:showAsAction=“never” />

然后在代码中这样加载该menu文件即可：

toolbar.inflateMenu(R.menu.menu);

最后运行代码，就是上图的效果。

在这里，app:showAsAction 属性还是很有必要介绍一下滴。

app:showAsAction 有以下三个属性：

  1. ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中

  2. never 表示永远不显示在Toolbar中，而是一直显示在菜单中

  3. always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

注意:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

那如果设置了ifRoom 属性之后，既然只显示图标不显示文字，那还设置 android:title=”Search” 文字干嘛呢?如果你设置了之后，虽然不显示，但是你长按相应按钮后，就会吐司相应文字内容的。

细心的你可能发现还有些不足的地方，就是上图的点击菜单选项时，弹出的菜单位置有点太靠上啦，能不能设置呢，还有菜单的背景和文字颜色能不能设置呢？答案当然是可以的！

首先设置好样式：

然后直接在这里引用就可以了： app:popupTheme=”@style/ToolbarPopupTheme”

<android.support.v7.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

android:background=“@color/colorAccent”

app:popupTheme=“@style/ToolbarPopupTheme”>

<TextView

android:id=“@+id/title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:text=“标题”

android:textColor=“@color/white”

android:textSize=“22sp” />

</android.support.v7.widget.Toolbar>

效果图：

在这里插入图片描述

与AppBarLayout结合的使用

（1）： app:layout_scrollFlags=”scroll”

xml代码：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

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”

android:layout_width=“match_parent”

android:layout_height=“?android:attr/actionBarSize”

android:background=“@color/colorAccent”

app:layout_scrollFlags=“scroll”

app:popupTheme=“@style/ToolbarPopupTheme”>

</android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView

android:id=“@+id/nestedScrollView”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior=“@string/appbar_scrolling_view_behavior”>

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_margin=“16dp”

android:text=“@string/large_text” />

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

首先注意最外层：包裹了一层 android.support.design.widget.CoordinatorLayout 布局，那CoordinatorLayout 布局是什么的，我们可以理解为它是加强版的FramLayout。然后注意：Toolbar 的新添加的这条属性 app:layout_scrollFlags=”scroll” 。最后看一看效果图：

在这里插入图片描述

PS：对于 scroll 属性，网上也有说的比较专业的，不过我认为从产生的效果角度去分析的话，那就是：往上滑动就不说了，往下滑动就是当下面的滚动布局滑动到顶端时，标题栏toolbar才会滑出来。该属性实用性一般吧。

（2）：app:layout_scrollFlags=”scroll|enterAlways”

scroll 与 enterAlways 结合产生的效果图如下：

在这里插入图片描述

PS：我们还是从产生的效果角度去分析的：往下滑动时，，标题栏 toolbar 会优先滑出来，然后滚动布局才开始滑动。就像该单词的意思一样：总是在。也就是只要添加了该属性值，下滑时 toolbar 总是优先滑出来。该属性比较实用。

（3）： app:layout_scrollFlags=”scroll|enterAlways|snap”

在以上基础上，在与 snap 结合所产生的效果图如下：

在这里插入图片描述

PS：还是从产生的效果角度去分析的：不管是往下或者往上滑动时，，标题栏 toolbar 首先还是和（2）中一样的，不过有个细微的不同，toolbar会根据当前的滚动距离，自动选择是隐藏还是显示。该属性实用性也一般。

（4）： app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

scroll 与 enterAlways 与 exitUntilCollapsed 结合所产的效果图如下：

在这里插入图片描述

注意此时Toolbar的布局有些许改变（改变后的）：

<android.support.v7.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“100dp”

android:background=“@color/colorAccent”

android:minHeight=“40dp”

app:layout_scrollFlags=“scroll|enterAlways|exitUntilCollapsed”

app:popupTheme=“@style/ToolbarPopupTheme”>

</android.support.v7.widget.Toolbar>

我们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”，然后又把正常高度改变了，并随意改成了100dp。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，高度达到最小高度40dp时，toolbar不在滑动了。该属性感觉实用性不强。

（5）： app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

scroll 与 enterAlways 与 enterAlwaysCollapsed 结合所产的效果图如下：

在这里插入图片描述

xml中Toolbar 的布局和（4）还是一样的，不过app:layout_scrollFlags属性，由原来的exitUntilCollapsed改为enterAlwaysCollapsed。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，toolbar直到完全隐藏时，下面的滚动布局才开始发生滚动；下滑时toolbar会优先滑出设置的最小高度值，然后当滚动布局下滑到顶部时，后面的toolbar部分，才开始完全显示（滑）出来。该属性感觉实用性也不强。

与CollapsingToolbarLayout结合的使用

（1）：先看下效果图：

在这里插入图片描述

再把代码贴上：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:fitsSystemWindows=“true”>

<android.support.design.widget.AppBarLayout

android:id=“@+id/app_bar”

android:layout_width=“match_parent”

android:layout_height=“180dp”

android:fitsSystemWindows=“true”

android:theme=“@style/AppTheme.NoActionBar.AppBarOverlay”>

<android.support.design.widget.CollapsingToolbarLayout

android:id=“@+id/toolbar_layout”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:fitsSystemWindows=“true”

app:contentScrim=“?attr/colorPrimary”

app:layout_scrollFlags=“scroll”>

<ImageView

android:id=“@+id/image”

android:layout_width=“match_parent”

android:layout_height=“180dp”

android:scaleType=“centerCrop”

android:src=“@drawable/ic_image”

app:layout_collapseMode=“parallax” />

<android.support.v7.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

app:layout_collapseMode=“pin”

app:navigationIcon=“@drawable/ic_back_white_24dp”

app:popupTheme=“@style/AppTheme.NoActionBar.PopupOverlay”

app:title=“标题”

app:titleTextColor=“@color/white”>

</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior=“@string/appbar_scrolling_view_behavior”>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_margin=“@dimen/text_margin”

android:text=“@string/large_text” />

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

这里我们重点关注 CollapsingToolbarLayout控件 以下的几个属性：

  • app:contentScrim=”?attr/colorPrimary” 当上滑到toolbar 高度期间直到达到toolbar高度时，给toolbar设置的背景色，以及过渡颜色。当然，这里不仅仅可以设置颜色，也可以设置图片。 如果不设置该属性，标题栏会过渡为以之前的图片为背景。

  • app:layout_scrollFlags=”scroll” 和介绍 AppBarLayout 时，给Toolbar 设置和配置一样。其效果上图已做展示。

  • app:expandedTitleGravity=”center_horizontal” 从单词意思可以看出，这是展示后，title的位置。

  • app:expandedTitleMarginStart=”50dp” 从单词意思可以看出，这是展示后，title 距离开始位置的边距。

  • app:collapsedTitleGravity=”center” 从单词意思可以看出，这是收缩后，title 位置（测试发现，不好用）。

  • app:expandedTitleTextAppearance=”@style/transparentText” 展开后标题文字的样式

  • app:collapsedTitleTextAppearance=”@style/ToolbarTitle” 折叠后标题文字的样式

给 ImageView 控件 设置的 app:layout_collapseMode=”parallax” 属性说明：

app:layout_collapseMode有两个参数：

  • parallax 子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。

  • pin 测试发现，按照以上的布局，如果你使用pin参数，看效果，和使用parallax 参数，好像没有什么区别。目前个人认为的区别后面在做介绍。

注意事项:

1.上图中背景图，也就是xml中的 ImageView 控件，设置的图片大小，在保证显示正常的情况下，越小越好。太大的话，在展示的时候，会有卡顿的感觉。

下面我们来看一个效果图：

在这里插入图片描述

如果你发现展开和折叠后的标题字体太小或太大，你可通过如下两个属性设置：

app:expandedTitleTextAppearance=“@style/transparentText” 展开后标题文字的样式

app:collapsedTitleTextAppearance=“@style/ToolbarTitle” 折叠后标题文字的样式

transparentText （透明）样式：

ToolbarTitle样式：

细心的你，会发现我们的状态栏，现在是完全透明的状态。那我们怎么实现呢？那你会说了，那还不简单！

使用下面的代码：

//透明状态栏效果

if (Build.VERSION.SDK_INT >= 21) {

学习路线+知识梳理

花了很长时间，就为了整理这张详细的知识路线脑图。当然由于时间有限、能力也都有限，毕竟嵌入式全体系实在太庞大了，包括我那做嵌入式的同学，也不可能什么都懂，有些东西可能没覆盖到，不足之处，还希望小伙伴们一起交流补充，一起完善进步。

这次就分享到这里吧，下篇见。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

2301_82101470
关注
  • 20
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Material Design控件使用（一）
Lbsssss的博客
08-11 1495
Android Material Design控件使用（一）
View系列：Material Design：Android Material Design控件解析
C++ JAVA的专栏
01-19 275
Android Material Design 控件使用 1：CoordinatorLayout + AppBarLayout ：通过使用此控件实现：toolBar(ActionBar) + tab + Viewpager 来搭建主页。 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app...
Android Material Design控件使用(二)
Lbsssss的博客
08-12 835
Android Material Design控件使用(二)
Android Material Design控件的简单使用
zjm807778317的博客
05-20 1491
Android最原生的UI控件越来越不能满足如今的用户体验，Google为了对标苹果的UI体验，在2015年提出了Material Design， 我们安卓程序员应该积极响应Google的号召，学习新的UI理念，本篇文章就带大家入门Material Design。
Android Material Design 系列之 Toolbar 使用详解
一名互联网时代苟且偷生的 Android码农
06-15 5938
前言 在 2014 年 Google IO 大会上，Google 推出了一套全新的设计规范 Material Design,这也为广大的 Android 开发者带来了福音，不用像以前一样照着 IOS 视觉稿来开发 Android APP，Material Design 的视觉风格本身就比较炫酷。 而 Google 也为我们提供符合 Material Design 风格的一系列组件，这大大的提高了我们的开发效率。由于 APP 改版在做 Material Design 化，所以后面会结合项目中的使用情况写几篇关
Material Design控件使用(一)
菜鸟的android晋级之路
03-22 3494
最近学习了一下md设计风格和相对应的控件觉得挺棒的,真希望以后能做安卓设计风格的app,只是心有鱼而力不足,虽身为安卓程序员但由于公司设计成本却每天做着<a href="http://lib.csdn.net/base/ios" class="replace_word" title="iOS知识库" target="_blank" style="color:#df3434; font-weig
12个Material Design风格控件的使用
热门推荐
小小码农
05-20 4万+
项目在GitHub上的地址：https://github.com/Hebin320/MaterialDesignUseCSDN上的下载地址http://download.csdn.net/detail/hebin320320/96582151、AppBarLayout、ToolBarAppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material
Material Design控件使用
qq_30621333的博客
02-08 538
什么是Material Design Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计 语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 Tip: 在Android5.0最引人注意的就是MaterialDesign设计风格 Material Design：谷歌拿出媲美苹 果的设计 过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不 必看产品设计，只要看一下Google每款产品的L
Material Design的基本使用方法、Tollbar、菜单等
摸鱼小小虫的博客
09-11 804
Toolbar、DrawerLayout——抽屉布局、悬浮按钮与可交互提示、监听布局、卡片式布局
Android Material Design控件学习NavigationView和Toolbar使用
fictionss的博客
10-20 424
Google I/O 2015 给大家带来了Android Design Support Library，我们也可以到Android Design Support Library进行了解，下面介绍Toolbar的使用和NavigationView导航抽屉,而NavigationView的典型用途就是配合之前v4包的DrawerLayout， 首先导入依赖包compile 'com.android
学习使用Material Design控件（一）
08-29
学习使用Material Design控件（一） Material Design是一种由Google推出的设计语言，旨在为Android应用程序提供统一的视觉风格和交互式体验。Material Design控件是Google为Android应用程序提供的一些控件，旨在...
Material Design设计控件
12-01
在这个"MaterialDesignDemo"中，你可能会找到各种常见的Material Design控件，例如： 1. **Button**：按钮是用户界面中最基本的元素，Material Design提供了扁平化、浮起、图标按钮等多种样式，支持自定义颜色、...
MaterialDesign:Material Design 控件集合。ConstraintLayout、NestedScrollView、Toolbar、TabLayout、TextInputLayout。。
05-10
MaterialDesign 更新记录 【2021-01-08】TabLayout的使用细节、SearchView的调整适配 【2020-12-13】优化，Theme切换到MaterialComponents 【2020-11-18】整个项目升级、重构，support转androidX，java转kotlin 搜索...
MaterialDesign8大控件例子.rar
07-30
这个"MaterialDesign8大控件例子.rar"压缩包文件包含了关于Material Design的8个关键控件的示例代码，可以帮助开发者更好地理解和应用这些控件。 1. **Button**：Material Design中的按钮提供了丰富的视觉反馈和...
数学建模之数据分析【先导片】
lmx1458070445的博客
08-05 652
数据分析的定义为研究、清理、建模和转换数据，以找到有用的信息、提出结论并支持决策。
python字符串数据容器练习（replace,split,count）
2301_79600015的博客
07-31 670
Python字符串是由一系列字符组成的数据类型。在Python中，字符串是不可变的，这意味着一旦创建了一个字符串，就不能修改它的内容。以下是关于Python字符串的一些重要知识点：1. 字符串的基本操作：拼接字符串：使用`+`运算符。重复字符串：使用`*`运算符。索引和切片：使用`[]`和`:`操作符访问字符串中的子串。长度：使用`len()`函数获取字符串长度。转换大小写：使用`upper()`和`lower()`方法。分割和连接：使用`split()`和`join()`方法。
RAG与LLM原理及实践（10）--- 完整自实现Local RAG
最新发布
talentyiyy的专栏
08-05 221
通过这节加上前面的 local RAG 搭建，你完全可以自己实现一个local RAG 模型，而不借助任何外围组件，这样的实现对你加深RAG实现的全过程有直观重要的作用。还是那句话，真正的强者不能只是浮于表面，要知其然更要知其所以然。如果想要实现分布式的vector db 存储与query，那又回到了那个问题，你需要在query 正确率，效率，数据一致性之间做权衡。并且使用类似分布式数据，元数据管理工具，cache 策略等诸多手段进行维护。
【BUG】Gunicorn [CRITICAL] WORKER TIMEOUT (pid:41518)
集电极
07-31 248
在使用Gunicorn 启动一个Flask服务后，访问接口响应错误，查看日志发现了该错误。具体上，我的接口大约需要2分钟才将结果返回，因此我的超时时间应该设置为200秒比较合适。秒内没有返回结果，Gunicorn 会弹出超时错误，并且会杀死flask服务重启。：接口返回时间超时。默认情况下，Gunicorn 超时时间为。样例，设置超时时间为200秒。解决方法是在启动命令中。
Java 设计模式之桥接模式（Bridge Pattern）
微笑听雨
08-05 475
桥接模式（Bridge Pattern）是一种用于将抽象部分与其实现部分分离的结构型设计模式。这种模式通过组合关系而不是继承关系来连接抽象与实现，使代码更具扩展性和维护性。桥接模式的核心思想是将抽象和实现解耦，使得两者可以独立变化。桥接模式（Bridge Pattern）是一种结构型设计模式，旨在将抽象部分与其实现部分分离，从而使两者可以独立地变化。桥接模式通过组合关系代替继承关系，将抽象和实现解耦，使代码更具扩展性和维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值