开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何缩小jetpack中导航图标和标题之间的水平间距组成`TopAppBar`？

要缩小Jetpack中导航图标和标题之间的水平间距，可以通过自定义样式来实现。以下是一种可能的解决方案：

首先，在项目的res/values目录下创建一个名为styles.xml的文件（如果已存在，请跳过此步骤）。
在styles.xml文件中添加以下代码：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- 其他样式设置 -->
    <item name="actionBarStyle">@style/CustomActionBarStyle</item>
</style>

<style name="CustomActionBarStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
    <item name="titleTextStyle">@style/CustomTitleTextStyle</item>
</style>

<style name="CustomTitleTextStyle" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="android:layout_marginStart">-8dp</item> <!-- 调整图标和标题之间的水平间距 -->
</style>

在AndroidManifest.xml文件中，将应用的主题设置为AppTheme：

<application
    android:theme="@style/AppTheme">
    <!-- 其他配置 -->
</application>

通过上述步骤，我们定义了一个自定义的样式CustomTitleTextStyle，并将其应用于TopAppBar的标题文本样式中。在这个样式中，我们使用android:layout_marginStart属性来调整图标和标题之间的水平间距。在这个例子中，我们将间距设置为-8dp，可以根据需要进行调整。

请注意，这个解决方案是基于Jetpack Compose的TopAppBar组件。如果你使用的是其他UI框架或库，可能需要使用不同的方法来实现相同的效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景。了解更多信息，请访问腾讯云云服务器。
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理大规模非结构化数据。了解更多信息，请访问腾讯云对象存储。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

compose--初入compose、资源获取、标准控件与布局

官方地址：https://developer.android.google.cn/jetpack/compose/mental-model 我这边也是根据官方文档，对重要的部分和自己的想法进行融合，来介绍什么是...} 其中Modifier后续会详细介绍，举例使用里面的几个参数设置，如使用TextStyle去除首行的顶部行间距： hello!...= null,//文本前的图标 trailingIcon: @Composable (() -> Unit)?...= null,//文本下方的文本 isError: Boolean = false,//是否错误，错误会将label、下划线、下方文本、文本尾的图标的图标染红 visualTransformation...it } ) } 效果： 4.7 ExtendedFloatingActionButton ExtendedFloatingActionButton为悬浮按钮，控制expanded参数可以展开和缩小

5.8K3 0

原创|Android Jetpack Compose 最全上手指南

在这种情况下，我们将应用一个Spacing修改器，该设置将Cloumn与周围的视图产生间距。 4. 如何显示一张图片？...添加间距Spacer 我们看到，图片和文本之间没有间距，传统布局中，我们可以添加Margin属性，设置间距，在Jetpack Compose 中，我们可以使用HeightSpacer()和WidthSpacer...() 来设置垂直和水平间距 HeightSpacer(height = 20.dp) //设置垂直间距20dp WidthSpacer(width = 20.dp) // 设置水平间距20dp 在上面的例子中...，我们来为图片和文本之间添加20dp的间距： @Composable fun NewsStory() { // 获取图片 val image = +imageResource(R.mipmap.header...，标题有6中样式 h1-h6，其实HTML中的样式很像，内容文本有body1和body22中样式。

6.2K2 0

Android Compose开发

