iOS-用两个button等分屏幕宽度的两种实现方式
来源:互联网 发布:淘宝账号异常申诉 编辑:程序博客网 时间:2024/05/21 19:27
iOS-用两个button等分屏幕宽度的两种实现方式
1、单独做计算
可以先将按钮的宽度相加,然后(屏幕宽度-按钮相加宽度)/3 得到间隙的大小,然后再将按钮按照计算结果进行计算放置即可。这里需要固定按钮的宽度,才能实现。这里有个精度损失问题,因为在Int和Float之间转换有损失。关键代码如下:
let interval = (screenWidth - CGFloat(forgetButtonWidth) - CGFloat(loginButtonWidth) )/3 loginButton.setTitle("登录", for: UIControlState.normal) loginButton.setTitleColor(UIColor.white, for: UIControlState.normal) loginButton.backgroundColor = UIColor.brown loginButton.frame = CGRect.init(x: Int(interval), y: 100, width: loginButtonWidth, height: 40) forgetPwdButton.setTitle("忘记密码", for: UIControlState.normal) forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal) forgetPwdButton.backgroundColor = UIColor.darkGray forgetPwdButton.frame = CGRect.init(x: Int(interval)*2+loginButtonWidth, y: 100, width: forgetButtonWidth, height: 40) self.view.addSubview(loginButton) self.view.addSubview(forgetPwdButton)
严格来说,这里并没有将其平分为三份,不过如果不是太严谨的话可以当做平分。
2、Stack view分割
先简单说一下Stack view。它在IOS中的体现就是UIStackView这个类,是iOS9新增的一个布局技术,可以用来进行多个控件的快速布局。具体的介绍如下:
UIStackView 是 iOS9新增的一个布局技术。熟练掌握相当节省布局时间。UIStackView 是 UIView 的子类,是用来约束子控件的一个控件。但他的作用仅限于此,他不能用来呈现自身的内容,类似于 backgroundColor。当然了,这个控件相当易学,属性只有4个。
Axls: 子控件的布局方向,水平或者垂直
Alignment: 类似于 UILabel 的 Alignment 属性
Distributlon: 子控件的大小
Spacing: 子控件间的间距
可以看到在属性左边有个加号,点开来是这样的:
这其实是 UIStackView 也集成了 Size Class,Size Class 是用来布局不同尺寸屏幕的。在这里可以通过选择不同的尺寸来更新子控件约束。
使用
接下来我们在 xib 中使用 UIStackView 来完成以下布局:
首先上面的 ImageView 是直接做约束完成的。
然后我们可以选择左下角的三个 Label,然后点击右下角第一个图标合成 UIStackView:
因为三个 Label 间是有间距的,所以接下来我们修改 Spacing 属性:
这样就很方便的做好了 UIStackView 内部子视图的布局,然后只需要给 UIStackView 设置离左边和下边的约束即可,因为这个 UIStackView 内部的子视图都是 UILabel, UILabel 都是有他自身的固有大小的,所以不需要设置4个布局。
这样我们就完成了左边三个 Lable 的布局。接下来我们来布局右边的2个控件。
还是和刚才一样,选择 Image 和 label,并且组成一个 UIStackView 并设置好 UIStackView 的布局约束:
接下来布局内部子控件约束:
做好这两步你会发现 IB 还是报错,这是因为 UIStackView 并不知道他内部的 image 的宽高,这时候我们可以让 image 有他的固有大小:
将 intrinsic Size 的属性改为 Placeholder,这时候就解决了报错,至此,整个 View 的约束已经做完,是不是发现比之前全部用 Auto Layout 快多了。
当然了 UIStackView 也是可以用代码创建的。
class UIStackView : UIView {
init(arrangedSubviews views: [UIView])
var
arrangedSubviews: [UIView] { get }
func addArrangedSubview(view: UIView)
func removeArrangedSubview(view: UIView)
func insertArrangedSubview(view: UIView, atIndex stackIndex: Int) ...
}
第一个方法是用来创建一个 UIStackView 的,传入 views 里的数组的顺序代表了 UIStackView 里子视图的顺序。
第二个方法是用来获得 UIStackView 里有哪些子视图的。
后面3个方法和 UIView 里的方法是类似的。
看到 addArrangedSubview 和 removeArrangedSubview 你是不是想到了addSubView 和removfromSuperView。
下面有张表,可以区别这四个方法:
从表中可以看出,添加 UIStackView 的子视图应该用 addArrangedSubview,移除 UIStackView 某个子视图应该用 removeArrangedSubview。
UIStackView 用来约束子视图的属性有以下几个
var
axis: UILayoutConstraintAxis
var
distribution: UIStackViewDistribution
var
alignment: UIStackViewAlignment
var
spacing: CGFloat
var
baselineRelativeArrangement: Bool
var
layoutMarginsRelativeArrangement: Bool
这些就是使用代码来创建 UIStackView 了。
UIStackView 还是蛮简单的,但是功能却十分强大。
通过StackView,可以快速地实现分割,关键代码如下:
loginButton.setTitle("登录", for: UIControlState.normal) loginButton.setTitleColor(UIColor.white, for: UIControlState.normal) loginButton.backgroundColor = UIColor.brown forgetPwdButton.setTitle("忘记密码", for: UIControlState.normal) forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal) forgetPwdButton.backgroundColor = UIColor.darkGray tempViewOne.backgroundColor = UIColor.clear tempViewTwo.backgroundColor = UIColor.clear tempViewThree.backgroundColor = UIColor.clear stackView.addArrangedSubview(tempViewOne) stackView.addArrangedSubview(forgetPwdButton) stackView.addArrangedSubview(tempViewTwo) stackView.addArrangedSubview(loginButton) stackView.addArrangedSubview(tempViewThree) // //set vertical or horizontal stackView.axis = UILayoutConstraintAxis.horizontal stackView.distribution = UIStackViewDistribution.fillEqually self.view.addSubview(stackView)
这里是用了三个临时的占位view,然后将他们和两个按钮都放到stackView里面,设置stackView的distribution为fillEqually。这样就实现了等分效果,这里需要注意:我们只需要对stack进行约束,然后其他的控件布局会由stack view自动管理。实现效果如下:
这样就实现了两个button把界面均分。
这里面设置的distribution是 fillEqually,也就是把stackview里面的控件都充满stackview,并且stackview的arranged view都是等宽的。
- iOS-用两个button等分屏幕宽度的两种实现方式
- ios屏幕旋转的两种实现方式
- 简单实现ImageView宽度填满屏幕,高度自适应的两种方式
- 实现CSS等分布局的4种方式
- 实现CSS等分布局的5种方式
- ios 6 屏幕适配的两种方式
- ios 倒计时的两种实现方式
- Android获得屏幕高度和宽度的两种方法
- IOS 定义UIToolbar里的UIBarButtonItem两种方式,从Button创建和从Title创建
- 计算二叉树的宽度的两种方式
- iOS中自定义绘图的两种实现方式
- IOS中打电话的两种方式代码实现
- ios单例模式实现的两种方式
- 实现 iOS 后台定位的两种方式
- iOS活动倒计时的两种实现方式
- ios用xib实现三等分以及多等分思路
- 使用Java的Swing组件获取屏幕的高度和宽度(两种方式:包含任务栏高度和不包含任务栏高度)
- 在android中button响应的两种方式
- 数据库表复制
- mac安装mysql5.7
- win8.1下解决Visual C++不兼容的方法
- CAD软件查看.dwg、.dxf、.dwf、.jpeg、.jpg、.png、.gif等文件
- jsp 内置对象response,request,session 以及 cookie 对象的综合例子 和 include指令
- iOS-用两个button等分屏幕宽度的两种实现方式
- 在Visual C++下搭建OpenGL的开发环境
- Linux安装mongodb及启动
- POJ 2342. Anniversary party 简单树形DP c++ 代码
- win7 远程配置ubuntu14 python keras tensorflow 深度学习
- 进群就做题??
- 动画学习之Animate.css的使用与解析
- 使用ExtJs实现文件下载
- Loader