자동 레이아웃을 사용하여 UIScrollview에서 제약 조건을 설정하려면 어떻게해야합니까?


176

나는 자동 레이아웃 전에 사소한 스크롤보기 설정을 달성하기 위해 혼합 및 순수 자동 레이아웃 접근법 에 대한 다양한 솔루션을 시험하는 데 이틀을 보냈으며 현재 공식적입니다. 너무 어리석어 야합니다. 나는 이것을 스토리 보드에서 주로 설정하고 있습니다 (잘, 그것은 그대로입니다).

도움을 청합니다.

뷰 트리 :

UIView
-UIView
-UIView
..-UIScrollview
...-UIButton
...-UIButton
...-UIButton

버튼은 가로로 스크롤해야합니다 (왼쪽에서 오른쪽으로 또는 그 반대로). 사람이 할 수 주십시오 나를 사용하여이 순수한 자동 레이아웃을 달성하기 위해 제약 조건을 설정하는 방법을 알려 ???

-

나는 혼합 접근법을 다음과 같이 시도했다.

UIView
- UIView
- UIView
..-UIScrollview
...-UIView (contentview)
....-UIButton
....-UIButton
....-UIButton

... 설정 고정 너비와 높이와에 대한 제약 contentviewtranslatesAutoresizingMaskIntoConstraints애플의 기술 문서에 따라 설정. 버튼과 스크롤보기는 제약 조건을 사용하여 설정됩니다. 이것은 스크롤 뷰 스크롤 (yay)을 얻지 만 아아, 너무 멀리 스크롤됩니다! 내가 알 수있는 한, 스크롤 너비는 내가 contentview를 설정 한 것보다 두 배가됩니까 ??? !!! ???

contentview유무에 관계없이 순수한 자동 레이아웃 접근법을 시도했습니다 . translatesAutoresizingMaskIntoConstraints=NO 제외한 모든 보기는 입니다 self.view. 버튼의 너비 / 높이 제한은 고정되어 있으며 스크롤보기의 네 가장자리에 모두 고정되어 있습니다. 스크롤이 없습니다.

그래서 나는 그것이 올바르게 작동하지 않는 이유에 대해 완전히 당황했습니다. 도움이 필요하면 다른 정보가 필요하면 문의하십시오!

솔루션이있는 스크린 샷 -buttonZ 제약 조건 :

여기에 이미지 설명을 입력하십시오

@ Jamie Forrest 편집 그래서 솔루션은 마지막 버튼의 잘못된 후행 제약 조건으로 판명되었습니다. 6441 대신 내가 설정 한 값은 -6441입니다. 까다로운 점은 스토리 보드에서 값을 설정할 때 핀 도구 모음에 두 가지 옵션이 있다는 것입니다.

여기에 이미지 설명을 입력하십시오

현재 캔버스 값은 음수이고 (스크롤이 없음) 아래 옵션은 양수입니다 (스크롤 활성화 중). 이것은 내가 바보가 아니지만 적어도 반맹 인 것 같아요. 내 방어를 위해 XCode가 "잘못된"설정에 대한 오류를 표시하지 않는 것이 다소 혼란스럽지 않습니까?

다시 편집 이제 재미있다 ... 후행 값을 -6441 (스크롤 없음)에서 6441 사용 스크롤로 변경. 그러나 나의 오랜 친구 인 "너무 많은 contentsize"가 돌아 왔으며, 콘텐츠 크기가 두 배로 커졌습니다! 올바른 컨텐츠 스크롤을 얻는 솔루션은 후행 제한 조건을 ZERO! 스토리 보드에서 작업 할 때 분명하지 않지만 @Infinity James '코드를 보면 이것이 있어야합니다.


스크롤보기의 내용 크기는 어디에서 계산 / 설정합니까? contentView를 사용하는 첫 번째 시도를 참조하면 너무 멀리 스크롤한다고 말했습니다.
Tim

2
내가 아는 한, 자동 레이아웃 만 사용 contentSize하도록 설정할 수 없습니다 UIScrollView. 그리고 그것은 contentSize당신이 얼마나 많이 스크롤 할 수 있는지를 정의합니다. 따라서 결국 어딘가에 수동으로 설정해야합니다. 나머지의 경우 레이아웃 구속 조건을 사용하여 서로에 대해 뷰 프레임을 설정할 수 있습니다.
기 illa

@ Jeff, 내용 크기는 고정되어 있으며 절대 변하지 않습니다. 나는 contentiview에 대한 올바른 높이와 너비를 수동으로 입력하여 스토리 보드의 콘텐츠 크기를 설정하고 스토리 보드의 제약 조건으로 높이와 너비를 고정합니다.
user1459524

