简体   繁体   English

情节提要约束(Xcode)

[英]storyboard constraints (Xcode)

I'm new to programming and I'm trying to work with Xcode. 我是编程新手,正在尝试使用Xcode。 I have no experience. 我没有经验。 I'm trying to make an app with Xcode. 我正在尝试使用Xcode制作应用。 I'm done with the code, the only issue i have is with the storyboard constraints. 代码已经完成,我唯一遇到的问题就是情节提要约束。 I need some one who can help me to set them up. 我需要一些可以帮助我设置它们的人。

So, i have 28 buttons as you can see in the picture, I want to keep the size of 65x65 pixels. 因此,您可以在图片中看到28个按钮,我想保持65x65像素的大小。 that means that the distance between them should vary in different device sizes(4inch, 4.7inch and 5.5inch). 这意味着它们之间的距离应随不同的设备尺寸(4英寸,4.7英寸和5.5英寸)而变化。 i also should mention that i want it to be only in portrait view and only for iPhone.i hope someone can help because I'm to noob for this, I've searched a lot on the internet but I'm not able to do it. 我还应该提到我只希望它仅在人像视图中使用,并且仅适用于iPhone。我希望有人可以提供帮助,因为我对此不满意,我在互联网上搜索了很多内容,但我却做不到它。

在此处输入图片说明

UIStackView (iOS 9+) UIStackView(iOS 9+)

UIStackView was introduced in iOS 9, which is very useful in your case. UIStackView是iOS 9中引入的,在您的情况下非常有用。

Edit : Before getting started, make sure to have size classes to be w Any, h Any , this will make thing easier. 编辑 :在开始之前,请确保将大小类设置为w Any, h Any ,这将使事情变得容易。

  1. To use this, search UIStackView in your utility panel. 要使用此功能, UIStackView在实用程序面板中搜索UIStackView

在此处输入图片说明

  1. Drag an drop a Vertical Stack View on the view of your view controller and set the constraints so it spans the whole screen. 在视图控制器的Vertical Stack View上拖放“ Vertical Stack View ”并设置约束,使其覆盖整个屏幕。

在此处输入图片说明

  1. Select the stack view we just placed and set the distribution to Fill Equally . 选择我们刚刚放置的堆栈视图,并将分布设置为“ Fill Equally

在此处输入图片说明

  1. Drag and drop a Horizontal Stack View onto the vertical one. 将“ Horizontal Stack View拖放到垂直Horizontal Stack View上。
  2. Select the horizontal one and set the distribution to Fill Equally . 选择水平分布,并将分布设置为“ Fill Equally
  3. Place your buttons in the Horizontal Stack View . 将按钮放在“ Horizontal Stack View

在此处输入图片说明

  1. Copy and paste the horizontal stack view multiple times based on number of rows you want. 根据所需的行数多次复制和粘贴水平堆栈视图。

在此处输入图片说明

That's it. 而已。

You can control the buttons' background images to make it smaller (65px), or you can place a view as its' parent then align horizontally/vertically to place it to the center, like this: 您可以控制按钮的背景图像使其变小(65px),也可以将视图作为其父视图放置,然后水平/垂直对齐以将其放置在中心,如下所示:

在此处输入图片说明

Orientation 取向

If you'd like to lock the orientation throughout the app, go to the settings of your project. 如果您想在整个应用程序中锁定方向,请转到项目的设置。

在此处输入图片说明

Sample project 样例项目

I made a sample project for this question, you can check it out here: https://github.com/cyhsutw/UIStackView-example 我为这个问题制作了一个示例项目,您可以在这里查看: https : //github.com/cyhsutw/UIStackView-example

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM