스토리 보드에서 UIScrollView를 사용하는 방법

키가 1000 픽셀 인 컨텐츠가있는 스크롤보기가 있으며 스토리 보드에서 쉽게 디자인 할 수 있도록 배치하고 싶습니다.
프로그래밍 방식으로 수행 할 수 있다는 것을 알고 있지만 실제로 시각적으로 볼 수 있기를 원합니다. 보기 컨트롤러에 스크롤보기를 넣을 때마다 스크롤되지 않습니다. 원하는대로 작동하게 할 수 있습니까? 아니면 코드에서해야합니까?

솔루션을 찾기 위해 2 시간을 보냈고 StackOverflow 가이 QA 스타일을 허용하기 때문에 내 자신의 질문에 대답하고 있습니다.

스토리 보드에서 작동하게하는 방법은 다음과 같습니다.

1 : 컨트롤러보기로 이동하여을 클릭하십시오 Attribute Inspector.

2 : Freeform추정 대신 크기를 변경하십시오 .

3 : 해당 스토리 보드의 기본보기로 이동하십시오. 스크롤보기가 아니라 최상위보기입니다.

4 : Size Inspector이보기를 클릭 하고 원하는 크기로 설정 하십시오 . 나는 키를 1000으로 바꿨다.

이제 스토리 보드에보기 설정이있어 쉽게 디자인 할 수 있도록 스크롤의 전체 높이를 볼 수 있습니다.

5 : 스크롤보기를 끌어서 전체보기를 차지하도록 늘립니다. 이제 뷰 컨트롤러의 뷰에 320,1000 크기의 스크롤 뷰가 있어야합니다.

이제 스크롤하여 컨텐츠를 올바르게 표시해야합니다.

6 : 스크롤보기를 클릭하고을 클릭하십시오 Identity Inspector.

7 : User Defined runtime attributeKeyPath를 사용 contentSize하여 SIZE 유형을 추가하고 컨텐츠 크기를 입력하십시오. 나를 위해 그것은 (320, 1000)입니다.

스토리 보드에서 전체 스크롤보기를보고 싶기 때문에 확장했으며 320,1000 프레임이 있지만 앱에서 작동하려면 프레임을 보이는 스크롤 뷰로 변경해야합니다.

8하십시오 추가 runtime attribute키 패스와를 frame입력 RECT 및 0,0,320,416와 함께.

이제 앱을 실행하면 보이는 스크롤보기의 프레임이 0,0,320, 416이고 1000까지 스크롤 할 수 있습니다. 서브 뷰와 이미지를 배치 할 수 있으며 스토리 보드에서 원하는대로 표시 할 수 있습니다. 그런 다음 런타임 속성이 올바르게 표시되는지 확인하십시오. 이 모든 것은 한 줄의 코드없이 가능합니다.

Auto LayoutXCode 8.2.1에서 나를 위해 일한 단계는 다음과 같습니다 .

1. 선택 Size Inspector의 View Controller, 변경 Simulated Size에 Freeform높이 1000 대신 Fixed.
2. 보기의 이름 View Controller을 RootView 로 바꾸십시오 .
3. RootView의Scroll View 하위보기로 a 를 드래그 하고 이름을 ScrollView 로 바꾸십시오 .
4. ScrollView에 대한 제약 조건을 추가하십시오 .
   • ScrollView [상단, 하단, 선행, 후행] = RootView [상단, 하단, 선행, 후행]
5. ScrollView의Vertical Stack View 하위보기로 a 를 드래그 하고 이름을 ContentView 로 바꾸십시오 .
6. ContentView에 대한 제약 조건을 추가하십시오 .
   • ContentView .height = 1000
   • ContentView [상단, 하단, 선행, 후행, 폭] = ScrollView [상단, 하단, 선행, 후행, 폭]
7. 선택 Attributes Inspector의 내용 없음 , 변경 Distribution에 Fill Equally대신 Fill.
8. ContentView의View 하위 보기 로 a 를 드래그 하고 이름을 RedView 로 바꾸십시오 .
9. RedViewRed 의 배경으로 설정하십시오 .
10. ContentView의View 하위 보기 로 a 를 드래그 하고 이름을 BlueView 로 바꾸십시오 .
11. BlueViewBlue 의 배경으로 설정하십시오 .
12. RootView를 선택 하고 Update Frames버튼을 클릭하십시오 .
    • Update Frames버튼 대신 Xcode8의 새로운 버튼입니다 Resolve Auto Layout Issues. 스토리 보드 아래의 컨트롤 막대에있는 새로 고침 단추처럼 보입니다.

계층 구조보기 :