런타임에 contentSize를 인쇄하고 입력 한 값과 일치하는지 확인하십시오. contentSize는 스크롤 발생량을 결정하므로 첫 번째 시도의 문제는 contentSize와 관련이 있습니다.
Tim

@Guillaume, 그래서 "순수한 자동 레이아웃"접근 방식이 그렇게 순수하지 않습니까? 그러나 contentSize를 수동으로 설정하는 방법은 무엇입니까? 위에서 언급했듯이 콘텐츠보기의 높이 / 너비를 고정 값 (스토리 보드에서)으로 설정하고 있습니다. 그러나 너무 멀리 스크롤됩니다 (2x).
user1459524

답변:


68

여기에 붙여 넣었을 때 구속 조건의 정확한 값과 설정을 확인하기가 어렵 기 때문에 잘못된 위치의 스크린 샷을 볼 수는 없습니다.

설정에서 무엇이 잘못되었는지에 대한 설명 대신, 설명하는 것과 매우 유사한 뷰 계층 구조 및 제약 조건 설정을 사용하여 기본 샘플 프로젝트 를 만들었습니다 . 가로 스크롤은 샘플 프로젝트에서 예상 한대로 작동하며, Apple은 기술 노트 에서 설명하는 "Pure AutoLayout"접근 방식을 사용합니다 .

또한 원래 자동 레이아웃 작업을 수행하는 데 많은 문제가있었습니다 UIScrollView. 그것이 작동하게하는 열쇠는 스크롤보기의 모든 항목이 함께 스크롤 목록의 모든면에 연결되어 AutoLayout 시스템이 contentSize를 결정할 수있는 제약 조건을 갖도록하는 것입니다 프레임보다 큰 스크롤보기. 코드에서 그렇게하려고하는 것처럼 보이지만 contentSize를 너무 작게 만드는 불필요한 제약이있을 수 있습니다.

또한 다른 사람들이 언급했듯이 AutoLayout 및 UIScrollview를 사용하면 더 이상 contentSize를 명시 적으로 설정하지 않습니다. 자동 레이아웃 시스템은 제약 조건에 따라 contentSize를 계산합니다.

또한 이 eBook 장이이 모든 것이 어떻게 작동하는지 이해하는 데 매우 도움 된다는 것을 알았습니다 . 이 모든 것이 도움이되기를 바랍니다.


2
샘플 프로젝트 감사합니다! 그것은 작동하고 그것을 보면서, 처음에는 내 프로젝트와 다른 점을 찾을 수 없었습니다! 제약 조건 이외의 다른 설정을 의심하면서 뷰를 프로젝트에 복사했지만 계속 작동했습니다. 이로 인해 프로젝트의 마지막 버튼에 대한 후행 제약 조건이 음수라는 것을 알았습니다. -를 양수로 변경하면 스크롤이 활성화됩니다! 핀 도구 모음을 표시 할 때 음수 인 현재 캔버스 값 사용 및 양수인 스크롤보기 (현재 값 사용) ...?!
user1459524

아 예. 음수 값은 실제로 스크롤 뷰의 contentSize를 더 작게 하여 버튼이 끝나기 전에 후행 가장자리를 끝내야한다는 사실과 일치합니다 . 샘플 프로젝트가 기뻤습니다!
Jamie Forrest

많이 했어. 업데이트 된 답변을 확인하십시오. 후행 값은 실제로 0이어야합니다.
user1459524

6
코드 대신 스크린 샷을 공유해야하는 것은 슬픈 일입니다. 애플이 개발자에게 더 나은 API를 제공하는 대신 빌더를 사용하도록 권장하기 때문입니다.
Vladimír Slavík

4
완전히 직관적이지 않습니다. 개발자는 XCode 제작자의 마음에 무슨 일이 일어나고 있는지 파악하기 위해 몇 시간과 몇 시간을 낭비해야합니다.
Josh

49

LOL은 바보 클럽에 오신 것을 환영합니다. 저는 창립자 중 한 사람입니다. :디

수직 스크롤의 경우 : 작동시킬 수있는 유일한 방법 (iOS 8, Xcode 6 및 순수 자동 레이아웃)은 스크롤보기에 다음 제약 조건을 추가하는 것입니다 (모두 수퍼 뷰와 관련됨).

  • 동일한 폭
  • 동등한 높이
  • 중심 Y 정렬
  • 중심 X 정렬

내 구조 :

  UIView
   - ScrollView
    - Subview
    - Subview
    - Subview
    - Subview
    - ...

