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

如何水平对齐两个UILabel (固定宽度和可变宽度)

水平对齐两个UILabel(固定宽度和可变宽度)可以通过以下步骤实现:

  1. 创建两个UILabel对象,一个用于固定宽度,另一个用于可变宽度。
  2. 设置固定宽度的UILabel的frame或约束,确保它具有所需的宽度。
  3. 设置可变宽度的UILabel的frame或约束,使其与固定宽度的UILabel水平对齐,并且与其相邻。
  4. 使用Auto Layout或者手动计算的方式,根据内容动态调整可变宽度的UILabel的宽度。
    • 如果使用Auto Layout,可以设置UILabel的约束,使其与固定宽度的UILabel具有相同的leading和trailing约束,并且设置宽度约束的优先级较低(例如,设置为750)。
    • 如果手动计算,可以使用NSString的sizeWithAttributes:方法计算UILabel的内容所需的宽度,并将其应用于可变宽度的UILabel的frame或约束。

以下是一个示例代码片段,展示了如何使用Auto Layout实现水平对齐两个UILabel:

代码语言:txt
复制
// 创建固定宽度的UILabel
let fixedWidthLabel = UILabel()
fixedWidthLabel.text = "固定宽度"
fixedWidthLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(fixedWidthLabel)

// 创建可变宽度的UILabel
let variableWidthLabel = UILabel()
variableWidthLabel.text = "可变宽度"
variableWidthLabel.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(variableWidthLabel)

// 设置固定宽度的UILabel的约束
fixedWidthLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
fixedWidthLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
fixedWidthLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

// 设置可变宽度的UILabel的约束
variableWidthLabel.leadingAnchor.constraint(equalTo: fixedWidthLabel.trailingAnchor, constant: 20).isActive = true
variableWidthLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
variableWidthLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
variableWidthLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)

在这个示例中,我们创建了一个固定宽度为100的UILabel和一个可变宽度的UILabel。通过设置它们的约束,我们确保它们水平对齐,并且可变宽度的UILabel会根据内容自动调整宽度。

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

相关·内容

Autolayout

