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

我如何为我的按钮创建一个约束,这样它就不会弄乱它的大小

为了为按钮创建约束,使其不会改变大小,你可以使用自动布局(Auto Layout)来实现。自动布局是一种用于创建灵活且自适应的用户界面的技术。

在iOS开发中,你可以使用Interface Builder或者代码来创建约束。下面是一些步骤来为按钮创建约束:

  1. 使用Interface Builder:
    • 打开Storyboard或者XIB文件,将按钮拖放到你的视图控制器中。
    • 选择按钮,点击右侧的"Pin"按钮(或者选择"Editor" -> "Pin"菜单)。
    • 在弹出的面板中,取消勾选"Width"和"Height"选项,确保宽度和高度不会改变。
    • 选择"Leading Space to Superview"和"Top Space to Superview"选项,以确保按钮与父视图的左边和顶部有约束。
    • 点击"Add Constraints"按钮来应用约束。
  • 使用代码:
    • 在你的视图控制器的viewDidLoad方法中,创建一个按钮对象并添加到视图中。
    • 设置按钮的translatesAutoresizingMaskIntoConstraints属性为false,以启用自动布局。
    • 创建约束对象,将按钮的左边和顶部与父视图的左边和顶部对齐。
    • 将约束对象添加到按钮的父视图中。

以下是一个示例代码片段,展示了如何使用代码创建约束:

代码语言:txt
复制
override func viewDidLoad() {
    super.viewDidLoad()
    
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("按钮", for: .normal)
    button.backgroundColor = .blue
    view.addSubview(button)
    
    let leadingConstraint = NSLayoutConstraint(item: button, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 20.0)
    let topConstraint = NSLayoutConstraint(item: button, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 20.0)
    
    view.addConstraints([leadingConstraint, topConstraint])
}

这样,按钮就会被约束在父视图的左上角,且不会改变大小。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,你可以参考腾讯云的文档和官方网站来了解他们的云计算产品和解决方案。

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

相关·内容

Figma里这样完成悬浮FAB按钮制作,半小时搞定!

今天我们来做一个FAB按钮,此类按钮在安卓设计中非常常见,一般悬浮在页面右下角,可以快捷打开某个操作。 在本课中,我们重点是智能动画(smart animation)。...003.设计属性 智能动画可以检测任何设计属性变化。我们可以更改任何图层大小、位置、旋转、自动布局属性、约束、填充和描边。我们可以单独使用这些,也可以一起使用,这取决于我们追求效果。...005.创建步骤: 创建并命名 4 个按钮:添加、发表、媒体、语音 我们将从最终状态开始。对于这个组件,我们需要 4 个圆形按钮,每个按钮都有一个图标。一个按钮将是我们按钮,其他将是子菜单按钮。...将所有的状态放在一起 从关闭状态添加按钮到打开状态,反之亦然 8.设置智能动画 在我们交互详细信息窗格中,选择智能动画。选择过渡类型,“缓出并重新加入”。随意弄乱时间。...使用了默认 300 毫秒。 9. 将动作按钮实例添加到框架,设置约束并检查固定位置 现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后,检查固定位置,以在滚动时将其保持在原位。

2.3K20

代码实验室--带你一步步理解使用 ConstraintLayout

选择好后, ImageViewe 出现在布局上, 你可以"约束系统概述"中提到一样点击拖动角以调整图片大小....继续, 从布局中删除 TextView 创建 ImageView 底锚点和容器底部约束 UI 生成器应该看起来是这样 Inspector 显示出控件控件在一个方形区域中间....选择 "Design" 标签 Autoconnect 已经启用 下面我们选择 ImageView 然后拖动到布局中间直到提示线出现, 几秒钟内, 它就被居中了, Autoconnect 介入并创建了与容器上下左右约束...其它空间不会约束于你正在移动控件, 但是你正在移动控件会约束与其它控件. 这是一个重要区别, 因为它意味着自动连接不会修改你当前约束....最终布局应该看来是这样. 一旦约束创建, 你可以修改点击 UI 生成器左上 按钮修改 "virtual device to render with".

2.6K60

6详解AppBar小部件

leading放置在AppBar最左边位置;title并actions出现在右边。...以下代码将 AppBar 高度增加到15. AppBar( elevation: 15, ), 请注意 AppBar 被抬起并且阴影跨越了更大区域。 阴影颜色 你甚至可以弄乱阴影颜色。...工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件,Container和Image。...Flutter 中使用 AppBar 布局 ( leading, title, 和actions) 如何自定义 AppBar 布局和添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色和工具栏设置主题...关于 Flutter AppBar 必须提供所有内容完整演练。希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮 AppBars。

16.3K10

18个您想了解微小但有用macOS功能

