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

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

저는 1000px 높이의 콘텐츠가 있는 스크롤 뷰를 가지고 있으며 스토리보드에서 쉽게 디자인할 수 있도록 레이아웃을 하고 싶습니다.
프로그래밍 방식으로 수행할 수 있다는 것을 알지만 시각적으로 볼 수 있기를 바랍니다.보기 컨트롤러에 스크롤 보기를 놓을 때마다 스크롤되지 않습니다.제가 원하는 대로 작동하는 것이 가능한가요, 아니면 코드로 해야 하나요?

솔루션을 찾는 데 2시간밖에 걸리지 않았고 StackOverflow를 통해 이 QA 스타일을 사용할 수 있기 때문에 저는 제 질문에 답하고 있습니다.

여기서 마무리를 시작하는 것은 스토리보드에서 작동하는 방법입니다.

하여 1: " " " 을 합니다.Attribute Inspector.

를 2: 사이즈로 합니다.Freeform유추된 대에.

3: 스크롤 보기가 아니라 맨 위 보기로 이동합니다.

4번 클릭: 릭클Size Inspector원하는 크기로 보기를 설정합니다.저는 키를 1000으로 바꿨어요.

이제 스토리보드에 보기가 설정되어 있어 스크롤의 전체 높이를 쉽게 볼 수 있습니다.

5: 스크롤 보기에서 드롭다운하고 전체 보기를 차지하도록 펼칩니다.이제 보기 컨트롤러의 보기에 320,1000 크기의 스크롤 보기가 표시됩니다.

이제 스크롤을 해서 콘텐츠를 올바르게 표시해야 합니다.

하고 6: 스크롤 뷰를 합니다.Identity Inspector.

7을 합니다: 추User Defined runtime attribute가 " KeyPath "인 경우contentSize그런 다음 SIZE를 입력하고 내용 크기를 입력합니다.저는 (320, 1000)입니다.

스토리보드에서 전체 스크롤 뷰를 보고 싶기 때문에 확장하여 320,000개의 프레임을 가지고 있습니다. 하지만 이것이 앱에서 작동하기 위해서는 프레임을 보이는 스크롤 뷰로 변경해야 합니다.

8을 합니다.runtime attributeKeyPath 키 로용 사경을 frameRCT 유형 및 0,0,320,416.

이제 앱을 실행하면 0,0,320,416 프레임의 스크롤 뷰가 표시되고 1000까지 스크롤할 수 있습니다.우리는 우리가 원하는 대로 우리의 서브뷰와 이미지를 배치할 수 있고 스토리보드에는 없는 것들을 배치할 수 있습니다.그러면 런타임 특성이 제대로 표시되는지 확인합니다.코드 한 줄 없이 이 모든 것.

다음은 XCode 8.2.1에서 작동한 단계입니다.

1. 를 선택합니다.Size InspectorView Controller 변경 그고변화리Simulated SizeFreeform대신 키 1000으로Fixed.
2. 의 뷰 이름을 합니다.View ControllerRootView로 표시됩니다.
3. 를 .Scroll ViewRootView의 하위 뷰로 변경하고 ScrollView로 이름을 변경합니다.
4. ScrollView에 대한 제약 조건 추가:
   • 스크롤 뷰[상단, 하단, 선행, 후행] = 루트뷰[상단, 하단, 선행, 후행]
5. 를 .Vertical Stack ViewScrollView의 하위 뷰로 변경하고 ContentView로 이름을 변경합니다.
6. ContentView에 대한 제약 조건 추가:
   • 내용 보기.높이 = 1000
   • 내용 보기[상단, 하단, 선행, 후행, 폭] = 스크롤 뷰[상단, 하단, 선행, 후행, 폭]
7. 를 선택합니다.Attributes Inspector의 내용 보기 및 변경 내용DistributionFill Equally에 Fill.
8. 를 .View내용 보기의 하위 보기로 변경하고 이름을 빨간색 보기로 변경합니다.
9. 트RedRed View의 배경으로 사용됩니다.
10. 를 .View내용 보기의 하위 보기로 변경하고 BlueView로 이름을 변경합니다.
11. 트BlueBlueView의 배경으로 사용됩니다.
12. 루트 보기를 선택하고 다음을 클릭합니다.Update Frames단추를 채우다
    • Update Frames는 Xcode8입니다.Resolve Auto Layout Issues단추를 채우다스토리보드 아래에 있는 새로 고침 단추처럼 보입니다.