이것이 최종 결과입니다.

데모

이것은 설정입니다 :

설정 전체 화면

그리고 여기 프로젝트가 있습니다.

희망적으로 이것은 누군가가 오전 5시에 잠들지 못하게 할 것입니다. :디


도움을 주셔서 감사합니다! "subview"유형의 서브 뷰를 어떻게 얻었습니까 ?? Xcode 6.2에서 프로젝트를보고 있는데, 작은 사각형을 "Subview"라고 부릅니다.
Andrew K

1
인사말! "Subview"는 실제로 UIVIew입니다. 그저 이름 일뿐입니다. 아무거나 입력해도됩니다. 이 이미지를 확인하십시오. cl.ly/image/291f1K2N0V3p 구속 조건 주제에서 하위 뷰에는 높이 구속 조건 이상의 것이 있습니다. cl.ly/image/3l061i123j2i
backslash-f

1
여전히 스크롤 작업을 수행 할 수 없습니다. 프로젝트에서 하위보기보기가 "회색으로 표시됩니다". 몇 가지 조사를 한 후 '크기 클래스'를 사용하고 있기 때문입니다. 이것이 스크롤에 어떤 영향을 미칩니 까? 이것을 사용하지 않고 스크롤을 작동시키는 방법이 있습니까?
앤드류 K

또한, 슈퍼 뷰를 기본 길이보다 얼마나 길게 만들었습니까? "접은 곳 아래"(또는 화면 밖)에 나타날 버튼을 추가하려고하는데, 충분히 크지 않기 때문에 수퍼 뷰에 끌어다 놓을 수없는 경우 수퍼 뷰에 추가 할 수 없습니다.
앤드류 K

1
이 어리 석음 레이아웃을 검색하고 긴 하루를 보낸 후, 나는이 답변을 발견하고 첫 번째 시도에서 작동합니다. 고마워요 .. 당신은 내 하루를 구할 수 있습니다. )
바비 Stenly 10

32

간단한 자체 포함 된 예

질문에 대한 많은 표와 답변에 대한 많은 표로 판단하면 사람들은 여기서 이해할 수 있고 빠른 해결책을 찾지 못합니다. 하나 추가해 보겠습니다. 이 프로젝트는 Interface Builder에서 완전히 수행 된 독립적 인 예제입니다. 10 분 이내에 작업을 수행 할 수 있어야합니다. 그런 다음 배운 개념을 자신의 프로젝트에 적용 할 수 있습니다.

여기에 이미지 설명을 입력하십시오

원래 질문은 스크롤 버튼에 대해 묻습니다. 여기서는 UIViews를 사용 하지만 원하는 뷰를 나타낼 수 있습니다. 스토리 보드 스크린 샷이이 형식에 비해 더 작기 때문에 가로 스크롤도 선택했습니다. 그러나 세로 스크롤의 원리는 동일합니다.

주요 컨셉

  • UIScrollView하나 개의 서브 뷰를 사용해야합니다. 스크롤하려는 모든 내용을 담을 수있는 컨텐츠보기 역할을하는 'UIView'입니다.
  • 내용보기와 스크롤보기의 부모 가 가로 스크롤의 높이를 동일하게 설정하십시오. (세로 스크롤의 경우 동일한 너비)
  • 스크롤 가능한 모든 컨텐츠의 너비가 설정되어 있고 모든면에 고정되어 있는지 확인하십시오.

새로운 프로젝트를 시작하십시오

단일 뷰 응용 프로그램 일 수 있습니다.

스토리 보드

이 예에서는 가로 스크롤보기를 만듭니다. View Controller를 선택한 다음 Size Inspector에서 Freeform을 선택하십시오. 너비 1,000와 높이를 확인하십시오 300. 이것은 스토리 보드에 스크롤 할 컨텐츠를 추가 할 공간을 제공합니다.

여기에 이미지 설명을 입력하십시오

스크롤보기 추가

UIScrollView뷰 컨트롤러의 루트 뷰에 4면을 모두 추가 하고 고정합니다.

여기에 이미지 설명을 입력하십시오

컨텐츠 뷰 추가

UIView스크롤보기에 하위보기로 추가하십시오 . 이것이 핵심입니다. 스크롤 뷰에 많은 하위 뷰를 추가하지 마십시오. 하나만 추가하면 UIView됩니다. 스크롤하려는 다른보기에 대한 컨텐츠보기가됩니다. 컨텐츠보기를 네면 모두의 스크롤보기에 고정하십시오.

여기에 이미지 설명을 입력하십시오

동등한 높이

