Material Design 是 Google 推出的设计语言，它强调直观、实用和美观，是现代web应用、移动应用的重要设计基准。Material Design 中，Toolbar 是一个重要的UI组件，经常用于各种页面的导航和操作。
但是，在实际开发中，很多人会遇到 Toolbar 被拉伸到全屏的问题，而且这种情况在不同设备上呈现的效果可能还不一样。如果您正好也遇到了这个问题，本文将为您介绍一些解决方案。
1. 原因分析
为什么 Toolbar 会在某些设备上被拉伸到全屏呢？这是因为在 Android 平台上，Toolbar 默认会遵循系统规则调整高度，根据不同的设备会自动扩展高度，使其与系统栏高度匹配。这就导致了有些设备上 Toolbar 呈现了全屏效果。
2. 解决方案
2.1 使用主题样式
解决 Toolbar 全屏的问题有多种方式，其中一种方法是设置主题样式。我们可以在样式文件（styles.xml）中设置 AppTheme 主题，并定义 Toolbar 高度，这样就能避免问题的发生。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Define the toolbar height -->
<item name="android:toolbarStyle">@style/MyToolbar</item>
</style>
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:height">64dp</item>
</style>这里设置了一个名为 MyToolbar 的样式，将它作为 Toolbar 的 Style 属性值，同时指定了高度。但是，需要注意的是，这种方法只适用于静态 Toolbar，如果您的 Toolbar 是动态加载生成的，它的高度可能还是会发生改变。
2.2 动态计算高度
另外一种解决方法是动态计算 Toolbar 的高度。我们可以在 Activity 的 onCreate 方法中获取到 Toolbar 对象，然后根据屏幕尺寸来计算 Toolbar 的高度，最后进行设置。
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ---------------------------
-----------------------------
----------------------
-
------- ---- --------------------- -
-- --- --- ------ ------
--- ------------ - ------------------------------------------------
-- --------- --- ------- ------- ---- -- --- ------- ------
--- ------------- - ----- --- - --------------------------------------------
-- ------------- -- ---- -
-- --- ----- -------- --- --- ------- ------ -- ----
------------- - ----- --- - --------------------------------------------
- ---- -- ------------- -- ---- -
-- --- ------ -------- --- --- ------- ------ -- ----
------------- - ----- --- - --------------------------------------------
- ---- -
-- --- ------ -------- --- --- ------- ------ -- ----
------------- - ----- --- - --------------------------------------------
-
-- --- --- ------- ------
-------------------------------- - --------------
-
-这里我们根据屏幕尺寸来计算 Toolbar 的高度，然后将其设置到 Toolbar 对象中。需要注意的是，这里我们也只是针对静态 Toolbar 进行了处理，如果您的 Toolbar 是动态生成的，计算 Toolbar 高度的过程也需要相应地修改。
2.3 使用代码设置高度
另外一种方法是，使用代码在运行时动态设置 Toolbar 的高度。我们可以使用 ViewPager 或 CoordinatorLayout 来容纳 Toolbar，并在代码中控制其高度，这样就能保证 Toolbar 在不同设备上显示的高度一致。
-- -------------------- ---- -------
----------------------------------------------------
---
---------------------------------
------------------------------------------------
---
------------------------------------
---------------------------------------------
--------------------
-----------------------------------------------------------
---
---------------------------------------------------
----------------------------------
---
----------------------------- --
-------------------------------------------------------------
--------------------------------------------------
---- ---- ------- ---- ---
------------------------------------------------------在这个布局中，我们使用了 CoordinatorLayout 和 AppBarLayout 来包含 Toolbar。然后，在代码中，我们可以使用如下的方式来设置 Toolbar 的高度：
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams(); params.height = 150; toolbar.setLayoutParams(params);
以上是一些解决 Toolbar 全屏问题的方案，可以根据您的具体情况来选择适合您的方式。希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cdb8f1e46428fe9e76a840