Developers 原创：写给初学者的Jetpack Compose教程，基础控件和布局原创：写给初学者的Jetpack Compose教程，Modifier 原创：写给初学者的Jetpack Compose...= 16.dp, vertical = 8.dp), ) { // ... } 如需在列表项之间添加间距，可以使用 Arrangement.spacedBy ()。...以下示例在每个列表项之间添加了 4.dp 的间距： verticalArrangement = Arrangement.spacedBy(4.dp), 性能早期 Lazy Layout 的性能很差，滚动的时候巨卡无比...padding 和 offset 之间的区别在于，向可组合项添加 offset 不会改变其测量结果： @Composable fun ArtistCard(artist: Artist) { Row...它是 Jetpack Compose 中处理异步任务和副作用的重要工具之一 itemData?.

2741 0

Refactoring UI

，以便尽快开始建造实物草图和线框是一次性的用它们来探索你的想法，并在你做出决定后将它们抛在脑后 # 不要设计太多要弄清产品中的每个功能应该如何交互，每个边缘情况应该如何看待，真的很难，尤其是在抽象的情况下...将自己限制在事先定义好的一组有限制的值范围内 # 线性比例尺不起作用创建一个间距和大小系统并不像 "确保所有东西都是 4px 的倍数 "那么简单一个系统要想真正发挥作用，就必须考虑到相对于其他系统的相邻值之间的差值...不过在在实践中却并不完美，会有分数值，并且尺寸过于局限 # 自定义模度该比例尺适用于大多数项目，并且与 "建立间距和尺寸系统 "中推荐的间距和尺寸比例尺非常吻合它的限制足以加快你的决策速度...不过，在一些常见情况下，调整间距可以改善设计 # 紧缩标题如果您想在标题或标题中使用字母间距较宽的族，通常可以减少字母间距，以模仿专用标题族的浓缩外观 .title { letter-spacing...，可以尝试绘制简化版的用户界面，去掉细节，用简单的线条代替小文字 # 不要缩小图标绘制成较大尺寸的图标在缩小后也会显得模糊不清更好的办法是按照目标尺寸重新绘制一个超级简化版的徽标 # 小心用户上传的内容

6123 0

Qt Designer中的QWidget属性表介绍

sizePolicy由四个值组成，分别是水平缩放策略、垂直缩放策略、水平伸缩因子、垂直伸缩因子。...定义，对应取值及含义如下： image.png ③mimimumSize mimimumSize表示部件能被缩小到的最小尺寸，单位为像素，部件在缩小到该尺寸后，就不能再进一步缩小了。...---- 相关取值及含义如下： image.png 输入提示是多种值的组合，多个值之间通过或操作组合。如果几个独占标志被放在一起，则生成的字符集将由指定集的并集组成。...例如，指定ImhNumbersOnly 和ImhUppercaseOnly 将产生一个由数字和大写字母组成的集合。...）调整字形间距，且基本上是英文字符形状的间距，因为英文字符形状都是不规则的，有宽有窄，有的圆乎乎，有的棱角分明，就会导致排列在一起的时候疏密不一致，而kerning可以有效利用字符形状间的间隙，使字形之间的空间更加相似

10.5K2 0

Qt Style Sheet实践（一）：按钮及关联菜单

默认情况下，勾选标记位于组件矩形的左上角。QCheckBox的spacing属性可以用于指定勾选标记和文本内容之间的间距。...对于可选的QGroupBox而言，标题中还会包含一个勾选标记，勾选标记用::indicator来定制，spacing仍然用于设置勾选标记与文本的间距。...QMenuBar 菜单栏组件的spacing属性可指定菜单项之间的间距，单个菜单项还可以通过::item子组件定制风格。但是值得注意的是，由于MAC下菜单栏集成到了系统菜单栏，此时样式表会失去作用。...QRadioButton 同上，::indicator用于定制文本前面的选项框，spacing指定文本与选项框之间的间距。...主要是能理解好QSS中各种属性的作用，其余的工作就是做好布局设计和图片设计。美观大方的界面设计离不开精致的图标设计和合理的布局管理。参考　　1. Qt style sheet reference

4.4K5 0

【总结】移动应用界面设计的尺寸设置及规范

刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？...方法一：在标准基础上（比如xhdpi）开始，然后放大或缩小，以适应到其他尺寸。不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。...方法二：以最高分辨率为基准设计，然后缩小适应到所需的小分辨率上。缺点是，图标等若都最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。...– 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。...– 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。 – 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。

3.2K4 0

为啥你的UI界面感觉乱？这7个常见问题一定要避免

适当的填充和间距可使布局看起来整洁有序，同时使读者更容易阅读和理解信息。 ‍ 在逻辑块周围应设置相同大小的空间（例如，在顶部和底部以及左侧和右侧）。...维护视觉层次结构的一种简单方法是遵循以下简单规则：不同逻辑块之间的填充应大于每个块内标题和文本之间的填充。...如果段落后有副标题，则将其顶部填充为30px（即，段落与子标题顶部之间的间隔为30px），将底部填充为20px（即，子标题底部与段落之间的间隔）将为20px，大于段落之间的间隔）。 ‍...图标观感不佳当您需要通过小符号表达含义或简要说明说明时，图标非常有用。它们还是现代界面的基本组成部分，尤其是在移动设备上。在应用程序中，图标通常等同于按钮。...有些设计师喜欢用免费的图标，这些图标单个看起来都不错，但是一旦放到一起，就不太协调了。那么如何来避免这种混乱呢？ · 线宽-调整大小后，所有图标的线宽应相等。否则，它们不会非常明显。

1.3K4 0

移动应用界面设计的尺寸规范「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？...所以通常会选择折中的方法。方法一：在标准基础上（比如xhdpi）开始，然后放大或缩小，以适应到其他尺寸。不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。...方法二：以最高分辨率为基准设计，然后缩小适应到所需的小分辨率上。缺点是，图标等若都最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。...– 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。...– 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。 – 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。

4.2K2 0

TCloudNumber 字体开源，邀您体验可变字体魔法

TDesign 始终专注于将设计与研发紧密结合，以实现跨框架和跨终端的一致体验。字体是设计体系中不可或缺的组成部分，也是表达个性化的极佳媒介之一。...与此同时，字体技术也在不断发展，那么如何在中文语言环境下创造更具均匀性、扩展性和通用性的字体呢？...较宽松的字符间距可以提高可读性，因为字符之间的间距越大，每个字符形状之间的对比度就越高。对比全部数字加符号的内容，即使是小字号，也由于增加了字母间距而提高了可读性。...混搭系统默认中文和英文情况，也可以保持水平对齐，保证字体阅读的一致性。...尽管字体数量规模有限，但凭借技术与设计的紧密结合，未来将在更多字体应用场景和图标能力迭代升级，除了字重以外也会针对字宽进行可变调整。

1.6K2 0

【软件开发规范七】《Android UI设计规范》

z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。...** 图片上的文字 ** 编辑图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。 ...** 按钮（Buttons） ** 编辑按钮由文字和/或图标组成，文字及图标必须能让人轻易地和点击后展示的内容联系起来。...编辑 ** 卡片布局准则 ** 字体设计正文：14 sp 或 16 sp 标题：24 sp 或更大扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距移动设备上的卡片间距...编辑没有头像、图标等元素时，需要用通栏分隔线编辑图片本身就起到划定区域的作用，相册列表不需要分隔线谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。

5K2 0

腾讯开源超实用的UI轮子库，我是轮子搬运工

QMUIFloatLayout 类似 CSS 里 float: left 的浮动布局，从左到右排列子 View 并自动换行。支持以下特性：控制子 View 之间的垂直/水平间距。...QMUITipDialog 提供一个浮层展示在屏幕中间，提供了以下两种样式：使用 QMUITipDialog.Builder 生成，提供了一个图标和一行文字的样式, 其中图标有 Loading、...设置标题/副标题，且支持设置标题/副标题的水平对齐方式。 QMUITopBarLayout 对 QMUITopBar 的包裹类，并代理了 QMUITopBar 的方法。...QMUIBlockSpaceSpan 通过在段落之间设置该 span，实现段间距的效果。...快速设置状态栏为黑色或白色字体图标（支持 4.4 以上版本 MIUI 和 Flyme，以及 6.0 以上版本的其他 Android）。

4.7K3 0

为什么margin、padding和其他间距技术应使用 px 单位

绝对长度单位总是相同的，而不是基于页面中的其他内容相对长度单位单位可以改变，并基于字体和视口如何确定何时使用绝对或相对 CSS 单位？...增加文字大小设置调整浏览器窗口大小放大或缩小页面使用移动设备阅读在所有这些情况下，用户最关心的是什么？是内容，还是内容之间的间距？这两点中哪一点对理解网页至关重要？...由于水平空间有限，文字必须换行到下一行，对此你无能为力，但你也不想让页面变得更高，因为你的垂直间距会随着文字大小的增加而增加。...我们可以看到这一点：导航标题现在非常高，几乎占据了窗口高度的一半，还遮住了下一部分内容。双栏行动号召部分仍然是两栏，没有为所有文字留出太多的水平空间。...在两栏的 "行动呼吁 "中，我调整了文字组周围和之间的填充，使其不再缩放，从而为显示文字提供了更多的水平空间。此外，我还将两栏的 "行动呼吁 "改为一栏，以降低文本部分的高度。

891 0

Android Compose 新闻App（五）Room复杂数据、AlertDialog弹窗、页面导航

一、使用 Room 引用复杂数据 Room提供了基本类型和装箱类型之间的转换功能，但不允许实体之间的对象引用。...现在就比之前要简洁了，下面再运行一下效果和之前一样。二、疫情风险区展示又到了愉快的Compose UI环节了，这里我们将要展示目前的高风险区和中风险区的个数。...好了，页面也创建好了，我们该使用导航了，也就是Navigation，Android的Jetpack的Navigation组件是支持Compose使用的，因此我们需要添加一个依赖库。...不过，，，但是好像和我想的不太一样，这样改无疑很蠢，那么如果要在EpidemicNewsListPage中导航到RiskZoneDetailsPage呢？...下面可以运行一下了： ① 导航时传递参数现在我们已经可以导航到详情页面了，那么我们需要传递两个参数，一个是标题，一个是列表。从易到难，我们先传递标题过去。

1.6K1 0

Jetpack-Compose 学习笔记（二）—— Compose 布局你学会了么？

内容颜色，根据 contentColor 属性给这个平面的内容指定一个首选色值，这个色值会被文本和图标组件以及点击态作为默认色值使用。当然可以被子节点设置的色值覆盖。...它提供了诸如 TopAppBar、BottomAppBar、FloatingActionButton 和 Drawer 等常见的组件。...Text(text = "Thanks for watching this") } } 图 6 可以看出，Scaffold 真的为我们提供了好多组件，这里仅仅举了 TopAppBar 和 BottomNavigation...还可以看到这里图片与文案之间的间隔是用 Spacer 来实现的，当然也可以在 Text 中的 Modifier 属性设置 padding 来实现。 4....() 方法初始化声明的，并且每个子元素都会关联一个ConstraintLayout 中的 Composable 组件；子元素之间的约束关系是通过 Modifier.constrainAs() 的 Lambda