• RootView
  • ScrollView
    • ContentView
      • 레드 뷰
      • 블루 뷰

컨트롤러 장면보기 (높이 : 1000) :

iPhone7에서 실행 (높이 : 1334/2) :

iOS 7 및 XCode 5에서 나를 위해 일한 단계는 다음과 같습니다.

1. ViewController를 드래그하십시오 (UIView "View"와 함께 제공).

   1.1 "View Controller"를 선택하고 "File Inspector"를 선택하고 "Auto layout"을 체크 해제하십시오.

2. ScrollView 드래그 (ViewController의 UIView "View"의 자식으로)
3. ScrollView를 선택하고 "Identity Inspector"를 엽니 다.

4. keyPath에 "contentSize"를 입력하십시오. 유형으로 "크기"를 선택하십시오. 그리고 값으로 {320, 1000} 을 입력하십시오 .

   참고 : 4 단계는 단순히 스크롤러에 크기가 320x1000 단위 인 일부 내용이 포함되어 있다고 말합니다. 따라서 contentSize를 설정하면 스크롤러가 작동합니다.

5. View Controller를 선택하고 "Attributes Inspector"를 선택한 다음 Freeform from Size 를 선택하십시오 .

   참고 : 5 단계에서는 뷰 컨트롤러와 함께 제공되는 "뷰"의 크기를 변경할 수 있습니다.

6. "보기"를 선택한 다음 "크기 검사기"를 선택하십시오.

7. 너비를 320으로 설정하고 높이를 1000으로 설정하십시오.

참고 : 5, 6 및 7은 우리가 순전히위한 참조 늘어나거나 스토리 보드 내부 전체 확대보기. 참고 : View Controller에서 "자동 레이아웃"을 선택 해제해야합니다.

뷰 계층 구조는 다음과 같아야합니다.

몇 시간의 시행 착오 끝에 '오프 스크린'인 스크롤보기에 내용을 넣는 매우 쉬운 방법을 찾았습니다. XCode 5 및 iOS 7에서 테스트되었습니다. 스토리 보드에서 두 가지 작은 트릭 / 해결 방법을 사용하여 거의 모든 작업을 수행 할 수 있습니다.

1. 스토리 보드로 뷰 컨트롤러를 드래그하십시오.
2. 이 viewController에서 scrollView를 드래그하십시오. 데모의 경우 전체 화면을 덮고 크기를 기본값으로 둘 수 있습니다.
3. 이제 트릭 1이 있습니다 : scrollView에 요소를 추가하기 전에 일반 '보기'로 드래그하십시오 (이보기는 화면보다 커지고 버튼, 레이블 등의 모든 하위 요소가 포함됩니다 ... ' 둘러싼보기 ').
4. 크기 검사기 에서이 둘러싸는보기의 Y 크기 를 예를 들어 800으로 설정하십시오.
5. Y 위치 200의 어딘가에있는 레이블을 둘러싸는보기에 놓은 후 이름을 'label 1'로 지정하십시오.
6. 트릭 2 : 둘러보기 가 선택되어 있는지 확인하고 ( scrollView! 아님) Y 위치를 예를 들어 -250으로 설정하면 화면 외부에있는 항목을 추가 할 수 있습니다
7. 화면 하단의 레이블을 '라벨 2'로 지정하십시오. 이 라벨은 실제로 '화면 밖'입니다.
8. 엔 클로징 뷰의 Y 위치를 0으로 재설정하면 더 이상 레이블 2가 화면 밖에 위치하므로 레이블 2가 표시되지 않습니다.

스토리 보드 작업을 위해 지금은 viewController의 'viewDidLoad'메서드에 한 줄의 코드를 추가하여 scrollViews 내용을 설정하여 전체 '클로징 뷰'를 포함해야합니다. 스토리 보드에서 이것을 수행하는 방법을 찾지 못했습니다.

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Identity Inspector의 scrollView에 contentSizekeyPath를 a size로 추가하고 (320, 1000)으로 설정하면됩니다.

애플은 스토리 보드에서 이것을 더 쉽게 만들어야한다고 생각합니다 .TableViewController에서는 스토리 보드에서 화면을 스크롤 할 수 있습니다 (20 셀을 추가하면 스크롤 할 수 있습니다) .ScrollViewController로도 가능합니다.

iOS7에서 작동하도록 스크롤하기 및 iOS 7 및 XCode 5에서 자동 레이아웃

이 외에도 https://stackoverflow.com/a/22489795/1553014

분명히 우리가해야 할 일은 :

1. 모든 제한 조건을 스크롤보기로 설정하십시오 (즉, 먼저 스크롤보기 수정)

