在开发中,很多细节的东西常常忘记,类似于快速登录的界面场景中,往往需要进行多个按钮等宽并且占据屏幕宽度的布局,在这种情况下,如果一个一个去设置宽高等约束那无疑是件非常繁琐的事情, 下面简要说一种很快速的简单且易用的布局方式,其实只有几个步骤
使用场景示例图:
下面开始布局:
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的位置设置左右上下的距离,不过这个距离是指距离左右上下的空白处的距离,小伙伴可以自行尝试