2.9K3 1

图形编辑器开发：网格与网格吸附

网格，指的是渲染在画布上的，按照特定间距绘制垂直和水平直线，所构成的网格。作用是让用户可以较直观地观察到图形的距离和大小关系，以及实现网格吸附。...网格间距通常会是可配置的。 gripOn：网格是否开启； gridSpacingX：网格水平方向间距。 gridSpacingY：网格垂直方向间距。...大网格和小网格有时候我们觉得连续的网格，不好肉眼测量。此时我们可以引入大网格。有点类似刻度尺，没隔几个小的刻度，会绘制一个长一点的大刻度。即每 n x n 个小格子组成一个大格子。...因为密度的降低，此时可以考虑让点跟随画布缩放而缩放（还有一个前提是画布不能放得很大）。网格密度过大当缩小画布时，网格会跟随缩小。当缩放得非常小时，网格线就会显得非常密集。...通常吸附间距应该和网格渲染间距相同，这样吸附到网格上的界面就比较符合直觉。但实际上是可以不一样的。尤其是网格密度过大时如果使用了动态改变网格间距的方案。结尾网格比较重要的大概就是这些。

1531 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

但是，当处理具有许多细节和子元素的组件时，这会变得越来越复杂。 margin 外部间距它用于增加元素之间的间距。...例如，一个绝对定位的元素需要从其父元素的左边缘和上边缘定位 16px。考虑以下示例，带有图标的卡片，其图标应与其父对象的左上边缘隔开。....c-user { margin-left: 8px; } 网格系统中的间距：Flexbox 网格是间隔最常用的情况之一。考虑以下示例： ? 间距应在列和行之间。...: 16px; } 标题被旋转了90度，在它和图像之间应该有一个空白区。...在水平布局和垂直布局中，它将如何工作？我们是否应该根据其父项的显示类型（Flex，Grid）对它们进行样式设置让我们一一解决上述问题。调整间隔组件的大小可以创建一个接受不同变化和设置的间隔。