2. 그런 다음 스크롤 거리 (스크롤 뷰)에서 scrollView 거리 제한을 맨 아래 항목으로 설정하십시오.

참고 : 2 단계에서는 스토리 보드에 마지막 내용이 스크롤보기 내 어디에 있는지 알려줍니다.

이 예제에서는 인터페이스 빌더의 자동 레이아웃 기능을 선택 취소했습니다. 그리고 나는 여전히 이전 버전의 Xcode 4.6.1 버전을 사용하고 있습니다.

스크롤보기가있는보기 컨트롤러 (기본보기)로 시작하십시오.

1 : 오브젝트 라이브러리에서 컨테이너보기를 스크롤보기에 추가하십시오. 스토리 보드에 새 뷰 컨트롤러가 추가되고 스크롤 뷰를 사용하여 뷰 컨트롤러에 연결됩니다.

2 : 컨테이너보기를 선택하고 크기 검사기에서 자동 크기 조정없이 상단 및 왼쪽에 고정시킵니다.

3 : 높이를 1000으로 변경하십시오.이 예에서는 1000이 사용됩니다. 필요한 값을 적용해야합니다.

4 : 새 뷰 컨트롤러를 선택하고 Attributes Inspector에서 Size를 Freeform으로 변경합니다.

5 : 새 뷰 컨트롤러의 뷰를 선택하고 Inspector 크기에서 높이를 1000 (컨테이너 뷰의 높이와 동일)으로 변경하십시오.

6 : 나중에 테스트를 위해 새 뷰 컨트롤러의 뷰에있는 동안 뷰의 상단과 하단에 레이블을 추가하십시오.

7 : 원래보기 컨트롤러에서 스크롤보기를 선택하십시오. 아이덴티티 인스펙터에서, keyPath가 contentSize로 설정되고, type이 Size로 설정되고, 값이 {320, 1000} (또는 컨테이너 뷰의 크기)로 설정된 속성을 추가하십시오.

8 : 4 인치 iPhone Simulator에서 실행하십시오. 상단 라벨에서 하단 라벨까지 스크롤 할 수 있어야합니다.

9 : 3.5 인치 iPhone Simulator에서 실행하십시오. 상단 라벨에서 하단 라벨까지 스크롤 할 수 있어야합니다.

Xcode 4.6.1은 iOS6 이하에서만 빌드 할 수 있습니다. 이 접근법을 사용하고 iOS6 용으로 빌드 한 후에도 앱이 iOS7에서 실행될 때도 동일한 결과를 얻을 수 있습니다.

내 것을 참고 UITableView, 당신은 실제로에서 셀 또는 요소를 선택하고 트랙 패드와 함께 아래로 스크롤하여있는 tableview를 스크롤 할 수 있습니다.

의 경우 UIScrollViewAlex의 제안이 마음에 들지만 뷰 컨트롤러를 자유 형식 으로 일시적으로 변경하고 루트 뷰의 높이를 높이고 UI를 빌드 한 다음 (1-5 단계) 다시 완료하면 표준 유추 크기로 다시 변경하는 것이 좋습니다. 콘텐츠 크기를 런타임 속성으로 하드 코딩 할 필요가 없습니다. 그렇게하면 3.5 "및 4"장치를 지원하려고 노력하는 많은 유지 보수 문제와 향후 화면 해상도가 높아질 가능성에 직면하게됩니다.

이 샘플과 같이 viewDidAppear에 contentSize 속성 만 설정해야합니다.

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

자동 레이아웃 문제를 해결하고 iOS7에서 잘 작동합니다.

면책 조항 :-iOS 9 이상 (스택보기).

iOS 9 디바이스에 앱을 배포하는 경우 스택보기를 사용하십시오 . 단계는 다음과 같습니다.

1. 제약 조건이있는 스크롤보기 추가-왼쪽, 오른쪽, 아래쪽, 위쪽 (여백 없음)으로 고정하여보기 (보기)
2. 스크롤 제약 조건이 동일한 스택 뷰를 추가하십시오.
3. 스택보기 다른 제약 :-stackView.bottom = view.bottom 및 stackView.width = scrollView.width
4. 뷰 추가를 시작하십시오. 스크롤보기는 스택보기 (기본적으로 콘텐츠보기)의 크기에 따라 스크롤하기로 결정합니다.

iOS7에서 FreeForm 크기의 ViewController의 UIScrollView 내부에 View가 있으면 내가 한 일에 관계없이 앱에서 스크롤되지 않는다는 것을 알았습니다. 나는 놀고 있었고 FreeForms를 사용하지 않는 다음과 같은 것으로 나타났습니다.

1. ViewController의 메인 뷰 안에 UIScrollView 삽입

