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

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

1.9K20

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

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

1.3K30
  • 深入浅出,官方文档看ConstraintLayout

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

    97840

    深入浅出,官方文档看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倍。

    96530

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

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

    3.2K20

    带你领略 ConstraintLayout 1.1 新功能前言带你领略 ConstraintLayout 1.1 新功能

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

    1.7K20

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

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

    1.7K20

    带你领略 ConstraintLayout 1.1 新功能

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

    1.5K20

    再学一次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 组件可见性 View.GONE 处理 与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )

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

    1.5K30

    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.2K31

    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.8K00

    一文看懂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%,那么可以这样处理: <android.support.constraint.ConstraintLayout

    79430

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

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

    3.2K10

    例说 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竖直参考线,三个图标形成链,顶底对齐父控件 ?

    72040

    Android-ConstraintLayout详解(下)

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

    2.1K30

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

    如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时,用户可以根据它们之间空间大小来决定它们之间关系。...在上面的模型中,一个元素有 margin-bottom,另一个元素有 margin-top,较大元素获胜。 为避免此类问题,建议按照本文使用单向。...以下是解决方案: 设置导航项目的最小宽度 增加水平padding 在分隔符左侧添加一个额外margin 最简单,更好解决方案是第三个解决方案,即添加 margin-left。...-- And so on.. --> 通常,我更喜欢将组件封装起来,并避免给它们增加。由于这个原因,我 grid__item元素,我card组件将位于其中。...处理底部margin 假设以下组件堆叠在一起,每个组件都有底边。 ? 注意最后一个元素有一个空白,这是不正确,因为只能在元素之间

    12K10

    Qt 水平布局 QHBoxLayout

    详见代码: 【代码实现】 注意:我们使用都是自己继承 QWidget 类来创建一个窗口,如果不清楚这个窗口是如何创建,请参考“使用 Qt 构建一个简单窗体程序”。...1/n 比例,按钮 2 占用了 2/n 比例,按钮 3 占用了 3/n 比例,最后一个插入“弹簧”占用了 1/n 比例,此时相当于在一个水平布局中 n = 7,那按钮 1 就是占用 1/7...() 函数来实现: // button1 后面增加一个间隔,长度为50 _layout->addSpacing(50); 【设置 QHBoxLayout 】 上面所有图中我们都可以看出,窗口和控件之间一点点距离...,这个距离我们也可以自己来控制,那就是调用 setMargin() 函数来实现: // 设置 QHBoxLayout 为 0 _layout->setMargin(0); 【设置全局控件之间距离...layout new 出来并设置父窗口,无需后面再调用setLayout()函数 _layout = new QHBoxLayout(this); // 设置 QHBoxLayout

    46730
    领券