이제 문서 개요 Command에서 내용보기와 스크롤보기의 부모보기 를 모두 클릭 하여 모두 선택하십시오. 그런 다음 높이를 동일하게 설정하십시오 ( Control컨텐츠 뷰에서 스크롤 뷰로 드래그). 이것은 또한 핵심입니다. 가로로 스크롤하기 때문에 스크롤보기의 내용보기는 이러한 방식으로 설정하지 않으면 얼마나 높은지 알 수 없습니다.

여기에 이미지 설명을 입력하십시오

노트 :

  • 콘텐츠를 세로로 스크롤하는 경우 콘텐츠보기의 너비를 스크롤보기의 부모 너비와 동일하게 설정합니다.

내용 추가

세 개를 UIView더하고 모든 제약 조건을 부여 하십시오 . 나는 모든 것에 8 포인트 마진을 사용했습니다.

여기에 이미지 설명을 입력하십시오

제약 사항 :

  • 녹색보기 : 위쪽, 왼쪽 및 아래쪽 가장자리를 고정하십시오. 너비를 400으로 만듭니다.
  • 빨간색보기 : 위쪽, 왼쪽 및 아래쪽 가장자리를 고정합니다. 너비를 300으로 만듭니다.
  • 자주색보기 : 네 모서리 가장자리를 모두 고정합니다. 남은 공간 (이 경우 268)의 너비를 지정하십시오.

스크롤 뷰가 컨텐츠 뷰의 너비를 알 수 있도록 너비 제한을 설정하는 것도 중요 합니다.

끝마친

그게 다야. 지금 프로젝트를 실행할 수 있습니다. 이 답변 상단의 스크롤 이미지와 같이 작동해야합니다.

수직 스크롤의 경우,이 예제에서 모든 너비와 높이 방향을 바꾸십시오 (테스트 및 작동).

추가 연구


9

contentSize는 UIScrollView 내부에 제약 조건을 적용하여 암시 적으로 설정됩니다.

예를 들어 UIView 내부에 UIScrollView가 있습니까? 확실히 알 수 있습니다.

    UIView *containerView               = [[UIView alloc] init];
    UIScrollView *scrollView            = [[UIScrollView alloc] init];
    [containerView addSubview:scrollView];
    containerView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.translatesAutoresizingMaskIntoConstraints    = NO;
    NSDictionary *viewsDictionary       = NSDictionaryOfVariableBindings(containerView, scrollView);

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil
                                                                            views:viewsDictionary]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil

그러면 scrollView가 containerView의 크기를 채우도록 설정됩니다 (containerView는 특정 크기 여야합니다).

그런 다음 UIScrollView의 contentSize를 다음과 같이 버튼을 보유 할 수있을 정도로 크게 설정하여 UIScrollView의 contentSize를 조정할 수 있습니다.

    UIButton *buttonA                   = [[UIButton alloc] init];
    UIButton *buttonB                   = [[UIButton alloc] init];
    UIButton *buttonC                   = [[UIButton alloc] init];
    [scrollView addSubview:buttonA];
    [scrollView addSubview:buttonB];
    [scrollView addSubview:buttonC];
    buttonA.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonB.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonC.translatesAutoresizingMaskIntoConstraints       = NO;

    viewsDictionary                     = NSDictionaryOfVariableBindings(scrollView, buttonA, buttonB, buttonC);

    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[buttonA]-|"
                                                                       options:kNilOptions
                                                                       metrics:nil
                                                                         views:viewsDictionary]];
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[buttonA]-[buttonB]-[buttonC]-|"
                                                                       options:NSLayoutFormatAlignAllBaseline
                                                                       metrics:nil
                                                                         views:viewsDictionary]];

그래서 containerView와 버튼이 아닌 scrollView와 버튼 사이의 제약 조건을 설정 했습니까? 나는 그것이 당신의 코드와 지금 스토리 보드를 통해 내가하고있는 일 사이에 스포츠의 유일한 차이점에 관한 것이라고 생각합니다.
user1459524 18시 49 분

CONTAENTRview가 아닌 ​​CONTAINERview를 설정하고 있다는 것을 두 번째로 읽은 후에 만 ​​깨달았습니다. 귀하의 코드를 기반으로 스토리 보드의 모든 것을 정확하게 다시 만들었으며 스크롤하지 않습니다. 스크린 샷으로 질문을 편집하겠습니다.
user1459524

