자동 레이아웃을 사용하여 총 너비의 백분율을 만드는 방법은 무엇입니까?

자동 레이아웃을 사용하여 총 너비의 백분율을 만드는 방법은 무엇입니까?

---

각각 총 너비의 고정 된 백분율로 세 개의 동적 열을 만들어야합니다. 1/3이 아니라 다른 값. 예를 들어 다음 그림은 세 개의 열을 보여줍니다. 첫 번째 열은 42 %, 두 번째 열은 25 %, 세 번째 열은 33 %입니다.

뷰 컨트롤러에서 600 픽셀의 경우 각각 252, 150 및 198 픽셀입니다.

그러나 후속 디스플레이 크기 (예 : iPhone 4 가로 (960 가로) 또는 iPad 2 세로 (768 가로))의 경우 상대 백분율이 동일하도록하고 싶습니다 (위의 인용 된 픽셀 너비가 아님).

스토리 보드를 사용 하여이 작업을 수행 할 수 있습니까? 코드에서이 작업을 쉽게 수행 할 수 있지만 가능한 목표는이 디스플레이 로직을 스토리 보드에 최대한 많이 넣는 것입니다.

---

말했듯이 코드로 작성하는 방법을 알고 있다면 스토리 보드에서 수행하는 방법을 이미 알고 있습니다. 정확히 같은 제약 조건이지만 코드가 아닌 시각적으로 만들 수 있습니다.

1. 뷰와 수퍼 뷰를 모두 선택하십시오.

2. 폭을 수퍼 뷰 폭과 동일하게 제한하려면 편집기-> 핀-> 폭을 선택하십시오 (실제로 캔버스 하단의 "핀"팝업 대화 상자가 가장 잘 작동 함).

3. 구속 조건을 편집하고 승수를 원하는 분수 (예 : 0.42)로 설정하십시오. 그리고 다른 관점들도 마찬가지입니다.

---

Apple이 UIStackView를 도입 하면서 작업이 훨씬 쉬워졌습니다.

방법 1 : 펜촉 / 스토리 보드 사용 :

인터페이스 빌더에서 세 개의보기를 추가하고 스택보기에 포함시켜야합니다.

Xcode ► 편집기 ► 임베디드 ► StackView

safeArea를 사용하여 stackView를 선택하고 선행, 후행, 상단 및 동일한 높이로 구속 조건을 부여하십시오.

속성 관리자 영역을 클릭하고 비례 적으로 채울 수 있도록 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

https://developer.apple.com/videos/play/wwdc2015/218/

---

나는 이것이 더 자세하게 설명 될 수 있다고 생각하여 슈퍼 뷰 내에서 고정 된 백분율 레이아웃이 필요한 모든 뷰에 더 쉽게 적용 할 수 있다고 생각합니다.

가장 왼쪽보기

• 정박 SuperView.Leading
• 고정 백분율을 곱하기로 정의합니다. SuperView.Height

중간보기

• 고정 백분율을 곱하기로 정의합니다. SuperView.Height
• 그 핀 left이웃의 오른쪽에

가장 많이 볼

• 고정 백분율을 정의하지 않습니다 (사용 가능한보기의 나머지 부분 임)
• 그 핀 left이웃의 오른쪽에
• 핀의 right에SuperView.Trailing

모든 조회수

• Top Layout Guide.Top및 에 고정하여 고정되지 않은 높이를 정의하십시오 Top Layout Guide.bottom. 위의 답변에서 이는 이웃 높이와 동일한 높이를 설정하여 수행 할 수도 있습니다.

참고 URL : https://stackoverflow.com/questions/26373598/how-to-create-percentage-of-total-width-using-autolayout