---

계층 보기:

• 루트 뷰
  • 스크롤 뷰
    • 내용 보기
      • 레드뷰
      • 블루뷰

---

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

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

iOS 7과 XCode 5에서 작동한 단계는 다음과 같습니다.

1. View 컨트롤러를 끕니다(UIView "View"와 함께 제공됨).

   1.1 "View Controller"를 선택하고 "File Inspector"를 선택한 후 "Auto layout"의 선택을 취소합니다.

2. 스크롤 뷰를 끕니다(ViewController의 UIView "View"의 하위 항목으로 사용).
3. ScrollView를 선택하고 "Identity Inspector"를 엽니다.

4. keyPath에 "contentSize"를 입력합니다.유형에 대해 "크기"를 선택합니다.값을 입력하려면 {320, 1000}을(를) 입력합니다.

   참고: 4단계는 스크롤러에 320x1000 유닛 크기의 일부 콘텐츠가 포함되어 있다는 것을 의미합니다.따라서 contentSize를 설정하면 스크롤러가 작동합니다.

5. [보기 컨트롤러]를 선택하고 "속성 검사기"를 선택한 후 [크기에서 양식 자유]를 선택합니다.

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

6. 보기를 선택한 후 "크기 검사자"를 선택합니다.

7. 너비를 320으로 설정하고 높이를 1000으로 설정합니다.

참고: 5, 6, 7은 StoryBoard 내에서 확장 또는 전체 확장 보기를 볼 수 있는 순수한 용도입니다.참고: View Controller에서 "Auto Layout(자동 레이아웃)"을 선택 취소해야 합니다.

View 계층은 다음과 같아야 합니다.

몇 시간 동안의 시행착오 끝에 저는 콘텐츠를 '화면 밖' 스크롤 보기에 넣는 매우 쉬운 방법을 찾았습니다.XCode 5 및 iOS 7로 테스트되었습니다. Storyboard에서는 두 가지 작은 트릭/해결 방법을 사용하여 거의 전적으로 이 작업을 수행할 수 있습니다.

1. 보기 컨트롤러를 스토리보드로 끕니다.
2. 이 보기에서 스크롤 보기를 끌어다 놓으면 데모의 경우 전체 화면을 커버하는 크기를 기본값으로 유지할 수 있습니다.
3. 이제 트릭 1이 제공됩니다. 스크롤 보기에 요소를 추가하기 전에 일반 '보기'를 끌어다 놓습니다. (이 보기는 화면보다 크게 만들어지며 버튼, 레이블 등의 모든 하위 요소를 포함합니다.)
4. 이 주변 뷰의 Y 크기를 size inspector(예: 800)로 지정합니다.
5. Y 위치 200의 어딘가에서 레이블을 둘러싸는 뷰에 '레이블 1'이라는 이름을 붙입니다.
6. 트릭 2: 화면 밖에 있는 항목을 추가할 수 있도록 주변 보기가 선택되었는지 확인하고(스크롤 보기가 아님) Y 위치를 예를 들어 -250으로 설정합니다.
7. 화면 아래쪽에 있는 레이블을 '레이블 2'로 지정합니다.이 레이블은 실제로 '화면 밖'입니다.
8. 화면 밖에 배치된 라벨 2는 더 이상 표시되지 않습니다.

지금까지는 스토리보드 작업을 위해 ViewController의 'viewDidLoad' 메서드에 코드 한 줄을 추가하여 ScrollViews 콘텐츠가 전체 'closing view'를 포함하도록 설정해야 합니다.Storyboard에서 이 작업을 수행할 방법을 찾지 못했습니다.