1
스토리 보드에서 코드를 다시 만들려는 시도가 100 % 정확하지 않은 것으로 나타났습니다. 마지막 버튼의 후행 값은 정확히 0이어야하며 H를 미러링해야합니다. |-[buttonA]-[buttonB]-[buttonC]-| 스토리 보드에서 작업 할 때 (또는 적어도 나에게는 그렇지 않은) 분명하지 않지만 지금은 사소한 것처럼 보입니다. 나는 자동 레이아웃을 좋아하지만 그 작은 것들이 나중에 얻을 수 있습니다.
user1459524

@ user1459524가 언급 한 것은 저에게 문제였습니다. 내 하단보기는 버튼이었고 하단 제약 조건은 IB에 의해 -32였습니다. 나는 그것을 0으로 설정하고 IB에서 Bottom Space to superview로 업데이트했습니다. 그것은 효과가있을 것입니다. 긍정적 인면에있는 한 효과가 있습니다. IB에 버그가있는 것 같습니다. 다른 사람을 돕는 희망. 나는 또한 모든 견해를 제거하고 다시 배선하여 찾은 것을 찾을 때 도움이되며 일반적으로 오래 걸리지 않습니다.
Michael

8

UIScrollView와 함께 AutoLayout을 사용하는 것에 대해 너무 많은 질문이 있습니다. 우리가 무시할 핵심은 UIScrollView의 내부 뷰가 콘텐츠 뷰 에 대해 제약을 가하지 만 UIScrollView 자체 는 제한 하지 않는다는 것입니다. 기술 노트 TN2154를 참조하십시오 .

UIScrollView 클래스는 경계의 원점을 변경하여 내용을 스크롤합니다. 자동 레이아웃에서이 작업을 수행하려면 스크롤보기의 위쪽, 왼쪽, 아래쪽 및 오른쪽 가장자리가 컨텐츠보기의 가장자리를 의미합니다.

다음 그림은이를 보여줍니다. 여기에 이미지 설명을 입력하십시오

후미 공간이 500 포인트임을 알 수 있습니다. UIScrollView를 제한하면 뷰가 누락되고 프레임을 업데이트해야합니다. 그러나 경고 나 오류는 없습니다. 모든 구속 조건이 컨텐츠보기에 대한 것이기 때문입니다.

