首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

三个水平按钮,它们之间有一个很小的边距,使用ConstraintLayout

ConstraintLayout 是一种灵活的布局方式,用于在 Android 应用中创建复杂的用户界面。它可以用来创建三个水平按钮之间有边距的布局。

ConstraintLayout 是一种相对布局,它可以通过在视图之间创建约束关系来定位和调整视图的位置和大小。这些约束可以指定视图相对于其他视图或父布局的位置,也可以指定视图的最小和最大大小。

使用 ConstraintLayout 创建三个水平按钮之间有边距的布局,可以按照以下步骤进行:

  1. 导入 ConstraintLayout 库:首先,在项目的 build.gradle 文件中添加 ConstraintLayout 依赖。
代码语言:txt
复制
implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
  1. 布局文件中添加 ConstraintLayout:在你的布局文件中,使用 ConstraintLayout 作为根布局。
代码语言:txt
复制
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 添加你的按钮视图 -->

</androidx.constraintlayout.widget.ConstraintLayout>
  1. 添加约束关系:为每个按钮视图添加约束关系,以实现它们之间的边距。
代码语言:txt
复制
<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_bias="0.5"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 2"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_bias="0.5"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 3"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_bias="0.5"/>

在上述代码中,我们为每个按钮视图添加了 layout_constraintStart_toStartOflayout_constraintEnd_toStartOflayout_constraintStart_toEndOflayout_constraintEnd_toEndOf 等约束属性。这些属性指定了按钮视图在水平方向上相对于父布局或其他按钮视图的位置。

这样,我们就创建了一个使用 ConstraintLayout 布局的包含三个水平按钮的界面,并为它们之间指定了边距。

腾讯云相关产品:在这个布局中,腾讯云没有特定的产品与之对应。然而,腾讯云提供了一系列云计算服务,包括云主机、云存储、云数据库等,可以作为后台支持来存储和处理应用程序的数据。

你可以参考腾讯云官方文档来了解更多关于腾讯云的产品和服务:腾讯云产品文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入浅出,官方文档看ConstraintLayout

相对定位 相对定位是在ConstraintLayout中创建布局的最基本构建块,也就是一个控件相对于另一个控件进行定位,可以从横向、纵向添加约束关系,用到的边分别有: 横向:Left、Right...、Start、End 纵向:Top、Bottom、Baseline(文本底部的基准线) 通常是一条边向另一条边添加约束,就像下面按钮B要定位在按钮A的右边一样: ?...这种情况代码实现是这样的: ? 这样系统就会知道按钮B的左侧被约束在按钮A的右侧,这里的约束可以理解为边的对齐。 ?...居中和倾向 居中 在相对定位一小节,我们了解了两个控件之间添加约束,现在来看看一个控件和父布局(ConstraintLayout)建立约束。...例如,一个Chain中包含两个使用MATCH_CONSTRAINT的元素,第一个元素使用的权重为2,第二个元素使用的权重为1,那么被第一个元素占用的空间是第二个元素的2倍。

98340

【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码 及 布局分析 | 链头设置 | 间距设置 | 风格设置 | 权重设置 )

; 与此同时 , 另外一个方向上的 约束行为 不受 Chains 影响 , 两个方向的约束是独立的 ; 2.分组共享空间 : Chains 提供了一个类似于 分组的功能 , 其 包含了多个组件 , 这些组件共享...; 4.Chains 约束方向 : 使用前需要限定一个方向 , 水平方向 , 或者 垂直方向 , 一组组件共享 该方向上的空间 ; ---- 2....水平方向的 Chains ( 链 ) ; 2.具体创建方法 : 选中 一组 组件 , 然后 右键 选择 Chains -> Create Horizontal Chain , 即 创建了一个 水平方向的...最右侧 是 普通的约束 , 中间 和 两侧的元素 是 使用 链 连接起来 的 ; ( 3 ) 链创建后 生成的 代码 链创建完毕后自动生成的代码 : 之后 逐个 控件分析 其生成的代码 ; <?...控件 ; ---- ( 2 ) 链 间距 链 的 间距 : 1.设置边距 : 链 中的控件 , 如果设置了 链 的 某个方向上的边距 , 边距效果会体现出来 , 2.空间计算 : 在 CHAIN_SPREAD