在此处,单击右侧面板下方“+”按钮,以打开快捷方式创建器(术语)对话框。 接下来,从“应用程序”下拉菜单中选择Safari 。...4.跳回到搜索结果 在获取上面的屏幕截图时,偶然发现了另一个功能:SnapBack。 当您单击Google之类搜索结果中链接,然后从一个网页跳至下一个网页时,回到您搜索结果是很痛苦,对吧?...如果您熟悉SnapBack功能,则不会适用于任何搜索引擎,但前提是您必须在与搜索结果相同标签中打开链接。...8.强制查找器中大小相等列 像我这样怪胎将对此功能表示感谢。在Finder列视图中,在调整列大小同时按住Option键,您会看到它们均匀地上下缩放。...对于您经常使用其他特殊字符,请在“系统偏好设置”>“键盘”>“文本”下设置文本扩展快捷方式。为卢比符号创建一个。每当我输入rs时,它就会显示出来。并按空格键。

6K30

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

第二种用于删除某一个控件所有约束,选中一个控件,然后左下角会出现一个删除约束图标,点击该图标就能删除当前控件所有约束了,如下所示。 ?...当你选中任意一个控件时候,在右侧Properties区域就会出现很多属性选项,如下图所示。 ? 在这里我们就可以设置当前控件所有属性,文本内容、颜色、点击事件等等。...比如说想让Button宽度充满整个布局,操作如下图所示。 ? 可以看到,我们将Button宽度指定成any size,它就会自动充满整个布局了。...可以看到,我们给登录按钮右边向Guideline添加约束,登录按钮下面向底部添加约束,并拖动按钮距离底部64dp。...然后给注册按钮左边向Guideline添加约束,注册按钮下面向登录按钮下面添加约束这样就实现了让两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp功能了。

1.8K70

Flutter —快速开发IDE快捷方式

只需输入stless即可创建一个无状态小部件,如下所示: 或输入stful创建有状态小部件: 如果您已经创建一个无状态小部件并添加了许多子级,但是却意识到您最终将需要一个State怎么办?...给组件添加Padding 假设您有一个不是容器窗口小部件,因此没有padding属性。您想填充一些内容,但担心会弄乱小部件结构。...使用我们魔术棒,您可以添加填充而不会弄乱任何东西: 只需在需要填充小部件上按Alt + Enter,然后单击“add padding”即可。现在您可以将默认填充修改为所需填充。...当您打开时,看起来像这样: 现在,您可以清楚地看到哪个窗口小部件,它们在用户界面中排列方式以及哪些窗口小部件具有其他子窗口小部件。十分简单!...文章是免费,但是您知道您可以按点赞按钮50次吗?你走得越高,就越激励我为你写更多东西!

2.1K20

都2021年了,为什么想回看5分钟前写代码就这么难

一项研究发现,Java 开发者在写代码时候平均每 6 分钟回溯一次,这意味着他们经常会需要使用 undo 按钮或 Ctrl+z 让代码恢复到之前状态。...Undo 到尽头 对于代码工作来说,撤销和重写按钮总是很有意义设计。但这里会存在一些问题:(1)如果回溯之前状态,进行了新更改,之前状态就会丢失。(2)人们无法看到改前改后状态直接对比。...他们可能会有这样想法:「要把代码弄乱了,在弄乱之前,要用 Ctrl-A 和 Ctrl-V 将它复制到一个标签页中,然后把该窗口放在编辑器旁边,用作参考。」...由于 Henley 可以访问 LabVIEW 编辑器源代码,因此他为 LabVIEW 实验版创建一个带有已启用功能分支。...等到正式上线之后,我们就可以评判一下了。

40120

JavaScript内存管理介绍

每次我们分配一个变量或创建一个函数时,该变量存储会经历以下相同阶段: image.png 分配内存 JS 会为我们处理这个问题:分配我们创建对象所需内存。...所以 JS 不会更改原始值,而是创建一个新值。...这样,当垃圾收集器下次再运行时,它就会释放那 些引用次数为零值所占用内存。 我们看下面的例子。...除了意外地将变量添加到根目录之外,在许多情况下,我们需要这样来使用全局变量,但是一旦不需要时,要记得手动释放了。 释放很简单,把 null 给它就行了。...如果我们项目中有这样代码,很有可能不需要一直运行。 只要setInterval没有被取消,则其中引用对象就不会被垃圾回收。 确保在不再需要时清除

97120

ConstraintLayout_1:可视化拖拽布局