- (void)viewDidLoad
{
    [super viewDidLoad];

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

다음을 추가하여 이 작업을 시도할 수 있습니다.contentSize as asize신원 조사관(ID 검사기)의 View 스크롤로 이동하고 (320, 1000)으로 설정합니다.

애플은 스토리보드에서 이것을 좀 더 쉽게 만들어야 한다고 생각합니다. 테이블뷰 컨트롤러에서는 스토리보드에서 화면 밖으로 스크롤할 수 있습니다(20개의 셀만 추가하면 간단하게 스크롤할 수 있습니다). 스크롤뷰 컨트롤러에서도 가능해야 합니다.

iOS7에서 스크롤을 사용하고 iOS7 및 XCode5에서 자동 레이아웃을 사용합니다.

이 외에도 https://stackoverflow.com/a/22489795/1553014 도 있습니다.

우리가 해야 할 일은 다음과 같습니다.

1. 모든 제약 조건을 스크롤 보기로 설정(즉, 스크롤 보기를 먼저 수정)

2. 그런 다음 distance-from scrollView 제약 조건을 스크롤할 맨 아래 항목(슈퍼 뷰)으로 설정합니다.

참고: 2단계에서는 스크롤 보기 내에서 마지막 컨텐츠가 있는 위치를 스토리보드에 알려줍니다.

이 예에서는 인터페이스 작성기의 자동 레이아웃 기능을 선택 취소했습니다.그리고 저는 여전히 (아무 이유 없이) 비교적 오래된 4.6.1 버전의 Xcode를 사용하고 있습니다.

스크롤 뷰(기본 뷰)가 있는 뷰 컨트롤러부터 시작합니다.

1: 개체 라이브러리에서 스크롤 보기에 컨테이너 보기를 추가합니다.스토리보드에 새 뷰 컨트롤러가 추가되고 스크롤 뷰가 있는 뷰 컨트롤러에 연결됩니다.

2: 용기 뷰를 선택하고 Size Inspector(크기 관리자)에서 자동 크기 조정 없이 상단과 왼쪽에 고정합니다.

3: 높이를 1000으로 변경합니다(이 예에서는 1000이 사용됨).필요한 값을 적용해야 합니다.)

4: 새 뷰 컨트롤러를 선택하고 Attributes Inspector(속성 검사기)에서 Size(크기)를 Freeform(자유형)으로 변경합니다.

5: 새 뷰 컨트롤러의 뷰를 선택하고 크기 관리자에서 높이를 1000(용기 뷰의 높이와 동일)으로 변경합니다.

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

7: 원래 보기 컨트롤러에서 스크롤 보기를 선택합니다.Identity 검사기에서 keyPath가 contentSize로 설정된 속성을 추가하고 Size로 설정된 값을 입력하고 {320, 1000}(또는 컨테이너 뷰의 크기)로 설정합니다.

8: 4인치 iPhone Simulator에서 실행합니다.상단 레이블에서 하단 레이블까지 스크롤할 수 있어야 합니다.

9: 3.5인치 iPhone Simulator에서 실행합니다.상단 레이블에서 하단 레이블까지 스크롤할 수 있어야 합니다.

Xcode 4.6.1은 iOS6 이하에서만 빌드할 수 있습니다.iOS6용 이 접근 방식과 빌드를 사용하여 iOS7에서 앱을 실행해도 동일한 결과를 얻을 수 있습니다.

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

1 - 스크롤 뷰를 추가하고 상단, 하단, 선행 및 후행 제약 조건을 설정합니다.

2 - 스크롤 보기에 내용 보기를 추가하고 내용 레이아웃 가이드로 연결을 끌어 선행, 상단, 하단 및 후행을 선택합니다.해당 값을 0 또는 원하는 상수로 설정해야 합니다.

3 - Content View에서 Frame Layout Guide(프레임 레이아웃 가이드)로 끌어다 놓고 Equal Width(동일한 너비)를 선택합니다.

4 - 높이 제약 조건 상수를 Content View로 설정합니다.

로 고: 내서 내에서는 에UITableView셀 또는 요소를 선택하고 트랙패드를 사용하여 위 또는 아래로 스크롤하여 테이블 보기를 실제로 스크롤할 수 있습니다.

당분간UIScrollViewAlex의 제안은 마음에 들지만 일시적으로 뷰 컨트롤러를 자유형으로 변경하고 루트 뷰의 높이를 높이고 UI를 구축한 다음(1-5단계), 콘텐츠 크기를 런타임 속성으로 하드코드하지 않도록 표준 유추 크기로 다시 변경하는 것이 좋습니다.이렇게 하면 3.5" 및 4" 장치를 모두 지원하려고 하는 많은 유지 관리 문제와 향후 화면 해상도가 증가할 가능성이 있습니다.

고지 사항 : - ios 9 이상(스택 보기)에만 해당됩니다.

ios 9 장치에 앱을 배포하는 경우 스택 보기를 사용합니다.단계는 다음과 같습니다.

1. 제약 조건이 있는 스크롤 뷰 추가 - 핀에서 왼쪽, 오른쪽, 아래, 상단(마진 없음)에서 수퍼뷰(보기)까지
2. 동일한 제약 조건을 가진 스택 뷰를 추가하여 뷰를 스크롤합니다.
3. 스택 뷰 기타 제약 조건 :- 스택 뷰.bottom = 뷰.bottom and stackView.width = scrollView.폭
4. 보기 추가를 시작합니다.스크롤 보기는 스택 보기(기본적으로 내용 보기)의 크기를 기준으로 스크롤을 결정합니다.

