Toolbar入门

最新推荐文章于 2023-11-03 17:08:49 发布
最新推荐文章于 2023-11-03 17:08:49 发布
阅读量160 收藏
点赞数
分类专栏： android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38322982/article/details/112321281
版权

1引入

使用之前先将自带的ActionBar屏蔽，清单文件

<application
	android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

android：implementation 'com.android.support:appcompat-v7:27.0.2
androidx：implementation 'androidx.appcompat:appcompat:1.2.0’里包含了

2常见的用法

2.1xml

  1. android:layout_height="?attr/actionBarSize"(高度为状态栏高度)
  2. android:background(背景)
  3. app:navigationIcon(标题左边icon)
  4. app:title(标题)
  5. app:titleTextColor(标题颜色)
  6. app:navigationIcon(最左侧icon)
  7. titleMarginStart(标题距离(开始)左边的距离)
  8. app:subtitle(子标题，标题的下方)
  9. app:titleTextAppearance(自定义标题style样式)

2.2 java

Toolbar toolbar=findViewById(R.id.toolbar);
toolbar.setTitle("标题");//标题
toolbar.setTitleTextColor(Color.RED);//标题颜色
toolbar.setNavigationIcon(R.drawable.back);//标题左边icon
toolbar.setNavigationOnClickListener(v -> {
//点击左边返回按钮监听事件
});

3花式使用

3.1标题居中

Toolbar中添加textview并设置为android:layout_gravity="center"

3.2结合menu

1创建menu文件

在src的menu文件夹下增加xml文件名字看个人

 <menu xmlns:android="http://schemas.android.com/apk/res/android"
    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_settings"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="@string/str_settings"
        app:showAsAction="never" />
</menu>
2代码中加载
toolbar.inflateMenu(R.menu.menu);
3设置弹出的菜单样式：
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
         <!--<item name="android:colorBackground">#000000</item>--> <!--这里可以改变菜单的背景色-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
    </style>

    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

在toolBar中引用
app:popupTheme=”@style/ToolbarPopupTheme”

4menu介绍

4.app:showAsAction有以下三个属性：

  1. ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
  2. never 表示永远不显示在Toolbar中，而是一直显示在菜单中
  3. always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

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

3.3与AppBarLayout结合

引入：implementation 'com.google.android.material:material:1.2.1'

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <androidx.appcompat.widget.Toolbar
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/purple_200"
       app:layout_scrollFlags="scroll"
       app:popupTheme="@style/ToolbarPopupTheme">
   </androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
1)app:layout_scrollFlags=“scroll”

滚动布局滑动到顶端时，标题栏toolbar才会显示

2)app:layout_scrollFlags=”scroll|enterAlways”

toolbar会根据当前的滚动距离，自动选择是隐藏还是显示

3)app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

布局

<androidx.appcompat.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">
    </androidx.appcompat.widget.Toolbar>

效果：

向上滑动时高度达到最小高度时ToolBar不再滑动。向下滑动则会全部显示

4)app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

布局与上面相似。效果：

上滑的时候，toolbar直到完全隐藏时，下面的滚动布局才开始发生滚动；下滑时toolbar会优先滑出设置的最小高度值，然后当滚动布局下滑到顶部时，后面的toolbar部分，才开始完全显示

3.4与CollapsingToolbarLayout结合的使用

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">
        <com.google.android.material.appbar.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_action_accept"
                app:layout_collapseMode="pin" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_action_accept"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:title="标题"
                app:titleTextColor="@color/white">
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

<!--transparentText （透明）样式-->
<style name="transparentText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">#00000000</item>
    <item name="android:textSize">15sp</item>
</style>
<!--ToolbarTitle样式-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textColor">#f0f0</item>
    <item name="android:textSize">15sp</item>
</style>

