iOS에서 간단한 동적 레이아웃 시작하기 (Xcode 6/Swift)

Question

첫 번째 iOS 앱을 만들고 있습니다. 크기 조정 및 레이아웃 작업 방식에 약간의 어리둥절 해집니다. (또는 제 경우에는 그렇지 않습니다.). 내가하려고하는 것이 매우 간단하다고 느끼지만, 시도하는 모든 것이 원하는 결과를 얻지 못하고 있습니다. 내 초기 뷰 컨트롤러에서

, 내가 가지고 UIScrollView :

프로그래밍, 나는 .addSubView를 사용하여 XIB에서 장전 하위 뷰를 추가 해요 : 지금 그래서

var frame = scrollView.bounds 
frame.origin.x = 0.0 
frame.origin.y = 0.0 

let view = pages[page]    // pages[page] is UIView loaded from XIB 
view.contentMode = .ScaleAspectFit 
view.frame = frame 
scrollView.addSubview(view) 

을 XIB (이 스크린 샷을 찍는 목적으로 만 "유추 한"크기에서 "자유 ​​형식"크기로보기를 변경했습니다) :

이 코너의 세 가지의 라벨, 그리고 제가하고 싶은 것은 그들이 항상 그 모서리에 머물 수 있도록 정렬하는 그들을 위해, 그리고 중앙에 텍스트가 중심을 유지합니다. 내가 그것을 실행하면,하지만, 일이 자신의 똑같은 지루한 장소에 위치 (난 당신이 문제를 볼 수 있도록 배경을 추가) :

나는 (실패) 시도했다 :

요소의 위치를 ​​제약 조건을 사용하여

• 는 (문제가 아이 뷰

012의 다양한 크기와 레이아웃 속성 설정 아이 뷰

의 크기로 믿고 저를 선도하는, 아무것도하지 않는 것

저는 마감 시간이 너무 짧기 때문에 내 선호도가 너무 복잡하지는 않지만, 근본적으로 견고한 기초를 갖고 싶습니다. 실제로 무슨 일이 일어나고 있는지 알고 싶습니다. 내 질문은 여러 부분으로 이루어져 있지만 관련이 있습니다.

• 저는 경험이 없다는 것을 감안할 때 뷰 요소가 왼쪽, 오른쪽, 중앙 등으로 정렬되도록 배치하는 것이 가장 좋습니다.
• UIScrollView에서 하위보기의 크기를 올바르게 맞추려면 어떻게해야합니까?
• 화면 방향이 변경되면 다시 레이아웃하기 위해 특별한 조치를 취해야합니까?

구체적인 기술, 자습서, 적절한 문서 (필자는 설명서를 읽었지 만 큰 숲이므로 조금 분실했습니다).

여러분 중 iOS 마법사가 멋진 답변을 얻을 수있는 기회입니다!

Answer 1

나는이 질문에 대한 대답은 당신을 도울 수 있다고 생각 - iOS Autolayout with UIScrollview: Why does content view of scroll view not fill the scroll view?

"제약을있는 contentView와 수퍼합니다 (있는 ScrollView)의 사이에하지의 프레임은있는 ScrollView의 contentSize에 있습니다"다음은

Answer 2

몇 가지 예제 코드.스토리 보드에 스크롤보기를 추가하고 크기를 지정하고 위치를 지정했습니다 (왼쪽과 오른쪽에 고정, 세로 가운데에 고정 된 높이 200). 나는보기가있는 xib 파일 두 개를 만들었는데 각각은 4 개의 모서리 레이블과 가운데에 하나씩 있습니다. 가운데 하나에는 centerX 및 centerY 구속 조건이 있고 각 모서리에는 가장 가까운 두 모서리에 대한 구속 조건이 있습니다. xib에서이 뷰를 200 포인트 높이 었으므로 스크롤 뷰에 추가했을 때 레이아웃이 어떻게 보이는지 알 수 있었지만이를 수행 할 필요는 없습니다. 내가 추가 할 제약 조건은 뷰의 크기를 적절하게 조정할 것입니다. 컨트롤러에있는 코드는 다음과 같습니다.

class ViewController: UIViewController { 

    @IBOutlet weak var scrollView: UIScrollView! 
    override func viewDidLoad() { 
     super.viewDidLoad() 

     let firstSubview = NSBundle.mainBundle().loadNibNamed("View", owner: self, options: nil).first as UIView 
     firstSubview.setTranslatesAutoresizingMaskIntoConstraints(false) 
     scrollView.addSubview(firstSubview) 

     let secondSubview = NSBundle.mainBundle().loadNibNamed("View2", owner: self, options: nil).first as UIView 
     secondSubview.setTranslatesAutoresizingMaskIntoConstraints(false) 
     scrollView.addSubview(secondSubview) 
     scrollView.pagingEnabled = true 

     let scrollViewHeight = scrollView.frame.size.height 

     let viewsDict = ["first": firstSubview, "second": secondSubview] 

     scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[first(vw)][second(vw)]|", options: nil, metrics: ["vw":scrollView.frame.size.width], views: viewsDict)) 
     scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[first(svh)]|", options: nil, metrics: ["svh": scrollViewHeight], views: viewsDict)) 
     scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[second(svh)]|", options: nil, metrics: ["svh": scrollViewHeight], views: viewsDict)) 


    } 

    override func viewDidAppear(animated: Bool) { 
     super.viewDidAppear(animated) 
     println("scroll view size is: \(scrollView.frame.size)") 
     println("scroll view contentSize is: \(scrollView.contentSize)") 
    } 

} 

당신은 당신이 기본보기에 그것을 만들기한다면 첫 번째 (수평) 제약 조건에 대한 형식 문자열이 오류가 발생합니다 것을 알 수 있습니다

"| [첫 번째 (VW)] [초 (폭스 바겐)] | " 여기에서 vw는 통계에서 scrollView.frame.size.width로 정의되어 있으므로 스크롤보기의 너비 인 두 개의보기를 추가하는 것처럼 보입니다. 이 부분 ("|"문자로 표시)은 스크롤보기 자체가 아닌 contentView에 있기 때문에 스크롤보기에서 작동합니다. 따라서 이러한 제약으로 인해 contentView가 스크롤보기 크기의 두 배가됩니다 (따라서 명시 적으로 설정하지 않아도됩니다). viewDidAppear의 로그를 통해이 점을 알 수 있습니다.

scroll view size is: (320.0,200.0) 
scroll view contentSize is: (664.0,200.0)