Tag: 布局

自动布局和UICollectionViewCells：动态大小调整和动画第1部分

确保像上面的我的一样设置您的应用程序。 删除Main.storyboard并不是完全必需的，但是由于您没有使用它，因此最好将其删除。 现在，由于我们以编程方式进行了所有操作，因此需要对AppDelegate的didFinishLaunchingWithOptions函数进行一些更改。 将以下代码添加到该函数： 窗口= UIWindow（框架：UIScreen.main.bounds） 让 firstScreen = ViewController（） 让 navController = UINavigationController（rootViewController：firstScreen） 自我 .window？.rootViewController = navController 自我 .window？.makeKeyAndVisible（） 上面的大多数代码应该是不言自明的。 我们将窗口设置为具有整个屏幕定义的框架的窗口，创建UIViewController和UINavigationController，然后将UIViewController设置为UINavigationController的根视图控制器。 然后，使UINavigationController成为窗口的根视图控制器。 该makeKeyAndVisible函数使窗口可见，并将窗口移到最前面。 在运行应用程序之前，将此行（或类似内容）添加到ViewController文件的viewDidLoad函数中： 自我 .view.backgroundColor = UIColor.red 运行该应用程序，现在您的屏幕应该是红色（或您选择的任何颜色），顶部带有一个栏。 我们将继续进行讨论，即UINavigationController。 现在该开始UICollectionView了，这需要一些代码才能开始。 我将复制以下代码，并从中摘录： 自动布局最重要的行是collectionView.translatesAutoresizingMaskIntoConstraints = false 如果没有这一行，Swift将尝试为您将UICollectionView的Autoresizing Mask转换为Auto Layout约束，而我们希望成为决定视图约束的对象。 在ViewController文件的顶部，您将要确保正在实现UICollectionViewDataSource，UICollectionViewDelegate和UICollectionViewDelegateFlowLayout协议。 当Xcode询问您是否要添加协议存根时，请继续添加它们。 您的ViewController文件应如下所示： 此时，您应该有一些占位符代码和一个错误，阻止您在设备上运行该应用程序。

使用ScrollView和AutoLayout

在使用UILabel，UIImageView等构建简单的UI时，使用AutoLayout非常有趣，但是当需要实现ScrollView时，我可以向您保证不是！ 当您想实现ScrollView时，您必须知道的第一件事是，即使对于Apple工程师来说，这也非常困难。 因此，首先我们必须在视图控制器中放置一个ScrollView。 现在，我们开始配置ScrollView和子级的约束。 设置ScrollView约束 首先，我们必须将ScrollView调整为父级。 因此，我们单击“添加新约束”按钮，然后将其填充为： 现在我们将新的View放入ScrollView内，这将成为我们内容的容器。 设置内容视图约束 现在，第二步是在ScrollView中设置Content视图的约束。 首先，我们必须定义内容视图的宽度，然后父级（ScrollView）将调整为该宽度。 为此，我们必须在带有父视图的容器视图中设置“等宽”约束。 我们按Control +拖动以查看，然后单击“等宽” 现在，我们向内容视图添加新的约束以将其调整为ScrollView。 我们必须这样查看。 向内容视图添加内容 现在，我们只需将UILabel放到Content View内。 标签中的约束为： 和魔术发生！ 我们已经安装了ScrollView，没有任何问题。 重要 如果您忘记在“内容视图”中添加内容，则必须将视图水平和垂直居中放置，否则Xcode将通知您警报。

通过布局锚点自动布局