,Android Studio会自动帮我们创建一个布局,如下图所示。...5.gif 第二种用于删除某一个控件所有约束,选中一个控件,然后左下角会出现一个删除约束图标,点击该图标就能删除当前控件所有约束了,如下所示。...比如说想让Button宽度充满整个布局,操作如下图所示。 9.gif 可以看到,我们将Button宽度指定成any size,它就会自动充满整个布局了。...12.gif 可以看到,我们给登录按钮右边向Guideline添加约束,登录按钮下面向底部添加约束,并拖动按钮距离底部64dp。...然后给注册按钮左边向Guideline添加约束,注册按钮下面向登录按钮下面添加约束这样就实现了让两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp功能了。

1.3K20

规范约束条件

要解决这些问题,我们就必须把确实需要约束写出来,这句话说起来简单,其实做起来不太容易。下面就来讲解一下如何正确编写一个规范约束。 零、简述 何为约束?...如果我们不给它指明类型参数,那么它就会默认设置类型参数是 System.Object 类型。我们通过约束来表达对泛型类型类型参数约束要求会营销编译器和使用这个类开发人员。...一、如何规范约束条件 讲解之前我们先来看一个例子,这个例子判断了输入两个值是否相等。...我们在编写泛型类时候,最好在内部编写相互重载多个方法,这样就可以针对不同情况调用不同方法,并且其他开发人员调用起来也不会有过于严谨约束。...形式创建,那么我们才可以使用这三种约束

91710

原来你是这样Flutter

比如Center就向子Widget传递居中约束,当访问到叶节点时候,这时候Widget树上所有的Widget都知道了它们约束,这时候他们就可以根据已有的约束自己确定它们实际要占有的大小跟位置,...我们前面提到过Widget拿到自己约束后会决定自己大小,其实这些约束拿到了之后是给了自己对应RenderObject,它们会根据约束决定Widget在屏幕上真实物理大小。...•特定大小,比如Image对应RenderObject 关于Flutter自带RenderObject就这三点比较重要,一般我们也不会去自定义RenderObject。...可能大家没看我之前文章,有的人还不熟悉Flutter开发,这里先带大家定义一个按钮叫做FancyButton,看完大家就知道Flutter代码怎么写了: class FancyButton extends...这下Flutter再也不会认为没有改变啦,再次运行项目,这下按钮切换同时背景色也会跟着改变了。 好啦,到了这儿,Flutter基本工作流程我们算是搞明白了,怪不得频繁build却不卡顿!

57810

【100 种语言速成】第 6 节:TclTk