저는 제 5센트를 수락된 답에 두고 싶습니다: 저는 이틀 동안 주제를 조사했고 마침내 제가 지금부터 항상 사용할 해결책을 찾았습니다.

승인된 답변의 항목 4로 이동하여 프레임 및 내용 크기 등의 속성을 추가하는 것을 잊습니다.

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

모든 것이 분명하고, 쉽고, 우아하고, ios 7의 매력처럼 작동합니다. 저는 그 모든 것에 대해 꽤 기쁩니다. 하하.

다음 샘플과 같이 contentSize 속성은 didAppear 보기에서만 설정해야 합니다.

- (void)viewDidAppear:(BOOL)animated{

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

}

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

여기 간단한 해결책이 있습니다.

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

2. 스크롤 뷰를 추가하고 일반적으로 하는 대로 제약 조건을 설정합니다. 즉, 스크롤 뷰를 뷰의 크기로 하려면 일반적으로 하는 것처럼 상단, 하단, 선행 및 후행 여백을 수퍼 뷰에 부착합니다.

3. 이제 스크롤 뷰의 하위 뷰에 스크롤 뷰의 위쪽과 아래쪽을 연결하는 제약 조건이 있는지 확인합니다.수평 스크롤이 있는 경우 왼쪽과 오른쪽도 마찬가지입니다.

iOS7에서 FreeForm-size View Controller의 UIScrollView 안에 View가 있으면 앱에서 스크롤되지 않습니다.게임을 해보니 FreeForms를 사용하지 않는 다음과 같은 기능이 있는 것 같습니다.

1. 뷰 컨트롤러의 기본 뷰 내에 UIScrollView 삽입

2. Scroll View에서 자동 레이아웃 제약 조건을 적절하게 설정합니다.저는 상단 레이아웃 가이드에 0을 사용하고 하단 레이아웃 가이드에 0을 사용했습니다.

3. Scroll View 내에 Container View를 배치합니다.원하는 대로 높이 설정(예: 1000)

4. 크기가 조정되지 않도록 높이 제약 조건(1000)을 컨테이너에 추가합니다.하단은 양식의 끝을 지나게 됩니다.

5. [self.scrollView setContentSize:CGSizeMake(320, 1000)]; 스크롤 뷰가 포함된 View 컨트롤러(IBOutlet으로 연결됨)

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

여기 수직 스크롤 뷰에 대한 동일한 솔루션에 대한 약간의 불쾌한 답변이 있지만 (스택 오버플로의 윤리에 반하여) 질문에 대답하지 않습니다.스크롤 뷰를 사용하는 대신 UITable View를 사용하고 일반 UIV View를 헤더로 끌어 원하는 크기로 만들면 이제 스토리보드에서 콘텐츠를 스크롤할 수 있습니다.

키를 지정할 필요가 전혀 없는 것 같습니다!구성요소 크기를 조정하거나 글꼴 크기를 변경하는 등의 이유로 변경되는 경우 유용합니다.

저는 방금 이 튜토리얼을 따랐고 모든 것이 작동했습니다: http://natashatherobot.com/ios-autolayout-scrollview/

(측면 참고:보기를 중앙에 배치하려는 경우를 제외하고는 viewDidLayoutSubviews를 구현할 필요가 없으므로 단계 목록은 더욱 짧아집니다.

도움이 되길 바랍니다!

핵심은 contentSize입니다.

UIScrollView를 추가할 때 누락되거나 표시되지 않는 경우가 많습니다.

UIScrollView를 선택하고 Identity Inspector를 선택합니다.

추가contentSize as asize신원 조사관(ID 검사기)의 View 스크롤로 이동하고 (320, 1000)으로 설정합니다.

스크롤을 내립니다.

자동 레이아웃을 사용하는 경우 스토리보드에 정적 셀이 있는 UITableViewController를 사용하는 것이 가장 좋습니다.

저는 또한 스크롤이 훨씬 더 많이 필요한 보기 문제에 직면한 적이 있으므로 위에서 언급한 기술로 UIScrollView를 변경합니다.

언급URL : https://stackoverflow.com/questions/12905568/how-to-use-uiscrollview-in-storyboard