เนื่องจาก Apple เปิดตัวUIStackViewทำให้งานง่ายขึ้นมาก
วิธีที่ 1: การใช้ Nib / StoryBoard:
คุณต้องเพิ่มมุมมองสามมุมมองในตัวสร้างอินเทอร์เฟซและฝังไว้ใน stackview
Xcode ► Editor ►ฝังใน► StackView
เลือก stackView และให้ข้อ จำกัด ด้วยความสูงนำหน้าต่อท้ายด้านบนและเท่ากันด้วย safeArea
คลิกเพื่อตรวจสอบคุณสมบัติและ
ตั้งค่า StackView แนวนอนและการกระจายเพื่อเติมเต็มตามสัดส่วน
[ 
3
ให้ข้อ จำกัด ของมุมมองสามแบบโดยนำหน้า, ต่อท้าย, ด้านบน, ด้านล่างตามลำดับของด้านข้าง
วิธีที่ 2: โดยทางโปรแกรม:
import UIKit
class StackViewProgramatically: UIViewController {
var propotionalStackView: UIStackView!
///Initially defining three views
let redView: UIView = {
let view = UIView()//taking 42 % initially
view.frame = CGRect(x: 0, y: 0, width: 42 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .red
return view
}()
let greenView: UIView = {
let view = UIView()//taking 42* initially
view.frame = CGRect(x: 42 * UIScreen.main.bounds.width/100, y: 0, width: 25 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .green
return view
}()
let blueView: UIView = {
let view = UIView()//taking 33*initially
view.frame = CGRect(x: 67 * UIScreen.main.bounds.width/100, y: 0, width: 33 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .blue
return view
}()
///Changing UIView frame to supports landscape mode.
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
DispatchQueue.main.async {
self.redView.frame = CGRect(x: 0, y: 0, width: 42 * self.widthPercent, height: self.screenHeight)
self.greenView.frame = CGRect(x: 42 * self.widthPercent, y: 0, width: 25 * self.widthPercent, height: self.screenHeight)
self.blueView.frame = CGRect(x: 67 * self.widthPercent, y: 0, width: 33 * self.widthPercent, height: self.screenHeight)
}
}
override func viewDidLoad() {
super.viewDidLoad()
//Adding subViews to the stackView
propotionalStackView = UIStackView()
propotionalStackView.addSubview(redView)
propotionalStackView.addSubview(greenView)
propotionalStackView.addSubview(blueView)
propotionalStackView.spacing = 0
///setting up stackView
propotionalStackView.axis = .horizontal
propotionalStackView.distribution = .fillProportionally
propotionalStackView.alignment = .fill
view.addSubview(propotionalStackView)
}
}
//MARK: UIscreen helper extension
extension NSObject {
var widthPercent: CGFloat {
return UIScreen.main.bounds.width/100
}
var screenHeight: CGFloat {
return UIScreen.main.bounds.height
}
}
เอาท์พุท:
ทำงานร่วมกับแนวนอนและแนวตั้ง
โครงการสาธิต - https://github.com/janeshsutharios/UIStackView-with-constraints
https://developer.apple.com/videos/play/wwdc2015/218/