2. ScrollView에서 자동 레이아웃 제약 조건을 적절하게 설정하십시오. 나를 위해 0에서 맨 위 레이아웃 가이드 및 0에서 맨 아래 레이아웃 가이드를 사용했습니다.

3. ScrollView 안에 컨테이너보기를 배치하십시오. 원하는 높이로 설정하십시오 (예 : 1000)

4. 컨테이너에 높이 제한 (1000)을 추가하여 크기가 조정되지 않도록합니다. 하단은 양식의 끝을 지날 것입니다.

5. [self.scrollView setContentSize : CGSizeMake (320, 1000)] 줄을 추가하십시오. scrollView를 포함하는 ViewController (IBOutlet으로 연결)

컨테이너와 연결된 ViewController (자동으로 추가됨)는 Interface Builder에서 원하는 높이 (1000)를 가지며 원래 뷰 컨트롤러에서도 올바르게 스크롤됩니다. 이제 컨테이너의 ViewController를 사용하여 컨트롤을 레이아웃 할 수 있습니다.

나는 5 센트를 받아 들였다. 나는 2 일 동안 주제를 연구하고 마침내 지금부터 항상 사용할 솔루션을 찾았다.

허용 된 답변의 항목 4로 이동하여 프레임 및 내용 크기 등의 속성 추가에 대해 잊어 버립니다

모든 것을 자동으로 만들려면 이 링크의 솔루션을 사용 하십시오.

모든 것이 명확하고 쉽고 우아하며 iOS 7의 매력처럼 작동합니다.

간단한 해결책은 다음과 같습니다.

1. 스토리 보드에서 뷰 컨트롤러의 크기 속성을 "자유형"으로 설정하고 원하는 크기를 설정하십시오. 스크롤보기의 전체 내용에 맞도록 충분히 커야합니다.

2. 스크롤보기를 추가하고 평상시처럼 제약 조건을 설정하십시오. 즉, 스크롤보기를보기 크기로하려면 상단, 하단, 선행, 후행 여백을 일반적으로 슈퍼 뷰에 연결하십시오.

3. 이제 스크롤보기의 하위보기에 스크롤보기의 상단과 하단을 연결하는 제약 조건이 있는지 확인하십시오. 가로 스크롤이있는 경우 왼쪽과 오른쪽에서 동일합니다.

다음은 세로 스크롤보기에 대해 동일한 솔루션을 얻는 약간의 지저분한 답변이지만 (스택 오버 플로우의 정신과 관련하여) 질문에 대답하지 않습니다. scrollView를 사용하는 대신 UITableView를 사용하고 일반 UIView를 헤더로 끌어서 원하는만큼 크게 만들면 스토리 보드에서 컨텐츠를 스크롤 할 수 있습니다.

분명히 높이를 지정할 필요는 없습니다! 어떤 이유로 든 구성 요소의 크기를 변경하거나 글꼴 크기를 변경하면 좋습니다.

방금이 자습서를 따르고 모든 것이 작동했습니다 : http://natashatherobot.com/ios-autolayout-scrollview/

(측면 참고 : 뷰를 중앙에 배치하지 않으려는 경우 viewDidLayoutSubviews를 구현할 필요가 없으므로 단계 목록이 훨씬 짧습니다).

희망이 도움이됩니다!

핵심은 contentSize입니다.

UIScrollView를 추가 할 때 종종 누락되고 표시되지 않습니다.

UIScrollView를 선택하고 Identity Inspector를 선택하십시오.

Identity Inspector에서 scrollView에 키 경로 contentSize를 a size로 추가하고 (320, 1000)으로 설정하십시오.

멀리 스크롤하십시오.

자동 레이아웃을 사용하는 경우 가장 좋은 방법은 스토리 보드의 정적 셀과 함께 UITableViewController를 사용하는 것입니다.

또한 한 번 더 스크롤이 필요한 뷰에서 문제가 발생하여 위에서 언급 한 기술로 UIScrollView를 변경하십시오.

Xcode 11을 사용하여 스크롤보기를 설정하는 방법은 다음과 같습니다

1-스크롤보기 추가 및 상단, 하단, 선행 및 후행 제약 조건 설정

2-스크롤보기에 컨텐츠보기를 추가하고 컨텐츠 레이아웃 안내서에 대한 연결을 끈 다음 선행, 상단, 하단 및 후행을 선택하십시오. 값을 0 또는 원하는 상수로 설정하십시오.

3-컨텐츠 뷰에서 프레임 레이아웃 안내서로 드래그하여 동일한 너비를 선택하십시오.

4-높이 제한 상수를 컨텐츠 뷰로 설정