UIScrollView는 내부 뷰의 제약 조건에 따라 콘텐츠 뷰의 크기를 계산합니다. (예를 들어, 컨텐츠 크기 : 너비 = 100 (리딩 스페이스) + 200 (뷰의 너비) + 500 (트레일 스페이스), 높이 = 131 (맨 위 간격) + 200 (높이) + 269 (맨 아래 간격)

UIScrollView에서 뷰에 대한 제약 조건을 추가하는 방법 :

  1. 컨텐츠 뷰에서 뷰의 위치를 ​​이미징합니다.
  2. 컨텐츠 뷰의 가장자리에 상단, 오른쪽, 하단, 왼쪽 간격을 추가하고 이러한 뷰의 너비와 높이를 추가하십시오.

그리고 모든 것이 끝났습니다.

스크롤보기로 AutoLayout을 처리하는 쉬운 방법은 스크롤보기에서 모든 하위보기를 포함하는 컨테이너보기를 추가하는 것입니다.

결론 : UIScrollView를 사용하여 AutoLayout을 이해하는 요점은 내부 뷰가 컨텐츠 뷰에 ​​대해서는 제한을 두지 만 UIScrollView 자체는 제한하지 않는다는 것입니다.

첨부 된 예제 코드


5

다음 솔루션은 자동 레이아웃이 있고 contentSize가없는 scrollView에 효과적 이었습니다 .

  1. n scrollView를 끌어서 viewController로 이동하고 원하는 공간을 덮기 위해 모든 제약 조건을 적용하십시오.
  2. scrollView 내부 에 UIView를 끌어다 놓고 scrollView의 전체 공간을 덮고 scrollView의 상단, 왼쪽, 오른쪽, 하단 공간에 제약 조건을 적용하십시오 .
  3. 스크롤 필요에 따라 내부보기 의 높이 (및 가로 스크롤이 필요한 경우 너비)를 설정하십시오 . 필요한 경우 코드에서이 부분을 수행 할 수도 있습니다.
  4. 중요 합니다. 포인트 (3)에서 높이를 약간 큰 값으로 설정 한 후 포인트 (2)로 돌아가서 Xcode가 강제로 변경할 때 Xcode가 변경했을 수 있으므로 상단, 왼쪽, 오른쪽, 하단 값 을 0 으로 다시 설정해야합니다. 높이를 (3)으로 변경했습니다.

그리고 당신은 끝났습니다. 이제이 뷰에 원하는 수의 컨트롤을 추가하고 서로 관련된 제약 조건을 적용 할 수 있습니다 (이 뷰 없이는 작동하지 않는 것 같습니다). 이 뷰를 사용하지 않으려면 scrollView와 관련된 각 컨트롤에 대해 제약 조건을 적용해야합니다 (서로 관련되지 않음).


압도적 인 팁 ...........

중요 합니다. 명확성을 위해 UIScrollView의 너비1000이고 높이는 100입니다. (실제로 이러한 값은 물론 장치의 너비 등에 따라 동적입니다. 그러나 지금은 너비가 1000이고 높이가 100이라고 말합니다.) 가로 스크롤을 수행한다고 가정 해 봅시다. UIScrollView 안에 UIView를 넣습니다. ( "컨텐츠 뷰"입니다.) 컨텐츠 뷰의 상하 좌우 선행 4 개를 모두 스크롤 뷰로 설정하십시오. 잘못된 것 같더라도 모두 0으로 만듭니다. 콘텐츠 UIView의 높이를 100으로 설정하고 잊어 버리십시오. 이제 가로로 스크롤하기를 원하므로 콘텐츠 뷰의 너비를 1225로 설정하십시오.

컨텐츠보기의 너비는 이제 상위 스크롤보기의 너비보다 225 더 큽니다. 괜찮습니다. 사실, 당신은 그렇게해야합니다. 참고

... 후행 너비를 음수 225로 설정 하지 마십시오 ...

평소처럼 너비를 "일치시켜야"한다고 생각할 입니다. 그러나 그렇게하면 전혀 작동하지 않습니다.

선행 및 후행 숫자를 ZERO로 설정해야합니다 (너비가 "더 큰"임에도 불구하고 음수는 아님).

흥미롭게도 실제로 선행 / 트레일 숫자를 양수 값 ( "50")으로 설정할 수 있으며 바운스의 여백을 제공합니다. (종종 멋지게 보입니다. 시도해보십시오.) 양쪽 끝에있는 음수 값은 "자동으로 끊어집니다".

화나게도 종종 Xcode (7.3.1 현재),

이 값을 '유용하게'음수로 설정합니다!

자동으로 집계하려고하기 때문입니다. 그렇다면 자동으로 중단됩니다. 첫 번째 인스턴스에서 네 개의 값을 모두 0으로 설정하십시오. 예제에서 컨텐츠 뷰의 너비를 "1000"보다 훨씬 넓게 설정하십시오.


편집 : 필자는 대부분의 요구 사항에 대해 UIScrollView 대신 UITableView를 사용했습니다. tableView가 훨씬 유연하고 역동적 인 것처럼 보입니다.


이것이 실제로 가장 좋은 대답입니다. 감사!
Fattie

4

에 문제가 있다고 가정합니다 contentSize. "순수한"자동 레이아웃 접근 방식을 사용할 때 처리 방법에 대한 이 블로그 게시물 을 확인하십시오 contentSize. 요점은 제약 조건이 암시 적으로 내용 크기를 정의한다는 것입니다. 자동 레이아웃을 사용할 때 명시 적으로 설정하지 마십시오. 블로그 게시물 끝에 예제 프로젝트를 첨부하여 작동 방식을 보여줍니다.


3

기술 노트에 살펴 보았을 수있는 부분이 있습니다. 스크롤보기의 가장자리에 고정 된 구속 조건을 사용하여 스크롤보기의 컨텐츠 크기를 암시 적으로 설정할 수 있습니다.

다음은 간단한 예입니다. 하나의 스크롤보기가있는 하나의보기로 스토리 보드를 작성하십시오. 스크롤 뷰 제약 조건을 설정하여 뷰의 크기에 맞 춥니 다.

해당 스크롤보기 안에 단일보기를 추가하십시오. 제약 조건을 사용하여 해당 뷰의 크기를 명시 적으로 설정하고 크기가 스크롤 뷰보다 큰지 확인하십시오.

이제 내부 뷰의 네 모서리를 부모 스크롤 뷰에 고정하는 내부 뷰에 구속 조건을 네 개 더 추가하십시오. 이 네 가지 제약 조건으로 인해 컨텐츠 크기가 내부보기를 수용하도록 확장됩니다.

스크롤보기에 추가하려는 여러보기가있는 경우 (예 : 가로로 배치 한 경우) 첫 번째 하위보기의 왼쪽을 스크롤보기의 왼쪽에 잠그고 하위보기를 서로 가로로 잠그고 오른쪽 스크롤보기의 오른쪽에있는 마지막 하위보기의 측면. 이러한 제약으로 인해 스크롤 뷰의 컨텐츠 크기가 모든 하위 뷰와 해당 제약 조건을 수용하도록 확장됩니다.


3

귀하의 질문이 "초점 스크롤 UIScrollView에 많은 UITextFields를 배치하여 포커스가있을 때 키보드에서 벗어나도록하는 방법"인 경우 가장 좋은 대답은 다음과 같습니다.

하지마

정적 셀과 함께 UITableViewController를 대신 사용하십시오.

이 스크롤 아웃 동작은 무료로 제공되며, 뷰 컨트롤러가 UINavigationController 내부에 표시되는 경우 모든 콘텐츠 삽입물이 작동합니다.


3


ViewControllerView포함 ScrollView, ScrollView포함 ContainerView, ContainerView포함하는 것처럼 레이아웃을 구성해야합니다Labels
여기에 이미지 설명을 입력하십시오

그런 다음 3 단계따라ScrollView 스크롤 할 수 있습니다.

  1. 설정 ScrollView핀에 (상 / 좌 / 하 / 좌)ViewControllerView
    • 설정 ContainerView핀에 (상 / 좌 / 하 / 좌)ScrollView
    • 설정 Horizontally in Container( 하지 않는 설정 Vertically in Container)
    • Label1핀 ( 상단 / 오른쪽 / 왼쪽)을ContainerView
    • Label1핀 (좌 / 우 / 하단 )에 ContainerView그리고 상부Label1

여기에 이미지 설명을 입력하십시오

여기 데모 프로젝트입니다

이 도움을 바랍니다


1

순수한 자동 레이아웃 접근법은 아름답게 작동하지만 비 자동 레이아웃에서 마이그레이션하는 경우 설정하기가 매우 어렵습니다. 나는 지금 몇 번 그것을했고 몇 가지 일반적인 팁이 있습니다.

  • 작게 시작하십시오. 스토리 보드보기를 다시 작성해야하는 경우에도 몇 가지 요소로 시작하고 천천히보기를 작성하여 몇 가지 요소를 추가 한 후 스크롤이 작동하는지 테스트하십시오.
  • 자동 크기 조정 마스크를 모든 것에 대해 제약 조건을 해제하십시오. 이것이 항상 제약 조건 충돌의 원인이었습니다.
  • UIScrollView 제약 조건을 올바르게 설정하십시오 : 스크롤보기가 모든면에서 부모보기에 연결되어 있는지 확인하십시오. 그렇지 않으면 전혀 확장되지 않습니다.

1

이 문제를 해결 한 후, 마침내 해결책을 찾았습니다. 범용 클래스 크기 스토리 보드 (600x600)로 작업하고 있습니다. scrollView 크기의 UIView (contentView)를 만들고 scrollView의 Top, Bottom, Leading 및 Trailing에 대한 제약 조건을 만들었습니다. 그런 다음 contentView의 크기를 600x600으로 수동으로 자릅니다. 스토리 보드는 모든 크기 조정을 중단했으며 작동 할 수는 있지만 실제 장치 또는 시뮬레이터에서보기가 끔찍했습니다. 이 잘린 크기의 구속 구 2 개를 만들었습니다.

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewWidthConstraint; 
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewHeightConstraint;

그런 다음 viewDidLoad

CGSize viewSize = self.view.frame.size;
self.contentViewWidthConstraint.constant = viewSize.width;
self.contentViewHeightConstraint.constant = viewSize.height;

잘 작동합니다.


1

자동 레이아웃을 사용하여 포함 된 Scrollview를 사용하여 보이는 화면의 스크롤보기를 가운데에 배치하는 방법에 대한 해결책을 찾으려고 며칠을 보냈습니다.이 화면은 모든 장치 / 화면 크기뿐만 아니라 화면 회전에서도 작동합니다.

나는 Autolayout으로 만 며칠을 보냈고 가까이 다가 갔지만 결코 닫히지 않았습니다. 결국에는 viewDidLoad에서 화면 당 3 줄의 코드를 추가해야했습니다.

아래 솔루션을 참조하십시오.

  1. 스크롤보기를 만들고 원하는 객체로 채 웁니다.
  2. 자동 레이아웃 켜기
  3. 그런 다음 ScrollView를 세로 및 가로로 가운데에 맞추십시오. 중앙 ScrollView
  4. 선택 보기를 한 후 '실종 제약 조건 추가' - 이것은 다음의 일을
  5. 그 결과 많은 제약 조건이 생성됩니다. 뷰에 대해 'Horiz space scrollview to View'및 'Vert space scrollview to view'또는 그 반대의 두 가지 새로운 뷰가 생성됩니다.
  6. 'Horiz space scrollview to View'를 삭제하면 View에 3 개의 제약 조건이 남습니다. 보기에 스크롤보기를 입력하기위한 2 및 스크롤보기와보기 사이에 수직 간격을 설정하기위한 것
  7. 이제 클릭하고 Ctrl 키를 눌러 헤더 파일로 Vert 제약 조건을 코드에 연결하고 NSLayoutConstraint IBOutlet (내 제약 조건 VertVtoSV라고 함)을 만듭니다.
  8. 이제 .m 파일로 이동하여 이러한 코드 줄을 viewDidLoad에 추가하십시오 (올바른 정점 중심을 얻기 위해 패딩 양으로 재생하십시오)

    if (IPAD)

    {self.constraintVertVtoSV.constant = 150.0; }

  9. 이것은 이제 모든 장치에서 실행되며 올바르게 가운데에 있고 여전히 올바르게 스크롤됩니다.


1

나처럼 하위 뷰 내부에 아무런 제약없이 정적 콘텐츠를 사용하면 다음과 같이 할 수 있습니다.

override func viewDidLayoutSubviews() {
    scrollView.contentSize = CGSizeMake(320, 800)
}

1

오늘 iOS 8.4, Xcode 6.4에서 비슷한 문제가 있습니다.

서브 뷰를 포함하는 contentView (UIView)를 포함하는 스크롤보기를 포함하는보기가 있습니다.

모든 것이 자동 레이아웃입니다. 스크롤 뷰 가장자리는 구속 조건으로 부모보기 가장자리에 고정됩니다. 컨텐츠 뷰 모서리는 제한 조건을 사용하여 스크롤 뷰 모서리에 고정됩니다.

원래 내용보기는 스크롤보기의 전체 너비로 크기가 조정되지 않습니다. 너비가 부모 스크롤보기와 일치하도록 콘텐츠보기에 추가 제약 조건을 추가해야했습니다. 또는 contentView.centerX == scrollView.centerX 제약 조건을 설정할 수 있습니다. 가장자리를 고정하는 것 외에도 그 중 하나가 갑자기 콘텐츠보기의 크기를 적절하게 만들었습니다.

// Either one of these additional constraints are required to get autolayout to correctly layout the contentView. Otherwise contentView size is its minimum required size
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: .CenterX, relatedBy: .Equal, toItem: scrollView, attribute: .CenterX, multiplier: 1.0, constant: 0))
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0.0))