通过视觉格式语言添加约束非常容易和有趣。 但是一旦我们有了复杂的观点，这将成为一项艰巨的任务。 如果事情没有按预期进行并且需要调试约束，则将变得更加困难。 或者，如果视图是由其他人创建的，并且您需要在一个已经有很多标签及其对应的文本字段的大表格中的另一个文本字段中滑动。 营救布置锚点 布局锚是Apple在iOS 9中引入的一种机制。这是一种添加可读性和简洁性的约束的全新方法。 根据类的定义： NSLayoutAnchor： 一个工厂类，用于使用流畅的API创建布局约束对象。 使用这些约束可以通过“自动布局”以编程方式定义布局。 与其直接创建NSLayoutConstraint对象，不如从要约束的UIView，NSView或UILayoutGuide对象开始，然后选择该对象的锚点属性之一。 布局锚是在UIView，NSView或UILayoutGuide上定义的属性。 在本文中，我们将集中讨论UIView上定义的Layout Anchor属性。 在UIView上总共定义了12个Layout Anchor属性。 它们可以分为三种类型。 水平 ， 垂直和尺寸 。 从NSLayoutAnchor类派生的每种类型对应三个独立的类。 NSLayoutXAxisAnchor ， NSLayoutYAxisAnchor和NSLayoutDimension 。 水平布局锚 这些是锚属性，用于添加水平约束或沿视图X轴的约束。 这些是NSLayoutXAxisAnchor类的实例。 这些包含以下锚点： 领先的锚 尾锚 左锚 右锚 Center-X锚 在这里，所有约束都是不言自明的。 值得指出的一个区别是，前导锚和尾锚是动态的，并且可能会根据语言环境的方向而变化。 也就是说，对于LTR（从左到右）语言，它们将从左到右，对于RTL语言，则将从右到左。 相反，无论如何，左右锚点始终保持左右。 垂直布局锚 这些是锚属性，用于沿视图的Y轴添加约束。 NSlayoutYAxisAnchor类的实例，这些属性包含以下锚点： 顶锚 底部锚 中心Y型锚 第一基准锚 最后基准锚 在此，第一基线是多行标签中第一行文本的基线。 同样，最后基线是多行标签中文本最后一行的基线。 如果文本为单行，则它们将相同。 尺寸布局锚 这些定位点定义视图的大小。 它们是NSLayoutDimension类的实例。 其中包含以下锚点： […]

使用自动布局使宽度和高度相等

自动布局很棒。 它大大减少了界面设计的工作量和不确定性。 一定要花些时间才能掌握。 但是，一旦您对自动布局感到满意，这真是一种祝福。 今天，我们将讨论一个这样的问题及其使用自动布局的解决方案。 问题： 让我们有一个带有UIImageView的视图控制器。 UIImageView必须位于屏幕中央，并且应为圆形。 对于所有喜欢变通方法的人们，不，我们不会在UIImageView中使用圆形图像。 我们将有一个常规图像，并使UIImageView投射为圆形。 这很简单，对吧？ 是的，在大多数情况下。 但是，有一个陷阱。 如果您曾经尝试过创建圆形UIImageView，那么您会知道先决条件的。 前提条件要求您的UIImageView应该具有相等的宽度和高度。 如果UIImageView的宽度和高度相同，则只需分配半个宽度或高度的半径即可。 例如，您要有一个宽度为40的UIImageView。高度也必须为40 pts。 半径将为宽度和高度的一半，在此示例中为20。 如何使图像视图呈圆形？ 如果您了解以上部分，则可能正在寻找代码段。 这里是 func makeImageViewCircular（imageView：UIImageView） { imageView.layer.cornerRadius = imageView.width / 2.0 imageView.maskToBounds = true } 方法的第一行将imageview宽度的一半分配给其图层的角半径。 请注意，半径是分配给图层的，而不是视图本身的。 这是您的操作方法（最终） 将图像视图拖放到视图控制器中。 使图像视图水平居中，垂直居中。 做到这一点的方法是按住ctrl并拖动到父视图（在这种情况下为UIViewController的视图）。 弹出窗口出现时，按住shift键并选择“在容器中水平居中”和“在容器中垂直居中” 上面的步骤将使您的图像在水平和垂直窗格中居中放置。 由于它在水平和垂直方向上都位于中心，因此它将最终位于屏幕的中心。 现在，我们需要使UIImageView的宽度与视图控制器的宽度成比例。 使UIImageView的宽度为其父视图宽度的一半。 现在，您有了一个图像视图，其宽度是其父视图宽度的一半。 最后一步是将图像的宽高比设置为1：1。 按住Ctrl键并将UIImageView拖到其自身。 选择宽高比并将其分配为1：1的值 现在，您应该在屏幕中央放置一个宽度和高度相同的圆形图像。