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

如何在连续间隔的约束布局中居中两个文本视图?

在连续间隔的约束布局中居中两个文本视图,可以使用以下步骤:

  1. 创建两个文本视图,并将它们添加到布局中。
  2. 使用约束布局将第一个文本视图与父视图的左边缘对齐,并设置适当的间距。
  3. 使用约束布局将第二个文本视图与父视图的右边缘对齐,并设置适当的间距。
  4. 使用约束布局将第一个文本视图的右边缘与第二个文本视图的左边缘对齐,并设置适当的间距。
  5. 使用约束布局将第一个文本视图的垂直中心与父视图的垂直中心对齐。
  6. 使用约束布局将第二个文本视图的垂直中心与父视图的垂直中心对齐。

这样,两个文本视图就会在连续间隔的约束布局中居中显示。

以下是一个示例代码,使用Swift语言和iOS的Auto Layout来实现上述布局:

代码语言:txt
复制
// 创建第一个文本视图
let firstLabel = UILabel()
firstLabel.text = "First Label"
firstLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(firstLabel)

// 创建第二个文本视图
let secondLabel = UILabel()
secondLabel.text = "Second Label"
secondLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(secondLabel)

// 设置第一个文本视图的约束
NSLayoutConstraint.activate([
    firstLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    firstLabel.trailingAnchor.constraint(equalTo: secondLabel.leadingAnchor, constant: -20),
    firstLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

// 设置第二个文本视图的约束
NSLayoutConstraint.activate([
    secondLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    secondLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

这个布局会将两个文本视图在水平方向上等间距分布,并在垂直方向上居中显示。你可以根据实际需求调整间距和其他约束。

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

相关·内容

UIButton实现各种图文结合效果以及原理

两个视图;而有的人则不会用UIButton来实现图文结合功能。...图片在左,文字在右,整体居中,设置间距 这种方式是按钮默认图文布局方式,因为要调整图片和文本间距,所以只需要文本右移padding/2而图片左移padding/2值就可以了。...图片保持居中,而文字左右居中且顶部距离按钮顶部 这种方式要求图片在按钮居中,而文字则要求左右居中而垂直方向位置则是距离按钮顶部间隔值。...图片在右,文字在左,距离按钮两边边距 在这种方式,图片和文本都是垂直居中对齐,这部分是不需要调整,而文本左边则需要由原来titleRect.origin.x移动到左边padding位置,而图片左边则需要由原来...padding是调整布局时整个按钮和图文间隔

2.8K10

iOS 关于Interface Building 一些小技巧

UIStackView StackView 是iOS9以后才有的,主要解决了组件排列布局复杂问题,高效快速。 AutoLayout布局是不是遇到过一个均分排列布局,还要隐藏显示其中一个。...Fill Spacing:该属性会保持子视图宽高,所有子视图中间间隔保持一致。 Fill Center: 该属性是控制所有子视图中心之间距离保持一致。...约束:三个Button等宽等高,均匀分布到屏幕,关键点是Tab3约束 优先级作用简单总结一下:一个元素可以同时存在两个相同作用约束,优先级必须有先后,当其中一个失效,另一个就会使用,这样当我们删除相关元素...应用场景 最常见简单问题,如果我们需要在一行放两个Label,Label宽度自适应。这样就会报错,因为无法确定哪一个Label宽度撑开优先级高。 演示Demo: 两个Label约束如下: ?...下面介绍下如何在Sb复用XIb 文件: 接上文例子,我们想在Sb中加上Xib view需要如下步骤, step 1:绑定Xib 文件 File's owner Class ?

1.7K31

iOS开源界面布局库终于破3000star

后来在iOS6.0以后,苹果公司推出了一种新界面布局方案AutoLayout,这种方法主旨是通过相对约束设置进行布局来减少代码硬编码编写,从而达到多设备适配以及简化布局能力。...于是就开始着手写了我布局第一个版本,现在我都还保留着这个类实现和声明: //用于线性布局视图属性,描述离兄弟视图间隔距离,以及在父视图比重。...@property(nonatomic, assign, getter =isAutoAdjustSize) BOOL autoAdjustSize; //子视图是否在指定方向居中。...而且我本人还会一直热心为你解答任何在使用过程问题。 既然使用一个库那么总是应该有优缺点,首先布局优点是: 性能高,因为内部实现是基于frame所以性能是AutoLayout5倍左右。...需要设置约束少,不需要像AutoLayout那样无论是位置和尺寸都需要明确通过设置约束来指定。有些时候可能只需要一两个属性就可以把所有子视图位置和尺寸都设置完成。

1.8K40

制作一个类似苹果VFL(Visual Format Language)格式化语言来描述类似UIStackView那种布局思路,并解析生成页面

AssembleView(组装视图)和PartView(零件视图) 在设计格式化语言之前需要对布局做个统一思想进行管理,在看了WWDC里关于UIStackView介绍后感觉任何复杂布局都能够通过这样一种组合排布再组合排布思路特别适合用格式化语言来描述...于是我想出两个视图概念。...一个是AssembleView组合视图,专门用于对其PartView子视图进行排列,比如说是水平排列还是垂直排列,PartView是按照居中对齐还是居左等对齐方式,各个PartView之间间隔是多少。...解析格式化语言 解析过程第一步采用扫描scanner程序将字符串按照分析符号表将字符流序列收集到有意义单元。 第二步将这些单元逐个归类到对应类别。...PartView属性设置完成后会在STMPartView这个类先决定对应视图控件,并将STMPartMaker里属性都设置上。

93120

初窥Masonry

于是,一个第三方框架Masonry就自然而然进入了视线,Masonry是一个轻量级布局框架,拥有自己描述语法,采用更优雅链式语法来封装自动布局,简洁明了,具有高可读性。...这里要注意一点就是Masonry能够添加AutoLayout一共有三个函数。...Autolayout不能同时存在两条针对于同一对象约束 否则会报错 mas_updateConstraints 针对上面的情况 会更新在block中出现约束 不会导致出现两个相同约束情况...让两个高度为150view垂直居中且等宽等间隔排列 间隔为10(自动计算其宽度) int padding1 = 10; UIView *view1 = [[UIView alloc...150View垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度) [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

60640

未来布局之星——ConstraintLayout

切换视图 点击菜单栏Show Design、Show Blueprint和Show Design + Blueprint按钮可以对操作视图进行切换,如下图所示: ?...Button控件约束 将按钮下边圆圈拖至ConstraintLayout底部,则按钮移动至底部;再将按钮上边圆圈拖动至ConstraintLayout顶部,垂直方向上有两个约束按钮控件就会实现垂直居中...除了居中约束还可以设置控件两边到边界之间距离比例,通过在右侧属性面板,拖动水平和垂直方向进度条来调整两边距离比例。 ?...删除当且界面的所有约束 Guidelines 学完基本依赖操作,来看一下ConstraintLayout进阶用法。这里有一个需求,要求将两个控件合在一起,实现水平居中。...如下图,创建一个垂直方向参考线,将其切换至百分比模式,拖动到50%位置,再将两个控件在左右两侧分别与Guidelines添加约束,然后两个控件底边相互添加约束即可实现合并居中效果。

1.9K20

Android开发RelativeLayout相对布局

Android开发RelativeLayout相对布局         RelativeLayout布局是Android界面布局应用最广也最强大一种布局,其不仅十分灵活,可以解决开发各种界面布局需求...在iOS开发,Autolayout技术总是被赞不绝口,RelativeLayout布局就是Andriod系统Autolayout,其又被称为相对布局。        ...所谓相对布局,是指其坐标的确定并不是开发者写死,而是有系统自动计算出来,那么系统如何计算每个视图控件位置呢?...开发者需要为其添加一些规则进行约束,这些规则大致包括2类: 第1类 与父视图之间位置关系规则:         此类规则包括在父视图居中、左对齐、右对齐、上对齐、下对齐等。...例如靠近父视图边缘 public void addRule(int verb) //添加一个规则 这个方法添加规则需要一个参照视图 例如某两个平级视图位置关系 anchor参数为视图id public

1.2K20

iOS界面布局之三——纯代码autoLayout及布局动画

iOS界面布局之三——纯代码autoLayout及布局动画 一、引言         关于界面布局,apple策略已经趋于成熟,autolayout优势在开发也已经展现淋漓尽致。...除了使用storyBoard进行布局约束拖拽,有时我们也需要在代码中进行autolayout布局设置,Masonry库可以方便创建约束属性,实际上,我们也没有必要再使用系统原生代码来创建和设置约束...通过这个对象,我们可以设置类似视图对象之间间距,约束宽高,比例等属性。...,例如,过我要设置view1上边距离父视图上边一定间距,这个view2就是view1视图,如果我要设置view1与另一个视图一定距离,这个view2就是另一个视图。...代表是水平布局还是垂直布局,H代表水平,V表示垂直,|表示父视图边沿,-20-表示距离20px,[]内是要布局摆放视图对象名,()约束尺寸,H下则为宽度,V下则为高度,@后面的数字代表优先级

2.9K30

Android入门教程 | 使用 ConstraintLayout 构建自适应界面

ConstraintLayout 可使用扁平视图层次结构(无嵌套视图组)创建复杂大型布局。...它与 RelativeLayout 相似,其中所有的视图均根据同级视图与父布局之间关系进行布局,但其灵活性要高于 RelativeLayout,并且更易于与 Android Studio 布局编辑器配合使用...约束条件 创建约束条件时,请注意以下规则: 每个视图都必须至少有两个约束条件:一个水平约束条件,一个垂直约束条件。 只能在共用同一平面的约束手柄与定位点之间创建约束条件。...layout_constraintTop_toTopOf="parent" /> 基线对齐 将一个视图文本基线与另一视图文本基线对齐...对某个视图两侧添加约束条件(并且同一维度视图尺寸为“fixed”或者“wrap Content”)时,则该视图两个约束条件之间居中且默认偏差为 50%。

2.2K10

【Android从零单排系列三十四】《Android布局介绍——ConstraintLayout》

前言 小伙伴们,在上文中我们介绍了Android帧布局FrameLayout,本文我们继续盘点介绍Android开发另一个常见布局约束布局ConstraintLayout。...开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界关系,从而精确控制视图布局位置和大小...:在XML文件,你可以通过预览功能(Android Studio布局编辑器)来查看布局效果,并根据需要进行微调和修改。...完善布局:根据设计需求,继续设置其他视图约束条件,以达到期望布局效果。可以使用app:layout_constraint...属性来设置各种约束条件,边界对齐、居中对齐、权重比例等。...开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界关系,从而精确控制视图布局位置和大小

35020

2014-10-25Android学习------布局处理(-)

, 宽高均为包裹父窗体 北京图片设置为:android:background="@drawable/home_page" 布局垂直方式 重心是居中 我们来看看常用设置都有哪些: android...":随着文字栏位不同 而改变这个视图宽度或者高度。...带"layout"属性是指整个控件而言,是与父控件之间关系, layout_gravity 在父控件对齐方式, layout_margin 是级别相同控件之间间隙等等; 不带"layout..." 属性是指控件中文本格式,gravity是指文本对齐方式等等,而其中文本格式又受制约于它控件在父控件属性. 2)线性布局方向设置:android:orientation="";...LinearLayout保持其所包含 widget或者是container之间间隔以及互相对齐(相对一个控件右对齐、中间对齐或者左对齐)。

1.4K40

强大ConstraintLayout:使用ConstraintLayout打造响应式UI

案例1:等分 设计稿标注如下: [设计稿标注] 常规解法 很常见设计样式,通常解法:横向线性布局套上两个竖向线性布局;横向线性布局设为等分两个子线性布局;竖向线性布局设为水平居中。...使用RelativeLayout进行求解,解题思路: 通过设置一个水平居中参照View,用于等分两个区域。 将两个TextView作为一个整体,在布局内垂直居中。...以此参照物为约束条件,构造文本约束,使其在二分之一区域内水平居中。 将垂直方向上文本串成一条线,并打包居中。...常规实现 在做这个需求时候,笔者想来想去思前想后,没有想到如何在布局实现这种动态效果。笔者尝试了LinearLayout、RelativeLayout,都失败了。...虽然情况1、情况2界面能预期展示,但实际上,这个场景下约束关系,并不是我们想要约束关系。

2.9K21

iOS 布局进阶:你真的会用 autolayout 么?

autolayout可以理解为:给界面设定规则,让界面随着数据变化而做出符合规则变化。 本篇文章重在解决自动布局复杂相互约束。...一个View约束确定需要两个东西,一个是位置,一个是大小。在日常开发,我们发现给UILabel、UIImageView、UIButton实例写约束时候,只需要给他们位置,而不需要给大小。...实现:Label距离左边10,纵向居中,距离右边小于等于10 优先级 优先级就是在两个约束冲突时候,优先满足优先级高约束。 example: ?...QQ20170603-095009@2x.png 这两个方法相信大家都不陌生(不管有没有用过),他们派上用场条件是,该视图指定了intrinsicContentSize(固有大小),所以UILabel...拒绝变大优先级使用 当然,这只是一个默认情况(提醒各位,不光是写业务逻辑,写布局也需要考虑极限情况,这样才能写出完美的布局),当A文本变化时候会这样: ?

1.3K50

Autolayout

缺乏必要约束, 比如 只约束了宽度和高度, 没有约束具体位置 两个约束冲突, 比如 1个约束控件宽度为100, 1个约束控件宽度为110 代码实现Autolayout 代码实现Autolayout...view需要遵循以下规则: 1)对于两个同层级view之间约束关系,添加到它们父view上 ?...2)对于两个不同层级view之间约束关系,添加到他们最近共同父view上  ? 3)对于有层次关系两个view之间约束关系,添加到层次较高父view上  ?...在没有Autolayout之前,UILabel文字内容总是居中显示,导致顶部和底部会有一大片空缺区域 ?...(blueView.mas_width);//和蓝色view宽度相等 }]; 制作九宫格样式视图布局 填充一个View控件到父控件,然后隐藏显示。

91760

Flutter 视图布局(一)

在Flutter 实际使用 Row、Column、ListView 这三者都是使用频率较高布局 Widget 。... 主轴上垂直居中对齐 空间分配对齐方式 spaceBetween 左右两极对齐,剩余元素以相同间隔平均分配剩余空间 spaceAround 每个元素以相同左右间隔平均分配剩余空间 spaceEvenly...尝试了多种与文字设定方式配合后,依然没有在最后渲染视图上表现出来 alphabetic、ideographic 两个差异。...,它分为4部分:一张图片,标题+按钮,功能按钮组以及文本块。...只要能够理解这些 widget 那么视图布局还是比较容易实现。 最后总结: 对于布局来说,难点不在于多复杂,而是在于你如何去理解拆分它。

2.6K61

自律给你自由——Android设计布局新姿势

这个界面主要分成下面几个部分: 左侧边栏,包括Palette组件库和Component Tree 中间是布局设计器,包括两部分,左边是视图预览,右边是布局约束 右侧边栏,上面是类似盒子模型边界和大小布局设计器...这里展示,就是左右两个Button直接关系,这实际上就是一个简单相对布局方式,下面我们来看一下具体约束类型。 当我们点击一个控件时候,它显示效果如图所示: ?...基准线约束 基准线约束,使用是『空心圆角矩形』,如图: ? 基准线约束,是让两个带有文本属性组件进行对齐,可以让两个组件文本按照基准线进行对齐。...默认这个按钮就是打开,通过这个,我们可以实现组件约束自动创建,Demo示例如图: ? 这个和PPT里面拖动布局时候,会弹出对齐基准线,然后帮你自动居中这些功能类似。...这个就是最难理解,它表示组件会占用所有的可用空间来适应约束,类似线性布局,设置width=0,weight=1方式。

92110

【Android从零单排系列三十】《Android布局介绍——RelativeLayout》

前言 小伙伴们,在上文中我们介绍了Android常见布局LinearLayout,本文我们继续盘点介绍Android开发另一个常见布局,相对布局RelativeLayout。...对齐方式:RelativeLayout支持多种对齐方式来控制子视图位置,包括与父容器对齐(android:layout_alignParentTop)、与其他视图对齐(android:layout_toRightOf...编程控制:除了在XML布局文件设置属性外,开发者也可以通过编程方式使用RelativeLayout方法来动态地添加和管理子视图,例如使用addView()、setLayoutParams()等方法。...-- 添加其他子视图 --> 在上面的示例,我们创建了一个RelativeLayout容器,并在其中添加了一个按钮和一个文本视图。...android:layout_centerHorizontal="true"         android:layout_marginTop="20dp"/> 这个布局包含了两个按钮

40630

IOS开发系列——Masonry手写Autolayout专题【整理,部分原创】

Autolayout不能同时存在两条针对于同一对象约束 否则会报错 mas_updateConstraints 针对上面的情况 会更新在block中出现约束 不会导致出现两个相同约束情况...(虽然我现在基本都会省略) 1.1.3 [初级] 让两个高度为150view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度) int padding1 = 10; [sv2 mas_makeConstraints...Masonry 在TableCell增加子控件时,无法正常使用Masonry来进行布局,可能是Cell重用引起。...因此进行子视图布局时,用前者容易挂机。...下一个runloop执行,所以如果要在布局完成后顺序执行某些处理(例如开始进行自定义绘制或者异步绘制),最好手动放到main_queue下一个runloop执行,确保布局完成后才开始执行代码。

74210

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

Ctrl+L 当布局为活动视图时,锁定或解锁在内容窗格中选择项目。 Ctrl+Shift+L 当布局为活动视图时,请在内容窗格锁定或解锁该级别上所有项目。...应用当前编辑并转至同一列上一行。 创建注记 用于注记构造工具键盘快捷键 键盘快捷键 操作 注释 Ctrl+W 查找文本 使用最顶层所选要素图层标注表达式或字段值替换文本文本字符串。...约束平行于另一条线段新线段方向。将鼠标悬停在现有线段上,然后按键盘快捷键。释放键将设置约束并闪烁将其约束线段。 E 使线垂直显示。 约束垂直于另一条线段新线段方向。...Ctrl + 单击 以指针位置作为视图中心。 在 2D 环境下,这将使视图居中。在 3D 环境下,照相机会转向中心并显示该位置。 W 在 3D 场景,向上倾斜照相机。 类似于从固定点倾斜照相机。...视图 用于视图键盘快捷键 键盘快捷键 操作 Ctrl+Shift+A 自动布局。 Ctrl+Shift+F 适应窗口大小。 Ctrl+ 加号 (+) 放大模型视图

85120
领券