제약 조건을 단추의 크기를 올바르게 조정하려면 어떻게합니까?

Question

정지 신호 이미지와 빨간색, 노란색 및 녹색 버튼을 추가했습니다. 단추를 iPhone 4S 및 iPhone 6S 화면으로 크기를 조정하려고하지만 버튼이 페이지에서 사라지거나 iPhone 4S의 크기가 잘못되었습니다. 포인트의 수는 비례하여 크기가 조정될 것이라고 생각했지만 그렇지 않은 것으로 보입니다. 어떤 도움을 주시면 고맙겠습니다. 저는 제약 조건을 이해하기를 정말로 원합니다. 그러나 나는 그것을 얻지 못하고 있습니다! 일반적으로 나는 x 위치/스크린 크기, y 위치/스크린 크기를 재배치하기 만하면되지만 이것은 너무 오래 걸릴 수 있습니다. 여기

최신 잘못된 위치의 제약이다. 정지 신호 이미지를 선택하려고하면 정지 신호 이미지의 앞뒤 가장자리에 대한 구속 조건이 제공되지 않습니다.

노란색 버튼은 신호등 화면 상에 배치되어 있지만 크기를 조정하지 않습니다.

Answer 1

가장 쉬운 해결책은 모든 이미지에 너비와 높이 제한에 대한 고정 값을 제공하는 것입니다. 그런 다음 원하는대로 superview에서 spotlightImage를 정렬하고 정지 이미지와 관련하여 원 이미지의 정렬을 정의 할 수 있습니다.

그러나 화면의 너비에 따라 신호등 이미지의 너비를 늘리려면 복잡한 문제입니다. 스토리 보드에서 모든 제약 조건을 정의하려고 조금 노력했지만 적절한 해결책을 제시하지 못했습니다. 예를 들어, 이상적으로 스포트라이트 이미지의 폭에 비례하여 원의 centreX를 정의하는 것이 이상적입니다. y 위치와 비슷합니다. 불행히도 이것은 불가능합니다.

코드 1에는 약간의 제어 권한이 있습니다.다음은 작동 할 해결책입니다. 실제로 spotlightImage의 폭을 다시 계산되기 때문에 그것은 꽤 아니지만, 우리는 당신의 신호등 배경 이미지의 제약뿐만 아니라 제약을 볼 필요가

class ViewController: UIViewController { 

    lazy var stopLightImageView: UIImageView = { 
     return UIImageView(image: UIImage(named:"stopLight")) 
    }() 

    lazy var circleImageView: UIImageView = { 
     return UIImageView(image: UIImage(named:"circle")) 
    }() 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     setupViews() 
    } 

    private func setupViews() { 
     //Values at start. This is used to calculate the proportional values, since you know they produce the correct results. 
     let stoplightStartWidth: CGFloat = 540 
     let stoplightStartHeight: CGFloat = 542 
     let circleStartWidth: CGFloat = 151 
     let circleStartLeading: CGFloat = 231 
     let circleStartTop: CGFloat = 52 

     let screenWidth = UIScreen.mainScreen().bounds.size.width 
     let stoplightMargin: CGFloat = 20 

     self.view.addSubview(stopLightImageView) 
     stopLightImageView.translatesAutoresizingMaskIntoConstraints = false 

     //stoplightImage constraints 
     stopLightImageView.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor, constant: stoplightMargin).active = true 
     stopLightImageView.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor, constant: -stoplightMargin).active = true 
     stopLightImageView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor, constant: 0).active = true 
     stopLightImageView.heightAnchor.constraintEqualToAnchor(stopLightImageView.widthAnchor, multiplier: stoplightStartWidth/stoplightStartHeight).active = true 

     self.view.addSubview(circleImageView) 
     circleImageView.translatesAutoresizingMaskIntoConstraints = false 

     //circle constraints 
     circleImageView.widthAnchor.constraintEqualToAnchor(stopLightImageView.widthAnchor, multiplier: circleStartWidth/stoplightStartWidth).active = true 
     circleImageView.heightAnchor.constraintEqualToAnchor(circleImageView.widthAnchor, multiplier: 1).active = true 
     let stoplightWidth = screenWidth - 2*stoplightMargin 
     let stoplightHeight = stoplightWidth * stoplightStartHeight/stoplightStartWidth 
     circleImageView.leadingAnchor.constraintEqualToAnchor(stopLightImageView.leadingAnchor, constant: stoplightWidth*circleStartLeading/stoplightStartWidth).active = true 
     circleImageView.topAnchor.constraintEqualToAnchor(stopLightImageView.topAnchor, constant: stoplightHeight*circleStartTop/stoplightStartHeight).active = true 
    } 
} 

Answer 2

제약 조건이 까다로운, 그리고 당신이 많이가는 것 같습니다. 그것은이 정도 무엇을 정확하게 알려 어렵다, 여기 (희망 하나가 당신을 위해 작동) 나는이 문제를 가진 경우 수행하려고 할 내용은 다음과 같습니다

1. 는 속성 Inspector에서 이미지를 설정하거나 Aspect Fit or Redraw ... 문제가 다른 모양으로 수정되어야합니다.

2. 또한 제약 조건 목록을 조사하여 다른 제약 조건에 의존하는지 확인하십시오 (예 : 빨간색과 노란색은 비슷한 제약 조건을 가짐). 그들이 서로 의존한다면, 아직 "부모"이미지를 기반으로하지 않는 모든 제약 조건을 충족시켜야합니다.

3. 모든 것을 선택하고 "권장 제약 조건으로 재설정"으로 설정하십시오. 빌드하고 실행하십시오. 그래도 문제가 해결되지 않으면 남아있는 몇 가지 사항 만 남습니다.

4. 모든 개체의 모든 제약 조건을 제거하십시오. 검은 색 이미지로 시작하여 누락 된 제약 조건을 추가하거나 "컨테이너의 가운데 가운데"로 설정하십시오. 이미지 또는 애셋을 마우스 오른쪽 버튼으로 클릭하여 '보기'또는 위에있는 노란색 '첫 번째'서클로 드래그합니다.

는 희망이 도움이됩니다.