简体   繁体   English

如何将四个uibutton彼此等距居中?

[英]How do I center 4 uibuttons with equal distance from each other?

I have 4 uibuttons. 我有4个uibutton。 Each button MUST be 100x100. 每个按钮必须为100x100。 I want to center the 4 of them in the center of my screen (horizontally), but put them down vertically. 我想将其中的四个居中(水平)在屏幕中央,但将其垂直放下。 I have no idea where to start, but i've heard stackviews might work? 我不知道从哪里开始,但是我听说stackviews可以工作吗? Not sure. 不确定。 I tried using basic constraints, but i was unable to get them to work. 我尝试使用基本约束,但无法使其正常工作。

here is what im trying to get: 这就是我想要得到的: 在此处输入图片说明

Step 1 :- take 4 button in your Storyboard. 步骤1:-在情节提要中选择4按钮。 Button1 , Button2 , Button 3 , Button4 Button1,Button2,Button3,Button4

Step 2 :- Give Fixed Height and width to All buttons . 步骤2:-将固定的高度和宽度赋予所有按钮。

在此处输入图片说明

Step 3 :- All 2 - 2 button's pair in 2 stackview. 步骤3:-在2个stackview中的所有2-2个按钮对。

在此处输入图片说明

Step 4 :- Set UIStackview Property for both . 步骤4:-都设置UIStackview属性。

      Distribution -> Fill Equally
           Spacing -> 5 (as per your requirement)

在此处输入图片说明


在此处输入图片说明

Step 5 :- Add both Stackview in one Stackview 步骤5:-将两个Stackview都添加到一个Stackview中

在此处输入图片说明

Step 6 :- Set Distribution = Fill equally Spacing =5 in main stackview (set According to your requirement) 步骤6:-设置Distribution = Fill equally Spacing =5在主堆栈视图中Distribution = Fill equally Spacing =5 (根据您的要求设置)

在此处输入图片说明

Step 7 :- Now set Constrain to main stackview 步骤7:-现在将Constrain设置为main stackview

      center Horizontally in container

      center vertically in container

        and select Update Frame.

在此处输入图片说明

Step 8 :- It's time for Output for All device . 步骤8:-现在是输出所有设备的时间了。

在此处输入图片说明

I hope it will be helpful for you. 希望对您有帮助。

There are many ways, look one: 看一下的方法有很多:

Idea: 理念:

  1. First put all buttons equals width and height constraint, and to one of the button add constraints to width and height 100. 首先,将所有按钮都等于宽度和高度约束,然后向其中一个按钮添加宽度和高度100约束。

  2. For each button center X/Y with respect to his parent. 对于每个按钮中心,相对于其父对象的X / Y。 Constraint: Align Center X, Align Center Y 约束:对齐中心X,对齐中心Y

  3. Add offset to the constant (In interface builder): 向常量添加偏移量(在界面构建器中):

    • Top Left button: Offset X of -60, Y of -60 左上按钮:X偏移-60,Y偏移-60
    • Top Right button: Offset X of 60, Y of -60 右上按钮:X偏移量为60,Y偏移量为-60
    • Bottom Left Button: Offset X of -60, Y of 60 左下按钮:X偏移-60,Y偏移60
    • Bottom Right Button: Offset X of 60, Y of 60. 右下按钮:偏移X为60,Y为60。

Quick Example (I did the constraint in IB): https://github.com/Abreu0101/ButtonLayout 快速示例(我在IB中做了约束): https : //github.com/Abreu0101/ButtonLayout

======== ========

Another option that you have is using transparent view's between the buttons, and center this view's (transparent), and add constraint to the buttons base on these views (Sometimes that's I tricky that I used, but all depends on what you need). 您拥有的另一种选择是在按钮之间使用透明视图,并将该视图的(透明)居中,并基于这些视图向按钮添加约束(有时我会用到棘手的技巧,但是这完全取决于您的需要)。

You can also try this without using UIStackView (if you need this to be work on < iOS 9) 您也可以在不使用UIStackView的情况下尝试此操作(如果需要在<iOS 9上运行) 在此处输入图片说明

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

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