Material Design 是谷歌推出的设计语言，旨在为用户提供更加简洁、明了的使用体验。在 Material Design 中，Toolbar 是一个非常重要的组件，常常被用来作为页面顶部的导航栏。而如何自定义 Toolbar 的颜色和高度则成为了许多前端开发人员需要掌握的技能。
自定义 Toolbar 的颜色
Material Design 提供了大量的颜色方案可以供我们使用。如果我们只是想要使用这些预设的颜色，那么非常简单，只需要使用 Toolbar 的一些属性即可。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:title="My App" />这里的 background 属性设置了 Toolbar 的背景颜色，而 ?attr/colorPrimary 则是一个引用，实际指向的是当前主题中定义的 colorPrimary 颜色。同样，我们可以使用 ?attr/colorPrimaryDark 引用来设置状态栏的颜色。
如果我们想要自定义 Toolbar 的颜色，那么就需要在主题中定义我们自己的颜色。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#303F9F</item>
<item name="colorAccent">#FF4081</item>
</style>这里定义了三种颜色，分别对应 Toolbar 的背景色、状态栏的颜色和强调色。然后我们就可以在布局中使用 ?attr/colorPrimary 引用来指向我们定义的颜色。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:title="My App" />自定义 Toolbar 的高度
Toolbar 的高度是通过 layout_height 属性来设置的。注意到这里的 ?attr/actionBarSize 引用，它实际上指向了一个在主题中定义的高度值。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#303F9F</item>
<item name="colorAccent">#FF4081</item>
<item name="actionBarSize">56dp</item>
</style>这里的 "actionBarSize" 就是我们自己定义的高度值。如果我们要修改 Toolbar 的高度，只需要修改主题中的这个值即可。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#303F9F</item>
<item name="colorAccent">#FF4081</item>
<item name="actionBarSize">64dp</item>
</style>需要注意的是，修改 Toolbar 的高度可能会影响其他组件的布局。如果我们想让 Toolbar 超出常规高度，可以在布局中使用 layout_marginTop 属性来设置 Toolbar 相对于其他组件的高度偏移值。
-- -------------------- ---- -------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
----------------- ----
------------------------------- --
---------
-----------------------------------
------------------------------------
------------------- -------
-----------------------
-------------------------------
------------------------------- --这里的 TextView 组件就会被放置在 Toolbar 的下面，并且预留出了一定的空间。
总结
本文介绍了 Material Design 中自定义 Toolbar 的颜色和高度的方法。通过灵活应用颜色方案和主题，我们可以轻松自定义 Toolbar 的风格，并让它适应不同的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716028968c7c53b0f40386