CollapsingToolbarLayout属性

  1. app:contentScrim( 当上滑到toolbar 高度期间直到达到toolbar高度时，给toolbar设置的背景色，以及过渡颜色或图片。)
  2. app:layout_scrollFlags(与Toolbar 相同)
  3. app:expandedTitleGravity(展示后title的位置)
  4. app:expandedTitleMarginStart(展示后title 距离开始位置的边距)
  5. app:collapsedTitleGravity(收缩后title 位置)
  6. app:expandedTitleTextAppearance(展开后标题文字的样式)
  7. app:collapsedTitleTextAppearance(折叠后标题文字的样式)
  8. app:layout_collapseMode参数。(1)parallax:有该标志位的View在页面滚动的过程中会一直停留在顶部，比如Toolbar被固定在顶部，(2)pin:有该标志位的View表示能和页面同时滚动。
  9. imgview的layout_collapseParallaxMultiplier。该属性是视差因子，表示该View与页面的滚动速度存在差值，造成一种相对滚动的效果。

状态栏透明5.0以上java代码：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
            | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.TRANSPARENT);
    window.setNavigationBarColor(Color.TRANSPARENT);
}else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    Window window = getWindow();
    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

5.0以下，4.4以上
在res下新建values-v19这个文件夹，然后新建styles

<resources>
    <style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

布局xml根节点

android:fitsSystemWindows=“true”