缺乏必要的约束, 比如 只约束了宽度高度, 没有约束具体的位置 两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110 代码实现Autolayout 代码实现Autolayout...在没有Autolayout之前,UILabel的文字内容总是居中显示,导致顶部底部会有一大片空缺区域 ?...有Autolayout之后,UILabel的bounds默认会自动包住所有的文字内容,顶部底部不再会有空缺区域 ?...UILabel实现包裹内容 设置宽度约束为 <= 固定值 设置位置约束 不用去设置高度约束 基于Autolayout的动画 在修改了约束之后,只要执行下面代码,就能做动画效果 [UIView animateWithDuration...view的右边间距为30; make.bottom.equalTo(blueView.mas_bottom);//蓝色view的底部对齐 make.height.equalTo

92560

开源UI界面布局框架MyLayout1.9发布

其他的值就是一个固定宽度值。...再设想一个场景:某个视图的右边位置希望跟另外两个视图中最靠右的那个位置对齐,换句话说就是视图的右边位置是另外两个视图右边位置的最大值。...举例来说:假如一个横向的水平线性布局的宽度是120,里面的三个子视图A,B,C的宽度间距分别为:A左间距20,A宽度30, B左间距10,B宽度60, C左间距20,C宽度40。...就比如下面的这个界面: 流式布局的行对齐自定义 为了支持行内对齐停靠自定义处理,流式布局提供了一个新的属性: /** 单独为某一行定制的水平和垂直停靠对齐属性,默认情况下布局视图的gravityarrangedGravity...这样整个布局体系中水平线性布局、相对布局、垂直流式布局、垂直浮动布局、弹性布局都可以实现行内基线对齐的能力了。 9.布局动画的支持扩展 动画的适当使用会增强用户的体验效果。

1.7K10
  • iOS---设置控件的内容模式

    容易混淆的内容摆放属性: 1. textAligment : 文字的水平方向的对齐方式 取值 NSTextAlignmentLeft = 0, // 左对齐 NSTextAlignmentCenter...= 1, // 居中对齐 NSTextAlignmentRight = 2, // 右对齐 哪些控件有这个属性 :一般能够显示文字的控件都有这个属性 UITextField UILabel UITextView...哪些控件有这个属性 : 继承自UIControl的控件或者UIControl本身 UIControl UIButton UITextField 3. contentHorizontalAlignment : 内容的水平方向的对齐方式...伸缩至适应整个UIImageView(图片的内容不能超出UIImageView的尺寸范围) UIViewContentModeScaleAspectFit, // 按照图片原来的宽高比进行伸缩, 伸缩至 图片的宽度...UIImageView的宽度一样 或者 图片的高度UIImageView的高度一样 UIViewContentModeScaleAspectFill, // 后面的所有情况, 都会按照图片的原来尺寸显示

    912120

    css display属性的值及用法_css clear作用

    ,当然也可以自己设置宽度高度。...justify-content: 属性定义了项目在主轴上的对齐方式。 align-items: 属性定义项目在交叉轴上如何对齐。...copy过来的,有兴趣的同学,可以到阮一峰老师的博客深入阅读 http://www.ruanyifeng.com/blo… http://www.ruanyifeng.com/blo… 实例:实现一个固定宽度但内容可变的列表...目前我有一个需求,有一个列表页,左侧固定,右侧固定,总宽度固定,但是左侧的内容可能会增加,右侧的内容也可能会增加,要求平时一行展示,增加的时候两行展示,左侧两行,右侧还是一行,并且都居中。...还有两个值:inline-axis(真正的默认值) block-axis,但是它们分别映射到水平和垂直方向。

    2.4K10

    鸿蒙应用开发-初见:ArkUI

    两部分按照space-between布局上面的标题描述作为一个整体,里面拆分成Column的两个组件下面价格可以直接使用系统组件TextReactNative<View style={{ borderRadius...(Row/Column)线性布局的子元素在线性方向上(水平方向垂直方向)依次排列线性布局容器包括 Row] Column 。...:子元素在水平方向左对齐HorizontalAlign.Center:子元素在水平方向居中对齐HorizontalAlign.End:子元素在水平方向右对齐。...Column相反的方向开始排布主轴为水平方向的Flex容器示意图主轴对齐方式通过justifyContent参数设置在主轴方向的对齐方式,Row、Column的主轴对齐方式行为一样 交叉轴对齐方式可以通过...rowsTemplatecolumnsTemplate属性值是一个由多个空格'数字+fr'间隔拼接的字符串,fr的个数即网格布局的行或列数,fr前面的数值大小,用于计算该行或列在网格布局宽度上的占比

    20210

    iOS-屏幕适配实现(AutoLayout)

    375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行) 黄色箭头,代表约束警告,表示当前控件在xib中呈现的位置或者尺寸程序运行后实际呈现的效果不一样,导致约束警告的原因往往是没有更新控件的约束...对于有层次关系的两个 view 之间的约束关系,添加到层次较高的父 view 上 自身的宽高等约束,添加到自身视图上 特殊控件的约束 UILabel默认内容的显示方式是垂直居中的...原因在于,UILabel是根据内容自动调整宽度高度,如果没有内容,那么宽度高度就是0,导致UILabel无法显示。...AutoLayout用法 XIB中设置AutoLayout 多个控件对齐处理 多个控件对齐处理 单个控件的处理 单个控件的处理...默认为当前设置方向最近的一个VIew,且没有覆盖遮挡的视图 注意:上下左右的间距控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100

    39110

    在 SwiftUI 中实现视图居中的若干种方法

    那么 HStack、VStack 会在明确了所有固定尺寸子视图的需求尺寸后,将所剩的可用尺寸( HStack、VStack 的父视图给他们的建议尺寸 - 固定尺寸子视图的需求尺寸 )平均分配( 在优先级相同的情况下...,当文本较长时,会超过 Color 的宽度}上方代码的布局逻辑是:Color 的尺寸为 300 x 60 ( 不关心 ZStack 给出的建议尺寸 )ZStack 的尺寸为 Color Text 两者的最大宽度...x 最大高度,该尺寸是一个可变尺寸( 取决于 Text 文本的长度 )当 ZStack 给出的建议宽度大于 300 时,Text 的可利用宽度将超过 Color 的宽度因此会出现两种可能的错误状态:当文本较长时...,Text 会超过 Color 的宽度由于合成视图具备可变尺寸特性,VStack、HStack 在为其添加 spacing 时将可能出现异常 ( 下图中 spacing 的分配不均匀。...万变不离其宗,掌握了 SwiftUI 的布局原理,无论需求如何变化都可轻松应对。

    6.7K40

    swift下autolayout的实现笔记

    metrics: nil, views: ["v1":v1])) constraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定...,参数定义一般如下: H:Expression 表示水平或者垂直(V)方向上相对于SuperView的位置 options:字典类型的值;这里的值一般在系统定义的一个enum里面选取 metrics:...nil ,参数类型为NSDictionary,从外部传入 views:就是上面所加入到NSDictionary中的绑定的元素 表达式规则 |: 表示父视图 -: 表示距离 >= :表示视图间距、宽度高度必须大于或等于某个值...<= :表示视图间距、宽度高度必须小宇或等于某个值 == :表示视图间距、宽度或者高度必须等于某个值 比如我们要把上面创建的label设置为距离父视图左右都是10,那么表达式就是 "H:|-10...-[v1]-10-|" 我们要让他高40,距离父视图顶部为10 "V:|-10-[v1(==40)]" 如果我们再创建V2,V3两个元素,让他们等宽排列在V1的下面 "H:|-1-[v2(v3)]-[v3

    88680

    MyLayout&TangramKit 的重大升级!

    AutoLayout的尺寸自适应 AutoLayout中有两种类型的尺寸自适应:一类是以UILabelUITextView为代表视图的尺寸自适应,这类视图中的宽度高度有时候需要根据自身内容来确定自己的宽度高度...当一个视图有自己的固有内容尺寸时,就不需要再为视图设置宽度或者高度约束。这也就是为什么一般情况下不对UILabel视图设置宽度高度约束时系统也能正常完成布局。...如果不需要水平滚动则改为将容器视图的宽度等于UIScrollView视图的宽度。通过这样的设置后UIScrollView视图的contentSize将得到自动的计算。...因此如果想使用布局视图的尺寸自适应功能,那么在将布局视图的尺寸设置为wrap后,就可以像使用UILabel那样不用去设置布局视图的宽度约束高度约束了。比如有两个兄弟视图A,B。...您可以在这个DEMO中看到如何实现父视图的尺寸兄弟视图的尺寸位置如何依赖尺寸自适应的布局视图的代码。

    2.1K20

    【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

    顶部 固定定位元素消失 ; 首先 实现顶部的提示条 , 该提示条的宽度肯定是 100% , 网页布局宽度 = 设备屏幕宽度 = 本提示条宽度 ; 如果不能确定具体的元素宽度 , 可以参考现有网站的实现方式...) { /* 右侧的 立即打开 红色按钮盒子 */ width: 25%; background-color: #F63515; } 5、设置图像宽度 关闭按钮 LOGO 按钮...包含两个图片 , 要为图片设置宽度 , 以及对齐方式 ; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置 顶部 / 底部 / 中部 对齐都可以实现图像居中 ; .app.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */

    2K10

    前端CSS Flex布局8大重难点知识,收藏起来吧

    Flex 实现两栏布局 (左固定,右自适应); Flex 实现三栏布局 (左右固定,中间自适应); Flex 实现元素水平垂直居中; flex 怎么实现盒子 1 在最左边,2 、3 在最右边; 如何解决...时 ,给子项加上 margin: auto; 可实现在垂直方向居中 4、flex 怎么实现盒子 1 在最左边,2 、3 在最右边 在父容器.container 中构建两个子项 .left .right...(.right 不要加宽度) 给父容器加上以下属性,使元素.left .right 两端对齐 justify-content: space-between;// 两端对齐 display: flex...; // 弹性布局 在.right 中构建两个子元素.item1 .item2 5、如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题?...解决方案:如果我们每一行显示的个数为 n,那我们可以最后一行子项的后面加上 n-2 个 span 元素,span 元素的宽度其它子项元素宽度一样,但不用设置高度。

    1.7K10

    17个场景,带你入门CSS布局

    又如这样的布局:两个元素在一行,左侧元素固定宽200px,右侧元素撑满剩余空间。固定宽200px,撑满剩余空间是大小。两个元素在一行是位置。 下面,我们从大小位置两个方面,结合场景来看CSS布局。...空间包含水平空间垂直空间。...文字的水平对齐,居中对齐,右对齐。...必须设置 */ margin-left: auto; margin-right: auto; 场景11 多个元素的水平两端对齐 用 Flex 布局可以实现多个元素的水平两端对齐。...一个固定宽度元素的水平居中,只需设置宽度左右margin值为auto。 Flex布局是目前主流的布局技术。多个元素占一行(或列)或多行(或列),居中对齐,居右对齐,弹性的宽度或高度。

    2.6K20

    iOS UILabe及UIFont用法总结 原

    初始化一个UILabel对象,并初始化大小 UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 100, 100)...]; 设置显示的文字 label.text=@"123"; 字体相关的一个类,字号大小默认17 @property(nonatomic,retain) UIFont*font;  //7.0之后可用 ...    label.font=[UIFont preferredFontForTextStyle:UIFontTextStyleCaption2]; //说实话,没看出什么太大的差别 //设置字体字体大小...   //中心对齐    NSTextAlignmentCenter    = 1,    //右边沿对齐    NSTextAlignmentRight     = 2,    //最后一行自然对齐...默认是NO @property(nonatomic) BOOL adjustsFontSizeToFitWidth; 字符适应宽度:不赞成使用 @property(nonatomic) BOOL adjustsLetterSpacingToFitWidth

    1K30

    学习纲要:CSS 布局

    学习条件 掌握了 CSS 的选择器、属性值。 学习目标 了解 display 属性的可选值有哪些,分别代表什么意思。知道行内元素块级元素的区别。...知道如何清除浮动。 知道相对定位(position:relative),绝对定位固定定位的区别,以及什么时用。知道 z-index 的用途。 知道如何让文字水平居中。...知道如何让单行多行文字垂直居中。...多个元素水平居中对齐 多个元素水平两端对齐 多行多个元素水平两端对齐 多个元素在一行,某个元素占据剩余部分 多个元素水平垂直居中对齐 上面说的元素,都是可以设置宽高的。...2 用尽可能多的方法实现如下功能 元素内的行内元素的水平居中 单个宽度固定的块级元素的水平居中 单个宽度固定的块级元素的水平居中 单行文本的垂直居中 高度不固定的元素的垂直居中

    53610

    div内图片和文字水平垂直居中「建议收藏」

    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?...例如如下css代码:height:3em; line-height:3em; …… 显示结果如下图: 单行文本垂直居中对齐-鑫空间-鑫生活 ② 多行文字 如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢...透明图片背景定位实现图片水平垂直居中 核心HTML代码为: <img src=".....需要注意的: 1.img外容器<em>宽度</em>要大于要显示的图片的最大<em>宽度</em>+1像素; 2.img外容器的字体大小设为0px,也可以不设,但是<em>两个</em>img标签要连着写,避免空格; 以下是核心的一些代码: HTML...这<em>两个</em>图片分别vertical-align:middle,就实现了要显示的图片与这个拉伸的透明图片的居中<em>对齐</em>了,由于透明图片是透明的,不可见的,<em>宽度</em>也只有1像素<em>宽度</em>也为0,所以看上去就是要显示的图片相对于容器垂直居中了

    3.6K21
    领券