开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何缩小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参数可以展开和缩小

6.1K3 0

安卓软件开发：用JetpackCompose实现NimReplyAppUI上篇

我全身心投入在 Jetpack Compose 和 Material Design 3（M3）的学习和实践中，这是一个用 Jetpack Compose、M3 和 Kotlin 语言实现了NimReplyApp...这个组件使用了 Jetpack Compose 提供的状态管理和 LazyColumn 展示搜索结果。...用了 M3 提供的 TopAppBar 组件，通过自定义样式和内容。...：这个组件是 M3 提供的顶栏导航组件，用于显示应用的标题、导航图标和操作按钮，根据是否是全屏模式调整标题的对齐方式：当全屏显示时，标题居中对齐，非全屏时左对齐。...标题显示：顶部显示了邮件的 subject，下面显示了邮件的线程（回复数），通过 Column 组合排列标题和子标题。

41814 0

安卓软件开发：使用Jetpack Compose和M3的轮播图和列表App-上篇

一、项目背景这个应用中常见的 UI 需求是轮播图、列表和弹窗，使用 Jetpack Compose 和 M3 的组件，可以快速、高效编码现代化的 UI。...在首页的 HomeScreen 中使用了 LazyRow 来实现横向滚动的轮播图，还展示了如何使用 M3 的组件创建卡片样式的分类项，自定义颜色、样式和阴影效果。...• Icon 和 Text: 使用这些组件来显示图标和文字，简单直观。轻松实现分组列表的标题部分，像音乐应用中的不同分类一样。...• Row: 把文字和图标水平排列，在两端留有一定的间距，视觉上很整齐。...Compose 和 M3 实现了常见的轮播图、列表和弹窗功能，展示了如何高效构建现代化 UI 界面，希望这篇文章帮助大家更好理解 Compose 的强大。

41911 1

原创|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.3K2 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?.

3281 0

安卓软件开发：使用Jetpack Compose实现DrawerMenuApp

在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin语言开发NimDrawaerMenuApp的案例。无论你有没有开发经验，相信这篇文章对你会非常有所帮助。...这个Demo演示利用 Jetpack Compose 和 Material 3 实现一个带有 Drawer 菜单的应用，帮助用户理解工作机制，通过此应用进行页面切换。...，用于多功能的应用App，允许用户在不同页面之间快速切换。...DrawerScreen.Account, DrawerScreen.Subscription, DrawerScreen.AddAccount ) 2.3.1 解释代码定义了DrawerScreen类为每个菜单项设置了标题和图标...五、总结通过这个DrawerMenuAppDemo，展示了如何在Jetpack Compose M3中实现一个带有抽屉菜单的安卓应用，添加更多的菜单项以及对应的页面功能。

4215 0

Refactoring UI

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

7613 0

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

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

4.5K5 0

Qt Designer中的QWidget属性表介绍

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

11K2 0

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

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

3.5K4 0

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

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

1.3K4 0

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

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

4.8K2 0

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

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

5.1K2 0

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

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

2.1K2 0

Android实战经验分享之用Kotlin中的Jetpack Compose构建声明式UI

Jetpack Compose由谷歌推出，作为传统的视图系统（如XML布局和Android View组件）的替代或补充。...下面我们来看看关于Jetpack Compose的核心概念、主题和样式、导航和预览功能：核心概念 1、声明式UI: Jetpack Compose采用了声明式编程范式，允许开发者描述UI的外观和状态...2、 Composable函数: Compose UI是由一系列@Composable注解的Kotlin函数构成的。这些函数描述UI的组成部分，例如按钮、文本、图标等。...Button(onClick = { /* Do something */ }) { Text("Click me") } 3、 Column 和 Row: 分别用于垂直和水平布局。...Compose有自己的导航组件，用于在不同屏幕之间导航。

1711 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.8K3 0

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

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

1.7K1 0

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

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

1211 0

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

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

1931 0

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

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

12K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