총 너비의 비율이 고정 된 3 개의 동적 열을 만들어야합니다. 1/3이 아니라 다른 값입니다. 예를 들어, 다음 그림은 세 개의 열을 보여줍니다. 첫 번째 열은 42 % 너비, 두 번째 열은 25 % 너비, 세 번째 열은 33 % 너비입니다.
viewcontroller에서 600 픽셀의 경우 각각 252, 150 및 198 픽셀이됩니다.
그러나 이후의 모든 디스플레이 크기 (예 : iPhone 4 가로 (960 너비) 또는 iPad 2 세로 (768 너비))의 경우 상대 비율이 같기를 바랍니다 (위에 인용 된 픽셀 너비가 아님).
스토리 보드를 사용하여이 작업을 수행하는 방법이 있습니까 (예 : 코드없이)? 코드에서 쉽게이 작업을 수행 할 수 있지만, 제 목표는이 디스플레이 로직을 최대한 스토리 보드에 넣는 것입니다.
답변:
당신이 말했듯이 코드로하는 방법을 안다면 스토리 보드에서하는 방법을 이미 알고있는 것입니다. 정확히 동일한 제약 조건이지만 코드가 아닌 시각적으로 생성합니다.
보기와 수퍼 뷰를 모두 선택하십시오.
Editor-> Pin-> Widths Equally를 선택하여 너비를 superview의 너비와 동일하게 제한합니다 (실제로 캔버스 하단의 "핀"팝업 대화 상자가 여기에서 가장 잘 작동 함).
제약 조건을 편집하고 배율을 원하는 분수 (예 : 0.42)로 설정합니다. 다른 견해도 마찬가지입니다.
Apple이 UIStackView를 도입함에 따라 작업이 훨씬 쉬워졌습니다.
방법 1 : Nib / StoryBoard 사용 :
인터페이스 빌더에 3 개의 뷰를 추가하고 스택 뷰에 임베드하면됩니다.
Xcode ► 편집기 ► 포함 ► StackView
stackView를 선택하고 safeArea를 사용하여 선행, 후행, 상단 및 동일한 높이로 제약 조건 부여
속성 관리자 영역을 클릭하고 비례 적으로 채우기 위해 StackView 수평 및 분포 설정
[ 
3
각 측면에 선행, 후행, 상단, 하단으로 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
수퍼 뷰 내에서 고정 된 비율 레이아웃이 필요한 모든 뷰에보다 쉽게 적용 할 수 있도록 더 자세히 설명 할 수 있다고 생각합니다.
SuperView.LeadingSuperView.HeightSuperView.Heightleft이웃의 오른쪽에left이웃의 오른쪽에right에SuperView.TrailingTop Layout Guide.Top및 에 고정하여 고정되지 않은 높이를 정의합니다 Top Layout Guide.bottom. 위의 답변에서 이것은 인접한 뷰와 동일한 높이를 설정하여 수행 할 수도 있습니다.