UIScrollView中的间隔均匀的UIButtons

时间:2014-07-02 21:05:28

标签: ios uiscrollview uibutton interface-builder constraints

是否有一种简单的方法可以在iOS中的UIScrollView上水平均匀地分隔两个UIButton?

例如,查看图片。请注意按钮在横向方向上的宽度。

我想:

  1. 用于填充所有可用水平空间的按钮。
  2. 要有相同宽度的按钮。
  3. 不要使UIScrollView水平滚动。
  4. 从纵向翻转到横向时自动调整大小。
  5. 最好只使用Interface Builder约束,但如果需要,我会使用代码。
  6. Btns during portrait orientation

    Btns during landscape orientation

2 个答案:

答案 0 :(得分:0)

由于您使用的是autoLayout,因此应该非常简单:

首先,您需要确保在两个按钮上设置了top,bottom,leading和trailing约束。 (请记住,您的前导和尾随约束在这里很重要。您可能需要调整顶部和底部间距约束,以便旋转时按钮的高度不会调整大小。)

完成后,使用cmd +单击选择两个按钮,然后单击该框以添加另一个自动布局约束,并选择“等宽”:

Autolayout Screenshot

编辑:我的初始示例是在UIView中进行的,我最初并不认为UIScrollView的contentSize是由其子视图中的最后一个元素决定的。 Here is a related question regarding handling autolayout for a UIScrollView in landscape.一旦你能够在旋转时修改scrollview的contentSize,你的按钮上的自动布局就可以了。

答案 1 :(得分:0)

我最终使用下面的代码,因为我找不到将视图约束到UIScrollView右侧或底部的方法。这些约束似乎只设置了滚动视图的contentSize,而不是移动或调整子视图的大小。

+ (void)resizeBtnsHorz:(UIButton*)btn1 Button2:(UIButton*)btn2
{
    if (btn1 == nil || btn2 == nil || btn1.superview == nil || btn2.superview == nil || btn1.superview != btn2.superview)
        return;

    int nSideMargins = 0;
    int nSpaceBetween = 10;
    int nTotalWidth = btn1.superview.frame.size.width;
    int nBtnSpace = nTotalWidth - (nSideMargins*2) - nSpaceBetween;
    int nBtnWidth = nBtnSpace / 2;

    // Remove from view so we can set new frame rects
    // Autolayout prevents this, so the buttons must be removed and readded
    UIView* view1 = btn1.superview;
    [btn1 removeFromSuperview];
    [btn2 removeFromSuperview];
    [btn1 setTranslatesAutoresizingMaskIntoConstraints:YES];
    [btn2 setTranslatesAutoresizingMaskIntoConstraints:YES];

    // Button 1
    CGRect rBtn = btn1.frame;
    rBtn.origin.x = nSideMargins;
    rBtn.size.width = nBtnWidth;
    btn1.frame = rBtn;

    // Button 2
    rBtn = btn2.frame;
    rBtn.origin.x = nSideMargins + nBtnWidth + nSpaceBetween;
    rBtn.size.width = nBtnWidth;
    btn2.frame = rBtn;

    [view1 addSubview:btn1];
    [view1 addSubview:btn2];
}