UI界面多个按钮等宽的布局思路

在开发中,很多细节的东西常常忘记,类似于快速登录的界面场景中,往往需要进行多个按钮等宽并且占据屏幕宽度的布局,在这种情况下,如果一个一个去设置宽高等约束那无疑是件非常繁琐的事情, 下面简要说一种很快速的简单且易用的布局方式,其实只有几个步骤

使用场景示例图:

下面开始布局:

• 1、在界面中拖入三个按钮,让三个按钮等宽

• 2、设置左边第一个按钮的左边上下左右的约束全部为0

• 3、设置中间的按钮上右下的约束为0,左边的约束已经设置不必再重复设置

• 4、设置右边的按钮上右下的约束为0,最后更新约束

跟新完约束后的界面如下图的模样:

这时,这三个按钮的宽度已经宽度一致的占据屏幕的宽度了

• 5、我们只需要修改按钮内部的文字和图片的位置就可以了,当然通过代码来实现按钮内图片和文字的位置顺序的方法很多,我这里只提供一种方法,当然做下面的事情之前最好是让三个按钮继承一个自定义的按钮,并在自定义的方法中实现下面的方法

  - (void)layoutSubviews
   {
    [super layoutSubviews];
  
    self.imageView.width = self.width * 0.5;
    self.imageView.height = self.imageView.width;
    self.imageView.y = self.height * 0.1;
    self.imageView.centerX = self.width * 0.5;
  
    self.titleLabel.width = self.width;
    self.titleLabel.y = CGRectGetMaxY(self.imageView.frame);
    self.titleLabel.x = 0;
    self.titleLabel.height = self.height - self.titleLabel.y;
  }
  

以上所有步骤完成后布局的结果就会变成上面的成果示例图的样子

• 6、下面说一种不是很常用的方法,在Xib中也可以实现的方法:

图中Edge的位置可选择为图片或者文字,选择后在Inset的位置设置左右上下的距离,不过这个距离是指距离左右上下的空白处的距离,小伙伴可以自行尝试