3.7K20
  • 带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

    使用百分比指定按钮的宽度,以便在保持设计效果的同时适应可用空间。...在 1.1 版本中,我们已经修复了链条的一些问题,并使它们能够处理更多的视图。您可以通过在两边添加约束来生成一个链条。例如在下面这个动画中,每个视图之间都有一个约束。 ?...在约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...这些优化点作为一个单独的通道运行,并尝试减少布局视图所需的约束数量。 总的来说,它们是通过在布局中寻找常量并简化它们来运作的。...有一个名为 layout_optimizationLevel 的新标签,用于配置优化级别。

    1.7K20

    【约束布局】ConstraintSet 约束集 ( 简介 | 约束属性集合 | 约束集初始化 | 约束集应用到布局中 | 关键帧动画 | TransitionManager 使用 )

    , 其表示 约束布局 ( ConstraintLayout ) 中 所有的组件 的 约束条件 , 尺寸 , 边距 , 等 约束属性 ; ② 约束集 ConstraintSet 封装内容 : 约束集中封装了..., 边距 , 位置 , 旋转 , 缩放 , 等所有布局类型通用的这些属性 ; ② 应用 约束集所有属性 : void applyTo(ConstraintLayout constraintLayout...sceneRoot ) 方法生成并执行动画 ; ② 初始帧 与 目的帧 : 该方法 使用 默认的转换方式 , 创建一个动画 , 动画是基于一个场景 ViewGroup 进行生成的 , 初始场景是 初始帧..., 转换后的新场景是 目的帧 ; ③ 过渡帧 : TransitionManager 会自动生成中间的多个过渡帧 , 其中的 初始帧 和 目的帧 是关键帧 , 过渡帧 是根据两个关键帧之间的改变自动生成的..., 缩放 , 等属性 , 可以使用关键帧动画生成过渡帧 ; ③ 不适配属性 : 组件的 颜色 , 透明度 , 等属性 , 无法使用关键帧动画生成过渡帧 ; VIII .

    3.2K10

    Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?

    在 clickable 前后各有一个 padding,前者就是设置的外边距,后者就是内边距。所以,在 Modifier 中设置 padding 的次序很重要。 2....,这里图片加载库使用的是 Coil,使用 Kotlin 协程写的一个图片加载库,感兴趣的可以看看。...在实现更大的布局以及有许多复杂对齐要求以及布局嵌套过深的场景下,ConstraintLayout 用起来更加顺手。...:1.0.0-alpha07" 在 Compose 中使用 ConstraintLayout 有几点需要注意的: ConstraintLayout 中的子元素是通过 createRefs() 或 createRef...() 方法初始化声明的,并且每个子元素都会关联一个ConstraintLayout 中的 Composable 组件; 子元素之间的约束关系是通过 Modifier.constrainAs() 的 Lambda

    3.3K31

    例说 Constraint Layout:初探

    增加了新属性,功能强大,编写便捷 从编写布局文件的思考方式来看,ConstraintLayout 同 RelativeLayout 很相似,从根布局容器到子 View,都按照它们之间的相互关系——即 constraints...再譬如:RL 只能把某个 View 作为一个整体,限制它相对父容器或其他兄弟 View 某一边的位置;而 CL 可以规定一个 View 的任意一边或中心、甚至是文字的基线相对于父容器或其他兄弟任意边、中心...如果说有哪个最上层的布局是每个人每次写 XML 布局文件时都应该首先考虑使用的,那它一定是 ConstraintLayout。...工具栏 提供了可以用于配置布局外观和属性的按钮。最左上角的三个就是用于切换下面的设计编辑区展示哪些视图的。...此约束布局在手机上的样子 造成位置偏移的根本原因是:每一个 View 都至少需要有 2 个约束(Constraints),一个竖直方向的和一个水平方向的,来确定它的位置。

    2.1K10

    VV-安卓布局总汇篇

    脱出来的控件毕竟是IDE的智商,一个控件属性非常多,可读性不怎样,所以在此总结一下安卓的布局 插播一段感悟:我经常思考工具与使用者间的关系: 用工具和会用工具之差异:良庖岁更刀,割也;族庖月更刀...布局边界.png 2.布局的过渡绘制分析: 也在开发者选项里,不过不是切换按钮,里面有选项,一般选第二个,如果绿色色弱选第三个(还挺贴心) ?...边距.png ---- 二、ConstraintLayout 约束布局 大学时学solidworks(3D软件)时便对约束有很深的印象,约束可以实现复杂结构的关联 1.定位属性 AndroidStudio...ConstraintLayout定位属性一览.png ? ConstraintLayout样例.png ---- 2.边距属性 ?...可以看出ConstraintLayout可以减少布局的层次,减少过渡绘制的次数 一个0.65的竖直参考线,三个图标形成链,顶底对齐父控件 ?

    72340

    Android新特性介绍,ConstraintLayout完全解析

    开始 下面我们开始用边学边练的方式来进行学习,首先打开你的Android Studio,并新建一个ConstraintLayoutTest项目。...其实这个需求很常见,比如说在应用的登录界面,都会有一个登录按钮和一个注册按钮,不管它们是水平居中也好还是垂直居中也好,但肯定都是两个按钮共同居中的。...然后我们希望让这两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp,那么就需要先添加一个垂直方向上的Guideline,如下图所示。 ? 我来对上图中的操作进行一下解释。...接下来我们开始实现让两个按钮在水平方向上居中显示,并距离底部64dp的功能,如下图所示。 ?...然后给注册按钮的左边向Guideline添加约束,注册按钮的下面向登录按钮的下面添加约束。这样就实现了让两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp的功能了。

    1.9K70

    项目需求讨论 — ConstraintLayout 详细使用教程

    我们怎么来确定它们的位置?比如我们红色的矩形A,我们是不是告诉它:你的左边靠着外面界面的左边,你的顶边靠着外面界面的顶边(然后是不是A就处在现在这个位置了)。...那如果我这时候是三个边约束或者四个边都约束了呢,比如: ConstraintLayout ...> 的一边对齐,而是相同直线上的二个边都被约束了。所以按钮无法紧靠着左边的或者右边的其中一个边界,所以这时候,这个按钮就会居于二个约束边界的中间位置。如下图所示: ?...---- 链(Chains) 链在单个轴(水平或垂直)中提供类似组的行为。 创建一个链: 如果一组小部件通过双向连接链接在一起,则认为它们是一个链,如下图所示,是一个具有二个控件的最小的链: ?...指引可以是水平的也可以是垂直的: 垂直指南的宽度为零,它们的ConstraintLayout父项的高度为零 水平指南的高度为零,其ConstraintLayout父项的宽度为零 定位准则有三种不同的方式

    1.7K20

    还在用Android正经布局来写页面吗?

    2、设置margin边距 边距,和传统的布局是一样的用法,但是这里要注意的是,必须要设置自己的相对位置(先要指定自己在容器中的位置,可以是相对容器的,也可以是相对某个控件的),如果不设置的话,那么设置...margin是无效的,大家可以试试,在一个ConstraintLayout布局中放一个按钮,除了边距之外什么都不设置,这样是没有效果的,因为你没有在布局中给它设置相对位置。...3、隐藏空间设置边距 ConstraintLayout中有以下多种这样的属性: layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft...平常我们写标题栏的时候应该都遇到过右边放两个按钮的情况,而且是可以控制显示隐藏的,当最右边的按钮隐藏之后,左边的按钮也要距离右边有一个边距,这种情况下我们就可以使用上面这些属性来配置布局。...7、设置宽高比例 在使用百分比布局时,有两种形式可以设置: layout_constraintDimensionRatio,给宽或者高其中一个设置为0dp,然后设置该属性是一个比例,宽和高的比(相对那个已知长度的

    1.3K30

    【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )

    , 就会变成一个点 , 其 50dip 的边距也会消失 如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效 --> 一个点 , 其 50dip 的边距也会消失 如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效 --> 一个点 , 其 50dip 的边距也会消失 如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效 --> 一个点 , 其 50dip 的边距也会消失 如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效 --> 一个点 , 其 50dip 的边距也会消失 如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效 --> <Button

    1.7K30

    深入浅出,官方文档看ConstraintLayout

    相对定位 相对定位是在ConstraintLayout中创建布局的最基本构建块,也就是一个控件相对于另一个控件进行定位,可以从横向、纵向添加约束关系,用到的边分别有: 横向:Left、Right、Start...、End 纵向:Top、Bottom、Baseline(文本底部的基准线) 通常是一条边向另一条边添加约束,就像下面按钮B要定位在按钮A的右边一样: ?...app:layout_constraintLeft_toRightOf="@+id/buttonA" /> 这样系统就会知道按钮B的左侧被约束在按钮A的右侧,这里的约束可以理解为边的对齐。 ?...一般情况下,GONG控件是不可见的,且不再是布局的一部分,但是在布局计算上,ConstraintLayout与传统布局有一个很重要的区别: 传统布局下,GONE控件的尺寸会被认为是0(当做点来处理) 在...例如,一个Chain中包含两个使用MATCH_CONSTRAINT的元素,第一个元素使用的权重为2,第二个元素使用的权重为1,那么被第一个元素占用的空间是第二个元素的2倍。

    98930

    带你领略 ConstraintLayout 1.1 的新功能

    使用百分比指定按钮的宽度,以便在保持设计效果的同时适应可用空间。...在 1.1 版本中,我们已经修复了链条的一些问题,并使它们能够处理更多的视图。您可以通过在两边添加约束来生成一个链条。例如在下面这个动画中,每个视图之间都有一个约束。 ?...在约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...这些优化点作为一个单独的通道运行,并尝试减少布局视图所需的约束数量。 总的来说,它们是通过在布局中寻找常量并简化它们来运作的。...有一个名为 layout_optimizationLevel 的新标签,用于配置优化级别。

    1.5K20

    Android-ConstraintLayout详解(下)

    1.Margin属性 正常使用,比如我们让登陆和注册按钮中间有20dp的间距,同正常使用ReleativeLayout的margin没有区别: ? image.png 怎么报红呢?...有一个问题,我的注册按钮和登陆按钮建立了约束,那如果我的登陆按钮隐藏,就会造成注册按钮向左移动,那我想让注册按钮原地不动,怎么办?...属性layout_editor_absoluteX="189dp"就会显示 别问我问什么知道在登陆按钮gone后,注册按钮距左边是189dp。...image.png 有没有看到效果图中登陆和注册按钮字体的下方有一个白线关联了约束 3....我们直接代码,我的目的是在布局底部的左右两边各放一个Imageview,第一部先创建一个placeholder的文件夹,和平时创建一样,内容如下: ?

    2.1K30

    再学一次ConstraintLayout 一些新特性

    平时使用ConstraintLayout,断断续续的,基本都是在自己的小demo里面使用.公司的项目暂时还没有使用.这次公司项目需要大改,我决定用上这个nice的布局.减少嵌套(之前的老代码,实在是嵌套得太深了...image.png 边距和原来是一样的. android:layout_marginStart android:layout_marginEnd android:layout_marginLeft android...image.png Bias(偏向某一边) 上面的水平居中,是使用的与父亲左侧对齐+与父亲右侧对齐. 可以理解为左右的有一种约束力,默认情况下,左右的力度是一样大的,那么view就居中了....image.png 该比率可表示为: 浮点值,表示宽度和高度之间的比率 “宽度:高度”形式的比率 如果两个尺寸都设置为MATCH_CONSTRAINT(0dp),也可以使用比率。...image.png 十三、Guideline 这是一个虚拟视图 Guideline可以创建相对于ConstraintLayout的水平或者垂直准线.

    1.7K40

    一文看懂ConstraintLayout的用法

    在最新的Google Android开发文档中是推荐使用 ConstraintLayout的,下面来看看具体用法。...也可以设置一个不同的边距: layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop...可以使用属性有: layout_constraintCircle : 相对控件的id layout_constraintCircleRadius : 相对控件中心的距离,也就是圆的半径 layout_constraintCircleAngle...当A控件设置 GONE之后,A控件相当于变成了一个点,B控件相对于对A的约束仍然是起作用的。图7的代码示例,A控件设置成了 GONE,当B控件的 margin属性还是有作用的。...设置百分比布局 当 ConstraintLayout 子布局的宽或高设置为0dp时,可以对宽或高设置百分比,例如设置一个按钮的宽是屏幕宽度的30%,那么可以这样处理: ConstraintLayout

    79930

    Infer Constraints,Autoconnect,ConstraintLayout拖拽使用教程

    (高度填满约束区同理) 注意: 在上面的动图中,我们看到在button的四周其实还会有一个白色边距,这个边距是创建约束时默认的margin 值-- 8dp ,我们前面已经说过,约束区不包括margin...看下图: 如上图,当我们将光标挪到 properties 面板中方形区域的表示margin的数字上时,数字就变成了一个输入框和一个下拉按钮,点击下拉按钮会有预设的margin值,都是8 的倍数;也可以直接从输入框中输入我们想要的...具体如下图: 水平链条的创建 注意事项: 只有水平排列的view才能通过 center horizontally 创建水平链条(垂直链条同理) 在创建水平链条式,多个view之间的位置可以有高低偏差...链条图标如下: 链条图标 4、链条使用的注意事项 一个view在同一时刻既可以是水平链条中的一部分,也可以是垂直链条中的一部分,这个属性能让我们更灵活的创建出一个Grid栅格界面 多个view的位置大致在同一个水平轴或者垂直轴的时候...在上图中,第三个被添加的button虽然是在开启 AutoConnect之后添加的,但是并没有创建任何约束 使用AutoConnect为View创建约束的时候,并不能保证同时在水平和垂直方向上都创建约束

    14410

    Android Notes|细数「八大布局」那些事儿

    这些约束允许一个 View 基于某个 View 进行定位,同样我们可以在水平方向以及垂直方向进行约束 View: 水平轴: 左,右,起点和终点 垂直轴: 顶部,底部和文本基线 如下,实现将 B 按钮定位在...layout_constraintEnd_toStartOf 当前 View 终点对标目标 View 起点 layout_constraintEnd_toEndOf 当前 View 终点对标目标 View 终点 2.边距...当前 View 距离目标 View 右侧间距 android:layout_marginBottom 当前 View 距离目标 View 底部间距 3.目标 View 隐藏时,当前 View 边距...Margin 为 50dp,在 A 按钮隐藏状态下,B 按钮距离 A 的边距变为 30dp: <?...绘制(Draw) 系统执行的一个自上而下的遍历,对于视图树中的每个对象,都会创建一个 Canvas 对象,已将绘图命令发送 GPU。

    1.9K00

    未来布局之星——ConstraintLayout

    添加约束演示 可以看到,按钮控件有四个方向的约束,如下图所示,按钮的上、下、左、右边上各有一个小圆圈,鼠标可拖动小圆圈到ConstraintLayout,与其添加约束。 ?...除了居中,约束还可以设置控件两边到边界之间的距离比例,通过在右侧属性面板中,拖动水平和垂直方向的进度条来调整两边距离的比例。 ?...如下图所示,在调整按钮宽度后,将两个按钮的左右两边添加约束,然后将下方按钮的上边与上方按钮的下边添加约束,拖动下方的按钮,可设置两个按钮之间的外边距。 ?...删除当且界面的所有约束 Guidelines 学完基本的依赖操作,来看一下ConstraintLayout的进阶用法。这里有一个需求,要求将两个控件合在一起,实现水平居中。...拖动Guidelines Autoconnect 或许因为我们是第一次接触ConstraintLayout,所以感觉添加约束的操作很有趣,但是在项目中,当控件数量比较多时,每个控件的每条边都要一个一个添加约束

    1.9K20
    领券