폼의 시각적 제약 조건을 사용하여 콘텐츠보기의 가장자리를 스크롤보기에 고정

let cvConstraints = ["H:|[contentView]|", "V:|[contentView]|"]

루틴을 사용하여 배열을 반복하고 scrollView에 추가합니다.


1

나는 비슷한 문제에 직면했다. 나는 모든 제약을 설정했으며 왜 여전히 일부 하위 뷰의 크기를 조정하는지 궁금해했습니다. 내 해결책은 clipsToBounds를 YES로 설정하는 것이 었습니다.


1

에서 빠른 이 작업 솔루션을 사용할 수 있습니다.

금기

ScrollView: 선행, 후행, 상단, 하단 = Superview

ContentView: 선행, 후행, 상단, 하단 = ScrollView. 내용물에 대해 고정 / 높이.

width constraint (contentView)를 scrollviews superview와 동일하게 설정할 수 있지만 프로그래밍 방식으로 제약 조건을 추가하므로 빌드 타임에 remove remove를 선택하십시오. 이것은 IB가 경고에 대해 불평하지 않도록하기위한 것입니다.

extension UIView {

    func setupContentViewForViewWithScroll(contentView vwContent : UIView) {
        //Set constraint for scrollview content
        let constraint = NSLayoutConstraint(item: vwContent, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: self.bounds.size.width)
        vwContent.addConstraint(constraint)
        self.layoutSubviews()
    }

}

그리고 View Controller에서 viewDidLayoutSubviews나는이 메소드를 호출합니다.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.view.setupContentViewForViewWithScroll(contentView: vwContent)
}

0

나는 이것이 평신도의 해결책이며 Apple이 docu에서 제안한 것이 아니라 다른 내용으로 두 번 일했으며 매우 빠르게 설정할 수 있다는 것을 알고 있습니다. 스토리 보드보기 컨트롤러 삽입 UIView. UIView에서 테이블 뷰, 동적, 0 프로토 타입 셀, 스타일 일반 또는 그룹화를 삽입하십시오. 테이블보기에서 스크롤보기를 삽입하고 스크롤보기에서 내용을 삽입하십시오. 커스텀 뷰 컨트롤러에는 설정이 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.