如果我们将语言放在类似 unix-shell 尺度上,它会是这样: 传统 Unix shell - 几乎不能用于编写代码 现代 Unix shell - 一些讨厌控制结构,不适合真正编程,但有些人还是强迫...-text “…” -command {…}- 使用给定文本和给定 onclick 命令创建按钮,并将其保存到变量name pack .name- 将小部件放在name窗口中(默认水平居中,在顶部...counter 它们是为了修改全局变量 -incr 否则甚至会创建一个局部变量 我们创建一个标签 --textvariable 参数使其在指定全局变量更改时更新 -command { … }我们创建了一对按钮来调用我们函数...至于你 shell 脚本快速 GUI,Tk 是一个相当糟糕工具包, Electron Adventures 系列中介绍了许多更好工具包。...对于 Tcl/Tk,真的没有看到类似的东西。做了事,然后它就静静地死去,现在几乎被遗忘了。

2.5K40

计算机科学里最大难题:居中显示

苹果没做到: 微软没做到: GitHub 没做到: Valve 没做到: Slack 没做到: Telegram 没做到: 谷歌地图没做到: 说实话,像这样糟糕按钮对齐,不用找就能举出无数例子:...许多公司,无论大小,都未能免于文本居中问题。 行 高 除了字体参数,下一个影响完美居中问题是行高。 行高是一个复杂的话题。...现在,我们什么也对不齐了: 我们也没法设置图标大小。在上面的例子中,所有图标的字体大小和行高都做了同样设置。如你所见,它们大小、边距都不一样,没有哪一个真正地对齐了。...遗憾是,如果你计划替换字体,这不会起作用。 我们将使用 IBM Plex Sans。参数如下: 你在设置font-size时,你设置是 UPM(这个也等于1em)。...相信,只要我们齐心协力,就能找到把一个矩形套在另一个矩形里而又不会弄乱方法。 就个人而言,希望生活在一个 UI 美丽而平衡世界里。相信你也是。最终,一切都是值得

9010

计算机科学里最大难题:居中显示

苹果没做到: 微软没做到: GitHub 没做到: Valve 没做到: Slack 没做到: Telegram 没做到: 谷歌地图没做到: 说实话,像这样糟糕按钮对齐,不用找就能举出无数例子:...许多公司,无论大小,都未能免于文本居中问题。 行 高 除了字体参数,下一个影响完美居中问题是行高。 行高是一个复杂的话题。...现在,我们什么也对不齐了: 我们也没法设置图标大小。在上面的例子中,所有图标的字体大小和行高都做了同样设置。如你所见,它们大小、边距都不一样,没有哪一个真正地对齐了。...遗憾是,如果你计划替换字体,这不会起作用。 我们将使用 IBM Plex Sans。参数如下: 你在设置font-size时,你设置是 UPM(这个也等于1em)。...相信,只要我们齐心协力,就能找到把一个矩形套在另一个矩形里而又不会弄乱方法。 就个人而言,希望生活在一个 UI 美丽而平衡世界里。相信你也是。最终,一切都是值得

8010

CSS 计算属性 calc()完整指南(下)

Firefox DevTools – Rules 如果您需要找出计算值,有一个计算选项卡(在所有浏览器DevTools中,至少在所知道范围内)会向您显示。...用它创建一个.full-bleed 实用工具类:.full-bleed{width:100vw;margin left:calc(50%-50vw);}想calc()在前3个CSS中。...用它来为粘性页脚腾出空间。 用它来设置一些流体字体/动态排版......根据最小值、最大值和视口单位变化率来计算字体大小。不仅仅是字体大小,还有行高。...很喜欢一个方法是有一个 "内容宽度 "自定义属性,然后用它来创建需要间距,比如 margins: .margin { width: calc( (100vw - var(--content-width...)) / 2); } 用它创建一个跨浏览器drop-cap组件。

1.7K20

Flutter原理:三棵重要树(渲染过程、布局约束、应用视图构建等)

这也是 Flutter 框架层做一大优化。下面又来了,Element 作为经理人也很体面,当然不会把活全干完,于是又找了一个 RenderObject 员工来帮做粗重累活。...Elememt 这棵树,持有其对应 Widget 引用,如果他对应 Widget 发生改变,它就会被标记为 dirty Element,于是下一次更新视图时根据这个状态只更新被修改内容,从而达到提升性能效果...Flutter 再将这个 Element 放到元素树上,并持有创建控件引用,如下图: ? 控件会有子树: ? 子控件也会创建相应 Element 被放在元素树上: ?...Flutter 中 Widget 一直在重建,每次重建之后,Element 都会采用相应措施来确定是否对应新控件跟之前引用旧控件是否有所改变,如果没改变则只需要做更新操作,如果前后不同则会重创建...子节点接受到来自父节点约束后,会依据产生自己具体布局信息,父节点规定最小宽度是 500 单位像素,子节点按照这个规则可能定义自己宽度为 500 个像素,或者大于 500 像素任何一个

1.5K40

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

这时候因为不是单纯一边对齐,而是相同直线上二个边都被约束了。所以按钮无法紧靠着左边或者右边其中一个边界,所以这时候,这个按钮就会居于二个约束边界中间位置。如下图所示: ?..., 约束不会限制生成尺寸值。...="wrap_content" android:layout_height="0dp" app:layout_constraintDimensionRatio="1:1" /> 复制代码 这样这个按钮宽和高是一样大小...为了约束一个特定边,可以根据另一个大小来限定宽度或高度: 可以通过在比率前面添加字母W(用于限制宽度)或H(用于限制高度),用逗号分隔来指示哪一边应该受到约束: <Button android:layout_width...---- 链(Chains) 链在单个轴(水平或垂直)中提供类似组行为。 创建一个链: 如果一组小部件通过双向连接链接在一起,则认为它们是一个链,如下图所示,是一个具有二个控件最小链: ?

1.5K20

2022 跳过剧情年度总结

创建点对点(Peer-to-Peer)数据分享和电话会议成为可能......其实,也就是普通得再不能普通一个视频通话罢了孤独,是一种无奈痛苦,很幸运,你我都能彼此在此交流灵魂。...也感谢你分享故事,理解了何为成长,何为付出,何为放弃。...;对于残障人士来说,我们会对这个按钮解释说明:一个可以操作蓝色按钮,点击之后会进入教程页面,下一个按钮为xxx,上一个按钮为xxx图片图片我们不追求花里胡哨动画,冗余复杂功能,仅仅是通过最基本“...知道,这也没错,这确实没什么了不起,因为这只是一个开始作为一位开发者,一位普普通通开发者,做过最高兴事情,莫过于脑中想法成功在物质上实现了,虽然很曲折,但这样曲折更有意义所有的成就,离不开大家共同努力...,它是实力证明,是身份代表看到,就像看到了镜中自己,此时此刻,它就,它被我铭记就足够了一个人,能够在未知艰险探索中,无比艰难条件下,保持前行,并不断突破让热情烈火越燃越高,甚至突破了黑暗

669121
领券