lessmker
关注
专栏目录
xamarin android toolbar(踩坑完全入门详解)
dotNet全栈开发
05-06 7406
网上关于toolbar的教程有很多,很多新手，在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费。如果你想学习toolbar，你肯定会去去搜索androd toolbar，既然你能看到这篇文章，说明还是搜了xamarin android toolbar。那么这篇文章就好好总结一下toolbar在xamarin android中如何使用，减少大家踩坑的时间。 了解Toolbar ...
macOS SwiftUI 教程之入门toolbar工具栏（教程含源码）
iCloudEnd的博客
12-22 801
实战需求 macOS SwiftUI 教程之入门toolbar工具栏 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 1、侧边栏风格.listStyle(SidebarListStyle()) 2、工具栏 .toolbar 3、工具栏项目 ToolbarItem 4、文本标签 Label(“Another”, systemImage:“pencil.tip.crop.circle”) 基础知识 toolbar(content:) 用指定的项目填充工具栏或导航栏。 func
toolbar
weixin_44583352的博客
03-24 70
android开发修改字体大小,安卓开发——修改Toolbar标题字体大小
weixin_30278943的博客
05-25 620
首先在style.xml文件中，定义：18sp然后在布局文件中设置app:titleTextAppearance="@style/Toolbar.TitleText",即xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"androi...
Android工具栏ToolBar
最新发布
m0_57150356的博客
11-03 1280
主流APP除了底部有一排标签栏外，通常顶部还有一排导航栏。在Android5.0之前，这个顶部导航栏以ActionBar控件的形式出现，但AcionBar存在不灵活、难以扩展等毛病，所以Android5.0之后推出了。都占着顶部导航栏的位置，要想引入ToolBar就得先关闭ActionBar。设置标题的文字风格(外观)。风格定义在styles.xml中。但为了兼容之前的版本，ActionBar按件仍然保留。设置副标题的文字风格(外观)。设置导航图标的点击监听器。设置副标题的文字颜色。设置标题的文字颜色。
CollapsingToolbarLayout中title属性在全屏模式下被遮挡
TheBest_XueTu的博客
10-16 629
起因： 使用AppBarLayout的折叠效果加title置顶效果 问题1： 信心满满使用CollapsingToolbarLayout中的title属性想要显示完整的字符串就应该让toolbar不占满宽度，因为这个title中的字符串会显示在toolbar中剩余的空间内 问题2： CollapsingToolbarLayout中的title显示的位置和字体大小不是我想要的，幸好这个我们...
Android中导航栏之Toolbar的使用
水月洞天
02-26 4167
我们做APP页面的时候往往需要在头部的位置加一个导航栏，显示一下页面的标题，返回按钮，或者右侧还有有一些别的按钮。当然了，还会出现比如标签，搜索等比较高级一点的内容。如果开发时间较长的同学应该知道ActionBar，但这个已经过时了，因为定制难，长得丑都是它存在的问题。后来我们习惯了自己写一个布局去替代它，使用include的方式引入，但是这样要么就是所有页面都要自己写一套，要么就是每种长得都不一样不好兼容。再后来我们学会了自定义控件写这个导航，这时就高级一些了，但很考量我们的技术功底。不过现在不用担心了，
xamarin toolbar入门例子
05-07
我们将基于提供的“xamarin toolbar入门例子”进行解析，了解如何在 Xamarin.Forms 项目中使用 Toolbar。 首先，让我们了解 Toolbar 的基本概念。Toolbar 在 Android 中是 App Bar 的一部分，而在 iOS 中对应的是 ...
macOS SwiftUI 教程之入门toolbar工具栏
12-22
macOS SwiftUI 教程之入门toolbar工具栏。1、侧边栏风格.listStyle(SidebarListStyle())。2、工具栏 .toolbar。3、工具栏项目 ToolbarItem。4、文本标签 Label(“Another”, systemImage:“pencil.tip.crop.circle”...
ReactV 15.5.0 从入门到精通第十章 ReactUI组件Toolbar
11-06
ReactV 15.5.0 从入门到精通第十章 ReactUI组件Toolbar
Android Material Design 系列之 Toolbar 使用详解
一名互联网时代苟且偷生的 Android码农
06-15 6015
前言 在 2014 年 Google IO 大会上，Google 推出了一套全新的设计规范 Material Design,这也为广大的 Android 开发者带来了福音，不用像以前一样照着 IOS 视觉稿来开发 Android APP，Material Design 的视觉风格本身就比较炫酷。 而 Google 也为我们提供符合 Material Design 风格的一系列组件，这大大的提高了我们的开发效率。由于 APP 改版在做 Material Design 化，所以后面会结合项目中的使用情况写几篇关
Material Design控件使用
qq_30621333的博客
02-08 558
什么是Material Design Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计 语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 Tip: 在Android5.0最引人注意的就是MaterialDesign设计风格 Material Design：谷歌拿出媲美苹 果的设计 过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不 必看产品设计，只要看一下Google每款产品的L
Android TextView属性详解
xSTARx
03-01 441
推荐安卓开发神器（里面有各种UI特效和android代码库实例） android:autoLink设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web /email/phone/map/all)android:autoText如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输入的时候起作用。android:bufferTy...
Android ToolBar 使用完全解析
热门推荐
蓝天白云梦的csdn博客
05-07 3万+
ToolBar简介ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，由于其高度的可定制性、灵活性、具有Material Design风格等优点，越来越多的应用也用上了ToolBar，比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0，所以，ToolBar也放进了support v7包内，使得低版本的系统也能
Material Design之CollapsingToolbarLayout 相关属性和方法介绍
103style
05-18 1万+
Material Design之CollapsingToolbarLayout 相关属性和方法介绍 转载请以链接形式标明出处：  http://blog.csdn.net/lxk_1993/article/details/51443045 本文出自:【lxk_1993的博客】；  废话不多说  先看看这东西的效果图。 一张没图片的和一张有图片的，图片太丑别怪我。还是把图换
Toolbar样式定制详解
yancychas的博客
08-14 1300
前言 Marterial Design出来也有一段时间了，为了紧跟Google的设计规范，决定在项目中使用Toolbar。使用了一段时间之后，发现很多时候原始的Toolbar并不能满足项目的要求。为了适应项目多样化的需求，对Toolbar进行了深入的研究。 Toolbar简介 Toolbar使应用的标准工具栏，可以说是Actionbar的升级版。和Actionbar相比，Tool
title 标题栏字体设置
点点滴滴
09-23 626
&lt;!-- Sets the text styles --&gt; &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;!-- Sets the text styles --&gt; &lt;resources&gt; &lt;style name="CustomWindowTitleText" parent=
textAppearance字体大小
chunda
07-29 1552
这个是系统自带字体外观 可以是下面三种值 ?android:attr/textAppearanceLarge
textAppearance 解答，android系统主题样式
02-08 4635
STYLE name="Theme"> @android:color/bright_foreground_dark @android:color/bright_foreground_dark_inverse @android:color/background_dark ?android:attr/colorbackground 0.5 0.6
Android Material Design入门与Toolbar实现详解
为了使用Toolbar替换传统的ActionBar，开发者需要在项目中添加相关依赖，并选择无ActionBar的主题，如Theme.AppCompat.Light.NoActionBar或Theme.AppCompat.NoActionBar。在定制主题时，开发者需要设置colorPrimary...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值