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

Swift Storyboard -使图标和多行文字水平居中

基础概念

Swift Storyboard 是苹果公司提供的一种可视化界面设计工具,用于 iOS、macOS、watchOS 和 tvOS 应用的界面布局。通过 Storyboard,开发者可以拖放 UI 控件到画布上,并通过 Auto Layout 和 Size Classes 来管理控件的布局。

相关优势

  1. 可视化设计:直观的拖放界面,便于快速布局。
  2. Auto Layout:自动布局系统,支持不同屏幕尺寸和设备方向。
  3. 代码复用:通过 Segue 连接多个 ViewController,减少重复代码。
  4. 协作开发:多个开发者可以同时在一个 Storyboard 上工作。

类型

  • Single View Application:单视图应用,只有一个主视图。
  • Tabbed Application:标签页应用,多个视图通过标签页切换。
  • Navigation-Based Application:导航应用,通过导航控制器管理多个视图。

应用场景

  • iOS 应用的界面布局。
  • macOS、watchOS 和 tvOS 应用的界面设计。

问题:使图标和多行文字水平居中

原因

在 Storyboard 中,图标和多行文字水平居中通常需要使用 Auto Layout 来实现。

解决方法

  1. 添加图标和文字控件
    • 将图标(UIImageView)和文字(UILabel)拖放到 ViewController 的视图中。
  • 设置 Auto Layout
    • 选择图标,点击右下角的约束按钮(Add Constraints),设置以下约束:
      • Leading 和 Trailing 约束到父视图的 Leading 和 Trailing。
      • Top 约束到父视图的 Top。
    • 选择文字控件,设置以下约束:
      • Leading 和 Trailing 约束到父视图的 Leading 和 Trailing。
      • Top 约束到图标的 Bottom。
      • 设置文字控件的 numberOfLines 属性为 0,以支持多行显示。
  • 调整约束优先级(可选):
    • 如果需要文字在图标下方居中,可以调整文字控件的 Vertical Content Hugging Priority 和 Vertical Content Compression Resistance Priority。

示例代码

虽然 Storyboard 是可视化的,但也可以通过代码来设置约束:

代码语言:txt
复制
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let iconImageView = UIImageView(image: UIImage(named: "icon"))
        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(iconImageView)
        
        let textLabel = UILabel()
        textLabel.text = "This is a multi-line text label."
        textLabel.numberOfLines = 0
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textLabel)
        
        NSLayoutConstraint.activate([
            iconImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            iconImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -50),
            
            textLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            textLabel.topAnchor.constraint(equalTo: iconImageView.bottomAnchor, constant: 20),
            textLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

参考链接

通过以上步骤,你可以轻松地在 Swift Storyboard 中实现图标和多行文字的水平居中。

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

相关·内容

css实现按钮文案垂直水平居中,按钮左侧图标相对文字固定距离展示

需求 css实现按钮文案垂直水平居中,按钮左侧图标相对文字固定距离展示,效果如图: 实现 方案一:使用 margin-right 来实现按钮左侧图标的间距 <div class="download-btn....btn-txt { .line-clamp(1); // 限制按钮文字展示一行 line-height: 1; } } } 实现逻辑,将按钮<em>和</em><em>图标</em>放在同一个...div 里,按钮相对右侧文字,加一个 margin-right,按钮<em>和</em><em>图标</em>的div 再整体向左移动左侧<em>图标</em>的宽度<em>和</em>左侧<em>图标</em>右间距,以保证按钮<em>文字水平</em><em>居中</em>展示。...text-align: center; &.left-icon{ right: 10px; } } } } 实现逻辑,左侧<em>图标</em>相对右侧文字定位加间距...,右侧文字右侧再加定位加间距,让<em>文字水平</em><em>居中</em>。

22310

学习纲要:CSS 布局

学习条件 掌握了 CSS 的选择器、属性值。 学习目标 了解 display 属性的可选值有哪些,分别代表什么意思。知道行内元素块级元素的区别。...知道相对定位(position:relative),绝对定位固定定位的区别,以及什么时用。知道 z-index 的用途。 知道如何让文字水平居中。 知道如何让单行多行文字垂直居中。...inline-block 应不应该使用inline-block代替float 如何解决inline-block元素的空白间距 inline-block 布局写法示例 十步图解CSS的position 元素的垂直居中的方法...元素的水平居中的方法 习题 1 用尽可能多的方法实现如下功能 多个元素在一行 多个元素水平居中对齐 多个元素水平两端对齐 多行多个元素水平两端对齐 多个元素在一行,某个元素占据剩余部分 多个元素水平垂直居中对齐...2 用尽可能多的方法实现如下功能 元素内的行内元素的水平居中 单个宽度固定的块级元素的水平居中 单个宽度不固定的块级元素的水平居中 单行文本的垂直居中 高度不固定的元素的垂直居中

53910
  • 【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    5 像素的上外边距 ; 如果要令 10 个坐标 , 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐...padding-top: 5px; } nav a { /* 设置左浮动 宽度为 20% 正好能放下 5 个 */ float: left; width: 20%; /* 文字水平对其...-- 设置多行链接图标 --> <img src="upload/nav1.webp...* 白色字体 */ background-color: #fff; /* 上下 0 像素外边距 左右 50 像素外边距 */ margin: 0 50px; /* 左侧<em>和</em>右侧设置为...padding-top: 5px; } nav a { /* 设置左浮动 宽度为 20% 正好能放下 5 个 */ float: left; width: 20%; /* <em>文字水平</em>对齐

    3.3K40

    将模型添加到场景中 - 在您的环境中显示3D内容

    约束 然后,单击Storyboard编辑器左下角的第四个图标,将新约束添加到场景视图中。定义约束以确保您的用户界面适应不同的屏幕尺寸或设备方向。设置为0的顶部,左,右底部。...为此,请打开“ 助理”编辑器,该图标看起来像两个交织在一起的圆圈。现在,我们并排放置两个分屏,非常适合连接。在右侧,我们有ViewController.swift,在那里我们可以找到该出口的声明。...然后,将鼠标悬停在左侧的“ 对齐”图标上,并在“容器”中选中“水平”以在屏幕中水平居中。 添加按钮功能 我们刚刚在屏幕上添加了按钮,但它根本没有做任何事情。当我们触摸它时,让按钮执行某些操作。...将隐藏显示两种情况,因此隐藏值是布尔值。然后我们声明一个SCNAction用于淡入淡出,淡出用于隐藏淡入显示。这些行动将运行根据是否隐藏是真还是假,一前一后。为此目的使用序列。...如果modelsAreVisible为true且focusSquareLocal.isHidden为false,则表示两者都可见,然后使setHidden为true(与modelsAreVisible值相同

    5.5K20

    一个Web二级菜单的实现(俺新手随便写的)

    position: relative) (2)给二级菜单设置绝对定位(position: absolute),并设置左侧位移(left)的值为一级菜单的宽度,上放位移(top)的值为0 3、一级菜单的文字二级菜单的文字水平居中显示...4、一级菜单的文字二级菜单的文字垂直居中显示 5、一级菜单的每一项二级菜单的每一项有下边框,边框为点线(dotted) 6、一级菜单的最后一项二级菜单的最后一项没有下边框(可以使用li:last-child...,二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框,边框为点线(dotted) 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框,边框为点线(dotted) 4、二级菜单的最后一项没有下边框 效果 <!...200px; height: 28px; line-height: 28px; text-align:center; /*为了使里面的文字居中

    1.4K20

    Swift 项目 - Xib | StoryBoard 多人协作技巧

    实际使用例子参见《纯Swift项目-Xib | StoryBoard 设备适配技巧》[1]或其他StoryBoard文章 StoryBoard Xib 不利于多人协作,git合并代码容易冲突,且难以处理...Storyboard不利图片 在一个Storyboard中,大量的Controller控制器Segue连线彰显着错综复杂的UI关系,使人望而生畏或者难以维护。...Segue 按住Control键连线到想要包含的子控制器,占位视图的实例==子控制器的view(子控制器根视图) 选择Embed连线方式后,子控制器 的尺寸变化成跟占位视图一样的尺寸 这样我们可以将功能图标的...StoryBoard Xib的缺点 在 StoryBoard Xib 拖动设置约束布局很难精确?...StoryBoard 或 Xib上使用约束的技巧,可以参考文章《纯Swift项目-Xib | StoryBoard 设备适配技巧[2]》及 《纯Swift项目-Xib | StoryBoard 约束使用技巧

    2.1K20

    盒子模型(Box Model)「建议收藏」

    盒子模型有元素的内容、边框(border)、内边距(padding)、外边距(margin)组成。...margin就是控制盒子盒子之间的距离 块级盒子水平居中 可以让一个块级盒子实现水平居中必须: 盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto, 常见的写法,以下下三种都可以...- margin-left: auto; margin-right: auto; - margin: auto; - margin: 0 auto; 文字居中和盒子居中区别 盒子内的文字水平居中是...text-align: center, 而且还可以让 行内元素行内块居中对齐 块级盒子水平居中 左右margin 改为 auto 插入图片背景图片区别 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型...padding margin 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position 清除元素的默认内外边距 * { padding

    67720

    一键替换Key Mac软件的制作教程第一篇

    Language选择Swift,我们选中Use Storyboard. 点击Next保存在我们Github项目在本地的主目录。 ?...发现还不是,我们关闭软件再次运行,发现真的居中了。我们再次切换虚线,试一下,估计也是刚才已经编译的结果。 果然如我们想象的样子,看来以后运行之前最好清掉运行中。 ?...这是我们的原型,我们试着在Storyboard里面试着布局出来。我们按照500x400大小制作的原型,我们也设置工程试图大小为500x400。...我们放置一个显示文本的控件放在主视图上面,设置父试图居中。 ? 我们放置一个NSTableView的控件�约束如下。 ? 我们放置NSView紧接着刚才表格的下面。 我们运行一下,看一下效果。 ?...我们发现缺少一个导入导出的功能,我们在菜单File选项新增两个功能导出,导入。 ? 我们在AppDelegate去实现这两个功能。

    87810

    iOS之深入解析Xcode 13正式版发布的40个新特性

    四、资产目录 应用程序现在可以使用其资产目录中的 iOS 应用程序图标资产作为备用应用程序图标; 允许选择适用于所有平台(包括 watchOS)的通用系统颜色。...五、构建系统 .xcconfig 文件现在支持使用 \ 跨多行拆分长列表; HEADER_SEARCH_PATHS = $(SRCROOT)/include \ $(SRCROOT)/include...十三、Interface Builder 现在可以在大纲视图中手动重新排序 Storyboard 场景; macOS 的 Storyboard XIB 使用 UINIbEncoder 进行编译,以减少文件大小并提高运行时性能...应用程序扩展或主应用程序)以及 TestFlight 或 App Store 的发布历史记录过滤 Energy 报告列表; Xcode Organizer 中的新 Scroll Hitch Goals 使分析应用程序版本的滚动体验变得容易...13 包括重新设计的 Swift 代码完成功能,可最大限度地提高可靠性性能,尤其是在项目源代码中存在结构逻辑不一致的情况下。

    8.8K40

    网页设计基础知识汇总——超链接

    地图链接:usemap、ismap 2、表格标签: 作用:显示数据表;对文本图形进行布局 ......:用来设置表格头,文字通常粗体居中显示 属性:align:水平对齐方式,取值为left(左对齐)、center(居中对齐)、right(右对齐)。...valign:垂直对齐方式,取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。...跨越多行:在或标签符里利用rowspan属性,并在其后写上想要跨越的列数。 div标签: 可定义文档中的分区或节(division/section)。...div标签属性: align:div内部文字水平对齐方式,取值为left(左对齐)、center(居中对齐)、right(右对齐)、justify (两端对齐) 。

    3.3K30

    譯文: Adaptive Layout Tutorial in iOS 11: Getting Started

    以下為譯文: Update 6/20/17: 本教程由József Vesza更新至iOS 11,Xcode 9,Swift 4。原始教程由Sam Davies撰寫。...現在storyboard可以用於iPadsiPhones。不再需要保持每個設備storyboard彼此同步——一個無聊的、充滿坑的過程。 打開Xcode,選擇File\New\Project…....Product Name設置為AdaptiveWeather,Language選Swift。所有復選框都無需勾選,然後點擊Next: ?...上面添加的兩個約束,確保了image view 距頂部有固定的間距,並且從左到右居中。現在需要設置的是image viewtext container view的間距。...選擇最上面的label,利用AlignAdd New Constraints菜單來將label水平居中,並將頂部間距設置為10(離最近的視圖間距是10),如下: ? ?

    70230

    iOS 9 Storyboard 教程(二上)介绍Segue静态单元格(static cell)

    .在控制器里创建一个unwind方法,可以返回到上一个控制器. 3.在storyboard中连接方法对象....最后,切换回Main.storyboard ,然后分别连接Cancel按钮Dnoe按钮的方法.按住ctrl并用鼠标拖拽到视图控制器的Exit对象,然后松开鼠标,弹出一个菜单,对应名称选择,如下图:...静态单元格(static cell) 当你完成这个部分的时候,Add Player控制器看上去下图差不多: 这是一个分组的table view,但是你不需要为这个表格创建一个数据源.你可以在storyboard...使这成为可能的的特性被称为静态单元格(static cells)....你可以点击Xcode的助理编辑器(Assistant Editor),之后将text fieldPlayerDetailsViewController做一个连线.在storyboard里,从工具栏里打开

    3.3K10
    领券