11.9K1 0

对比excel，用python绘制华夫饼图

一般来说，华夫饼图是由100个格子组成，一个格子代表1%。用不同颜色的格子区分不同的分类数据，以展示各部分在整体中的占比。 3.1....标题、标签与图例标题参数title，标签参数labels，图例参数legend。这些参数含义和matplotlib里一致，具体可以参考matplotlib对应介绍。...Font Awesome Icons 按样式和图标名称定位图标。不同的样式包含不同的图标集。因此，所有图标的 icon_style 可能并不相同。...间距参数interval_ratio_x和interval_ratio_y控制格子之间的水平和垂直距离。...interval_ratio_x是格子之间的水平距离与格子宽度interval_ratio_y的比率，是格子之间的垂直距离与格子高度的比率。

1.2K4 0

iOS 9人机界面指南（一）下篇：UI设计基础 - 腾讯ISUX

自动调整文字的粗细，字母间距以及行高的能力。为语义上有区别的文本模块指定不同的文本样式，比如正文、脚注或者标题。...为了突出某些文字或者为了在内容块之间建立视觉关联，你可以依赖由Dynamic Type支持的语义化样式，如标题、正文，你也可以指定字体权重，如细体或者半粗。...在最小的三种文本尺寸中，字间距相对较大；而在最大的三中文本尺寸中，字间距相对紧凑。标题和内容的样式使用相同的字体尺寸，同时，为了区分标题与内容样式，标题样式使用更重的值。...应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事，以及与用户建立情感连接的机会。最好的应用图标是独特的，整洁的，打动人心的，让人印象深刻的。...同一屏幕中图标的数量过多可能会让整个应用看起来难以理解。使用图标还是文字还取决于屏幕方向是横向还是纵向，因为水平视图下通常会拥有更多的空间，可以承载更多的文字。

1.7K2 1

深入学习下 CSS 间距相关的知识

但是，在处理具有大量细节和子元素的组件时，这可能会变得越来越复杂。 Margin- 外部间距它用于在一个元素和另一个元素之间添加间距。...标题组件在这种情况下，标题具有徽标、导航和用户配置文件。你能猜出在 CSS 中应该如何设置间距吗？好吧，让我为你添加一个骨架模型。...以下是我想到的一些问题：间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。...考虑来自 styled-system.com 的以下内容：我们在标题和部分之间有一个间隔。... 虽然这有点不同，在标题、logo和导航之间创建自动间距的分隔符。

13.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