UIScrollView 스크롤 가능 컨텐츠 크기 모호성


510

동료 개발자, Interface Builder (Xcode 5 / iOS 7)의 AutoLayout에 문제가 있습니다. 매우 기본적이고 중요하므로 모든 사람들이 이것이 어떻게 작동하는지 알아야한다고 생각합니다. 이것이 Xcode의 버그 인 경우 중요한 버그입니다!

따라서 이와 같은 뷰 계층 구조가있을 때마다 문제가 발생합니다.

>UIViewController
>> UIView
>>>UIScrollView
>>>>UILabel (or any other comparable UIKit Element)

UIScrollView는 모든면에서 50 픽셀 (예 : 문제 없음)과 같은 견고한 제약 조건이 있습니다. 그런 다음 UILabel에 Top Space 제약 조건을 추가합니다 (문제 없음) (심지어 레이블의 높이 / 너비를 고정하고 아무것도 변경할 수는 없지만 레이블의 고유 크기로 인해 불필요해야합니다)

UILabel에 후행 제한 조건을 추가하면 문제점이 시작됩니다.

예 : 후행 공간 : Superview 같음 : 25

이제 두 가지 경고가 발생하며 이유를 이해하지 못합니다.

A) 스크롤 가능한 컨텐츠 크기 모호성 (스크롤보기에는 스크롤 가능한 컨텐츠 높이 / 너비가 모호함)

B) 잘못된 뷰 (라벨 예상 : x = -67 실제 : x = 207

나는 당신이 다운로드 할 수있는 갓 새로운 프로젝트 에서이 최소한의 예를했고 스크린 샷을 첨부했습니다. 보다시피 Interface Builder는 Label이 UIScrollView의 경계 (주황색 점선 사각형) 밖에있을 것으로 예상합니다. 문제 해결 도구를 사용하여 레이블의 프레임을 업데이트하면 바로 프레임이 이동합니다.

참고 : UIScrollView를 UIView로 바꾸면 예상대로 동작합니다 (레이블의 프레임이 정확하고 제약 조건에 따름). 따라서 UIScrollView에 문제가 있거나 중요한 것이 빠져 있습니다.

IB가 제안한대로 Label의 프레임을 업데이트하지 않고 앱을 실행하면 정확히 위치해야하며 UIScrollView는 스크롤 가능합니다. 프레임을 업데이트하면 Label이 보이지 않고 UIScrollView가 스크롤되지 않습니다.

오비완 케노비 도와주세요! 왜 모호한 레이아웃입니까? 왜 위치가 잘못 되었나요?

https://github.com/Wirsing84/AutoLayoutProblem : 여기에서 샘플 프로젝트를 다운로드하고 진행 상황을 알아낼 수 있는지 시도 하십시오.

인터페이스 빌더의 문제점 설명


8
UILabel을 컨텐츠보기에 배치 한 다음 레이블의 끝 가장자리를 컨텐츠보기 (일반 UIView)로 설정하십시오. 이 비디오는 당신에게 크게 도움이 될 것입니다 : youtube.com/watch?v=PgeNPRBrB18&feature=youtu.be
erdekhayser

1
훌륭한 비디오이지만 경고를 해결하지 못했습니다. :(
Mr Rogers

비디오에 대해 대단히 감사합니다. (놀랍게도) 비디오에서 많은 것을 배웠습니다! 그러나 비디오에 대한 지식을 stackoverflow.com/questions/18953617/ 와 결합 하면 경고를 해결할 수 있습니다. 남아있는 질문은 : scrollView의 contentView 크기를 필요한만큼만 만드는 방법은 무엇입니까?
Wising

한 번 봐 가지고 비디오를. XCode 5 / iOS 7에서 UIScrollLayout 및 자동 레이아웃을 사용하는 방법을 보여줍니다.
jaxvy

내 제안은 UIScrollView직접 사용하지 않습니다 . 대신 UICollectionView또는 UITableView최대한 많이 사용하십시오. 대부분 모든 것은이 요소로 가능하며 단순성, 가독성 및 재사용 성을 제공합니다!
SPatel

답변:


1093

그래서 나는 이런 식으로 정렬했습니다.

  1. UIScrollView add a 안에 UIView(우리는 그것을 호출 할 수 있습니다 contentView);

  2. 이러한면에서 contentView, 세트 상하 0으로 오른쪽 여백을 왼쪽 (로부터 과정 scrollView은 IS한다 superView); 또한 중심을 수평 및 수직으로 정렬하십시오 .

완료되었습니다 .

이제 당신은 그 모든 귀하의 의견을 추가 할 수 있습니다 contentView, 그리고 contentSize의는 scrollView자동으로 따라 조정됩니다 contentView.

최신 정보:

일부 특수 사례는 아래 댓글 에 @Sergio 가 게시 한이 비디오 로 덮여 있습니다.


33
스크롤 뷰가 더 이상 내용의 길이를 추측하지 못하고 그에 따라 크기를 조정하여 객체 내부에 맞게 크기를 조정할 수 있다는 점을 제외하면 거의 완벽합니다. contentView 내부에 높이가 변경되는 제약 조건을 가진 tableview가 있고 scrollview를 사용하면 스크롤 할 수 없습니다.
CyberMew

28
비디오 는 남아있는 모든 문제를 극복하는 데 도움 이 될 수 있습니다.
Sergio

46
이것은 스크롤로 만들지 않습니다.
dorian

2
@MatteoGobbi 그게 다야! 트릭을 했어! 2 일 동안 scrollView autoLayout 광기의 이런 종류의 문제로 어려움을 겪고있었습니다 .... u 친구 !!!
polo987

56
ScrollView로 스크롤 할 수없는 문제가있는 사람은 contentView의 하단을 설정하고 중심을 세로로 제한하여 낮은 우선 순위로 제한하십시오.
jimmy0251

98

이 오류는 추적하는 데 시간이 걸렸습니다. 처음에는 ScrollView의 크기를 고정하려고했지만 오류 메시지에 "콘텐츠 크기"라고 명확하게 표시되어 있습니다. ScrollView 상단에서 고정한 모든 항목도 하단에 고정되어 있는지 확인했습니다. 그렇게하면 ScrollView는 모든 객체 및 제약 조건의 높이를 찾아 내용 높이를 계산할 수 있습니다. 이것은 모호한 내용 높이를 해결하고 너비는 매우 비슷합니다. 처음에는 X 대부분의 ScrollView를 중심으로했지만 객체를 ScrollView의 측면에 고정해야했습니다. iPhone6의 화면이 더 넓을 수 있기 때문에 이것을 좋아하지 않지만 '모호한 내용 너비'오류를 제거합니다.


31
답변 주셔서 감사합니다! 올바르게 이해하면 ScrollView의 모든 하위보기를 맨 위와 맨 아래에 고정하여 오류를 제거 할 수 있습니다. 그러나 이것은 필요하지 않습니다. 스크롤보기의 상단에서 하단으로 연속적인 제약 조건을 만드는 방법이 있는지 확인해야합니다. [-XXX] 이해가
되셨기를

1
뷰에 변수 hight가있는 경우 문제를 해결하는 방법은 무엇입니까? 스크롤 뷰가 크기를 계산할 수 있도록 제약 조건을 설정하는 방법은 무엇입니까?
hashier

2
'스크롤 뷰의 상단에서 하단으로 연속적인 구속 조건을 만들 수있는 방법이 있는지 확인해야합니다.'<-그 문장에 감사드립니다
Adam Waite

3
스크롤보기가 상단 또는 하단 레이아웃 가이드가 아닌 슈퍼 뷰에 고정되어 있는지 확인하는 데 도움이되었습니다. 하단 레이아웃 가이드의 제약 조건을 제거하고 인터페이스 빌더 대신 메뉴를 살펴 보았습니다. Editor-> Pin-> Bottom Space to Superview.
Alberto Lopez

2
스크롤보기의 너비가 휴대 전화 화면의 너비 또는 UI의 다른 요소 (예 : 포함 UIView)의 너비를 따르려면 스크롤보기 외부에있는 다른 요소를 사용하여 "균등 한 너비"를 설정해야합니다.
Departamento B

89

Xcode 11 이상

사용하는 가장 간단한 방법 autolayout:

  1. 슈퍼 뷰 (또는 원하는 크기)에 추가 UIScrollView및 고정0,0,0,0
  2. 추가 UIView,있는 ScrollView에 핀 0,0,0,04 개 측면과 중앙 horizontallyvertically.
  3. 크기 관리자에서 변경 bottom하고 align center Y(수평 스크롤 변화에 대한 우선 순위 (250) trailingalign center X)
  4. 필요한 모든보기를이보기에 추가하십시오. 가장 낮은 뷰에서 하단 구속 조건을 설정하는 것을 잊지 마십시오 .
  5. 를 선택하고 UIScrollView크기 관리자를 선택한 다음 선택을 취소하십시오 Content Layout Guides.

1
scrollview의 내용 높이를 설정할 수 없지만 작동합니다. :)
블라인드 닌자

2
힌트 : 가로 및 세로로 중심을 제거하고 동일한 너비 (scrollView + scrollView 내부의보기)로 바꾸고 내용을 기반으로 높이를 추가하면 뷰의 마지막 요소에 하단 제약 조건이 필요합니다. 더 많은 정보를 보시려면 여기를보세요 : stackoverflow.com/a/54577278/5056173
숀 Stayns

1
Sean, 나는 이것을 매일 문자 그대로 사용하고 있으며 세로 및 가로 스크롤보기 스크롤과 관련 하여이 접근법에 아무런 문제가 없었습니다. 어쩌면 가장 낮은 / 마지막 요소에 바닥 구속 조건을 놓는 것을 잊었을 수도 있습니다. 그렇지 않으면 작동하지 않습니다.
Đorđe Nilović '

7
포인트 번호 4-두 번째 문장이 큰 것입니다.
Nitish

2
이 답변은 나를 위해 완벽하게 작동했습니다
satvinder singh

63

내 스스로 대답하는 질문에 대한 답변 UIScrollView + 중앙보기 + 모호한 스크롤 가능한 콘텐츠 크기 + 많은 iPhone 크기 .

그러나 그것은 당신의 경우도 완전히 포함합니다!

가장 간단한 경우의 초기 상태는 다음과 같습니다.

  1. 모든 가장자리에 0 제약 조건이있는 scrollView
  2. 버튼 수평 및 수직을 중심 으로 고정 너비 및 높이 제한
  3. 그리고 물론 성가신 경고 Has ambiguous scrollable content widthHas ambiguous scrollable content height.

1

우리가해야 할 일은 :

  • 뷰의 후미 및 / 또는 하단 공간에 대해 "0" 과 같은 2 개의 추가 구속 조건을 추가하십시오 (아래 스크린 샷의 예 참조).

중요 : 후행 및 / 또는 하단 제약 조건 을 추가해야합니다 . "최고와 최고"가 아닙니다-작동하지 않습니다!

2

예제 프로젝트 에서이 문제를 해결하는 방법을 보여주는 확인할 수 있습니다 .

추신

논리에 따르면-이 동작은 "충돌 제약"을 유발해야합니다. 하지만!

왜 작동하는지와 Xcode가 어떤 제약 조건이 더 우선 순위를 감지하는지 알 수 없습니다 (이 제약 조건에 우선 순위를 설정하지 않았기 때문에). 누군가 설명하면 왜 감사 할 것입니까, 왜 아래 의견에서 작동합니까?


좋은 팁! 난 그냥 아래쪽 가장자리에 제약 조건을 만들고 우선 순위를 중간 또는 낮음으로 설정
Dean

와! 이것은 진지하게 의미가 없지만 작동합니다! 감사합니다! 내가 볼 수있는 마지막 항목은 바닥 제약 조건을 0으로 설정하고 BANG입니다. 마침내 일했다.
Jakob Hviid

60

Xcode 11+, 스위프트 5

모든 답변이 더 이상 작동하지 않는 이유가 궁금한 경우 컨텐츠보기 (스크롤보기에 넣은 내용)를 스크롤보기의 컨텐츠 레이아웃 안내서 및 프레임 레이아웃 안내서가 아닌 컨텐츠 레이아웃으로 고정했는지 확인하십시오.

콘텐츠 뷰 가장자리 (리딩, 트레일 링, 상단, 하단)는 이미지의 리딩처럼 고정되지 않아야합니다.-프레임 레이아웃 안내서

이건 아니야

그러나 이것처럼-콘텐츠 레이아웃 안내서.

드롭 다운에서 컨텐츠 레이아웃 안내서를 선택하십시오.

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

그러면 대부분의 답변이 효과가 있습니다.

가장 간단한 방법은 다음과 같습니다.

  1. 루트보기에 스크롤보기를 넣으십시오.
  2. 스크롤보기의 모든 측면을 수퍼 뷰에 고정
  3. 다른 UIView를 가져 와서 (콘텐츠보기라고 부릅니다) 스크롤보기 안에 넣으십시오.
  4. 컨텐츠보기의 모든면을 고정하여보기의 컨텐츠 레이아웃 안내서를 스크롤하십시오.
  5. 컨텐츠 뷰의 너비를 스크롤 뷰의 프레임 레이아웃 안내서와 동일하게 고정
  6. 원하는 방식으로 컨텐츠 뷰 높이를 수정하십시오 (아래 예에서는 일정한 높이 제한을 사용했습니다)

가장 간단한 구현의 전체 구조는 다음과 같습니다.

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


@WantToKnow 높이에 대한 제약 조건을 취할 필요가 없습니다. 우선 순위를 낮게 변경하십시오 (250)
Reckoner

Xcode 11+, Swift 5. @WantToKnow 답변에 따르면 내 문제를 해결하고 [video] [1] 및 [code] [2] [1]을 준비했습니다. youtube.com/watch?v=qMrH5_Yj5hM [2] : github.com/AhmAbdallah/CustomCollectionView
Ahmed Abdallah

1
좋은 답변입니다. 감사합니다.
콘스탄틴

1
이것이 정답입니다. 감사.
Vincent Joy

콘텐츠 뷰의 마지막 요소에 하단 제약 조건을 추가 한 경우에만 나에게
효과적이었습니다.

49

아래에 설명 된대로 UIView하위보기 로 작성해야 UIScrollView합니다.

  • UIViewController
  • UIView '메인 뷰'
    • UIScrollView
      • UIView '컨테이너 뷰'
        • [콘텐츠]

두 번째 단계는 UIScrollView제약 조건 을 만드는 것 입니다. 나는 superView에 대한 상단, 하단, 선행 및 후행 제약 조건 으로이 작업을 수행했습니다.

다음으로 컨테이너의 제약 조건을 추가했으며 UIScrollView여기에서 문제가 시작됩니다. 동일한 제약 조건 (위쪽, 아래쪽, 앞쪽 및 뒤쪽)을 넣으면 스토리 보드에 경고 메시지가 표시됩니다.

"모호한 스크롤 가능 컨텐츠 너비가 있습니다"및 "모호한 스크롤 가능 컨텐츠 높이가 있습니다"

위와 같은 제약 조건을 계속하고, 단지 제약 조건 추가 Equal HeightEqual Width사용자에 컨테이너보기를 받는 관련 홈페이지보기하지 않는 당신 UIScrollView. 즉, 컨테이너 뷰의 제약 조건은 UIScrollView의 슈퍼 뷰 와 연결되어 있습니다.

그 후에 스토리 보드에 경고가 표시되지 않고 하위 뷰에 대한 제약 조건을 계속 추가 할 수 있습니다.


2
합의-컨테이너 뷰를 추가하는 것이 가장 유지 관리하기 쉬운 최상의 솔루션이라고 생각합니다.
Andrew Ebling

1
이 솔루션은 관리 할 탐색 표시 줄이 없을 때 작동합니다.
Leena

26

나는 같은 문제가 있었다. 이 확인란의 선택을 취소하십시오. 코드에서 컨텐츠 크기를 설정하고 있기 때문에. 여기에 이미지 설명을 입력하십시오


24

나는 마침내 이것을 알아 냈습니다. 이것이 이해하기 쉽기를 바랍니다.

기본 UIView를 스크롤 뷰에 "컨텐츠 뷰"로 추가하여 스크롤 뷰와 동일한 크기로 만들고이 컨텐트 뷰에서이 6 개의 매개 변수를 설정하여 해당 경고를 무시할 수 있습니다.

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

보다시피 6 개의 매개 변수가 필요합니다! 정상적인 상황에서는 두 가지 제약 조건이 중복되지만 이것이 스토리 보드 오류를 피하는 방법입니다.


1
위의 내용은 3 가지 화면 너비 (4/5, 6, 6+)에 대해 걱정하기 때문에 거의 효과가있었습니다. 콘텐츠보기와 스크롤보기를 같은 너비로 설정했습니다. 당신이 옳습니다, 이미 콘텐츠보기에 선행 및 종료 공간이 0이라고 말한 것처럼 복제되었습니다.
Stuart P.

8
상수 값 대신 컨텐츠보기에서 스크롤보기로 동일한 너비 및 높이 제한 조건을 설정할 수 있습니다. 이것은 모든 해상도에서 작동합니다.
Kumar C

나는 똑같이 구현해야하므로 콘텐츠보기와 스크롤보기 모두에 동일한 높이와 너비를 설정하도록 도와 줄 수 있습니까?
Urmi

여전히이 작업을 수행해야하는지 확인할 가치가 있습니다. 나는 최근에있는 ScrollView에 이미지 뷰를 설정하고 만 오류가 엑스 코드 8.3에서 사라지게 상단에 표시 4 개 제약 조건을 설정 멀리 얻을 수 있었다
윌리엄 T.

1
@Honey 이것은 3 년 전에 게시되었습니다. 그 이후 스토리 보드가 확실히 향상되었습니다. 나도 당신이 지금 내용보기없이 도망 갈 수 있음을 알아 차렸다. 답변을 조정하겠습니다.
William T.

16

늦었을 수도 있지만 다음 솔루션 스토리 보드를 사용하여 추가 코드없이 이러한 종류의 문제를 해결합니다 .

컨텐츠 뷰의 경우 선행 / 후행 / 상단 / 하단 공간에 대한 제약 조건을 스크롤보기로 설정해야하며 다음과 같이 컨텐츠 뷰 프레임변경되지 않습니다 .여기에 이미지 설명을 입력하십시오

물론 스크롤보기가 컨텐츠 크기를 알 수 있도록 컨텐츠보기에 대한 추가 제한 조건을 작성해야합니다. 예를 들어 고정 높이와 중심 x를 설정하십시오.

도움이 되었기를 바랍니다.


7

나를 위해 contentView제안한대로 실제로 작동하지 않았습니다. 또한 추가 된보기로 인해 오버 헤드가 발생합니다 (큰 문제는 아니지만). 나에게 가장 효과적인 것은 내에 대한 모호성 검사끄는 것이 었습니다 scrollView. 모든 것이 멋지게 배치되어 있으므로 내 경우와 같은 간단한 경우에는 괜찮다고 생각합니다. 그러나 scrollView휴식에 대한 다른 제약 조건이 있으면 Interface-Builder는 더 이상 경고 하지 않습니다 .

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


5
이것은 경고를 제거하고 문제를 해결하기 위해 아무 것도하지 않습니다.
Predrag Manojlovic 2016 년

당신. 아르. 나의. 영웅. 이것이 존재한다는 것을 몰랐고 그것을 발견하게되어 기쁩니다! 나는 당신이 기대하는 "위치 확인 만"을 시도했지만, 위치를 확인하지는 않지만이 버그가있는 "콘텐츠 크기"문제도 허용하지 않습니다. "Never Verify"로 가야합니다. 감사!
Dustin

프로그래밍 방식으로 자식보기를 만드는 경우 이것이 정답이라고 생각합니다. 감사!
Florian Kusche


3

아래를 참조하십시오 : 세로 및 가로 중앙 집중식 스크롤보기의 컨텐츠보기. 애매 모호한 오류가 발생했습니다. 항상 콘텐츠보기에서 두 개의 스크롤보기에 추가 된 두 가지가 1). 버튼 공간을 컨테이너에 넣으십시오.

이러한 제약 조건은 스크롤에서 콘텐츠보기 높이 또는 너비 후에 스크롤 할 수있는 양을 의미합니다.

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

도움이 될 수 있습니다.


3

선택한보기에 대해 "자동 레이아웃 문제 해결"> "누락 된 구속 조건 추가"를 사용하여 내보기에서 이러한 종류의 문제를 해결했습니다. 여기에 이미지 설명을 입력하십시오

다음 두 가지 제약 조건이 내 문제를 해결합니다.

trailing = Stack View.trailing - 10
bottom = Stack View.bottom + 76

UIScrollView의 후행, 하단은 후행입니다.


이것은 "to bottom"제약 조건을 추가하여 나를 위해 일했습니다. 이제 생각해 보니 완벽합니다.
SilverWolf-복원 모니카

3

있는 contentView (하여 UView용기 내부와 같은) UIScrollView에지, 스틱 ( top, bottom, trailing, leading)의 수퍼 ( UIScrollView)와 contentView있어야 equalwidth하고 equalheight수퍼한다. 그것들은 제약입니다. 그리고 메소드 호출 :

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    self.scrollView.contentSize = self.contentView.frame.size;
}

나를 위해 문제를 해결했습니다.


3

스위프트 4+ 접근법 :

1) UIScrollView 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 0으로 설정하십시오.

2) UIScrollView 내부에 UIView를 추가하고 상단, 하단, 선행, 후행 여백을 0으로 설정하십시오 (UIScrollView margin과 동일).

3) 가장 중요한 부분은 높이 제한이 우선 순위가 낮아야하는 너비와 높이를 설정 하는 것 입니다.

private func setupConstraints() {

    // Constraints for scrollView
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Constraints for containerView
    containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

    let heightConstraint = containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
    heightConstraint.priority = UILayoutPriority(rawValue: 250)
    heightConstraint.isActive = true
}

2

@ Matteo Gobbi의 대답은 완벽하지만 내 경우에는 scrollview를 스크롤 할 수 없습니다. " align center Y "를 제거 하고 " height> = 1 "을 추가 하면 scrollview가 스크롤 가능하게됩니다


2

uiscrollview로 스크롤하지 않고 고생하는 사람들은 마지막보기의 하단 레이아웃 (콘텐츠보기 내부)으로 콘텐츠보기의 하단 제약 조건을 설정하기 만합니다. 중심 Y 구속 조건을 제거하는 것을 잊지 마십시오.

모든 제약 조건은 위에서 정의한 것과 같습니다. Scrollview는 내용보기에서 최대 높이를 얻는 것에 대해서만 관심을 기울였으며 마지막보기의 하단 제약 조건으로 설정했습니다. 즉, scrollview가 자동으로 내용 오프셋을 변경합니다.

필자의 경우 마지막보기는 UILable of line of property = 0 (컨텐츠에 따라 높이를 자동으로 조정 함)으로 uilable의 높이를 동적으로 높이고 결국 uilable의 하단 레이아웃으로 인해 스크롤 가능한 영역이 콘텐츠 뷰의 하단과 정렬됩니다. scrollview가 내용 오프셋을 증가시킵니다.


2

Xcode에서 Storyboard 만 사용하여 YouTube 스크롤 StackViews 에 비디오를 만들었습니다.

여기에 두 가지 종류의 시나리오가 나타날 수 있습니다.

scrollView 내부의보기-

  1. (예를 들어, 어떤 고유 콘텐츠 크기를 가지고 있지 않습니다 UIView)
  2. 자신의 고유 콘텐츠 크기가 않습니다 (예를 들어 UIStackView)

두 경우 모두 세로로 스크롤 가능한보기의 경우 다음 제약 조건을 추가해야합니다.

  1. 상하 좌우 4 가지 제약

  2. 스크롤보기와 동일한 너비 (가로로 스크롤 중지)

고유 한 고유 컨텐츠 높이를 갖는 뷰에는 다른 제한 조건이 필요하지 않습니다.

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


고유 컨텐츠 높이가없는 뷰의 경우 높이 구속 조건을 추가해야합니다. 높이 제한이 scrollView의 높이보다 큰 경우에만 뷰가 스크롤됩니다.

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


2
import UIKit

class ViewController: UIViewController {

    //
    let scrollView: UIScrollView = {

        let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        return sv
    }()

    let lipsumLbl: UILabel = { // you can use here any of your subview

        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.text = """
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend nisi sit amet mi aliquet, ut efficitur risus pellentesque. Phasellus nulla justo, scelerisque ut libero id, aliquet ullamcorper lectus. Integer id iaculis nibh. Duis feugiat mi vitae magna tincidunt, vitae consequat dui tempor. Donec blandit urna nec urna volutpat, sit amet sagittis massa fringilla. Pellentesque luctus erat nec dui luctus, sed maximus urna fermentum. Nullam purus nibh, cursus vel ex nec, pulvinar lobortis leo. Proin ac libero rhoncus, bibendum lorem sed, congue sapien. Donec commodo, est non mollis malesuada, nisi massa tempus ipsum, a varius quam lorem vitae nunc.

        Cras scelerisque nisi dolor, in gravida ex ornare a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae nisl id erat sollicitudin accumsan sit amet viverra sapien. Etiam scelerisque vulputate ante. Donec magna nibh, pharetra sed pretium ac, feugiat sit amet mi. Vestibulum in ipsum vitae dui vehicula pulvinar eget ut lectus. Fusce sagittis a elit ac elementum. Fusce iaculis nunc odio, at fermentum dolor varius et. Suspendisse consectetur congue massa non gravida. Sed id elit vitae nulla aliquam euismod. Pellentesque accumsan risus dolor, eu cursus nibh semper id.

        Vestibulum vel tortor tellus. Suspendisse potenti. Pellentesque id sapien eu augue placerat dictum. Fusce tempus ligula at diam lacinia congue in ut metus. Maecenas volutpat tellus in tellus maximus imperdiet. Integer dignissim condimentum lorem, id luctus nisi maximus at. Nulla pretium, est sit amet mollis eleifend, tellus nulla viverra dolor, ac feugiat massa risus a lectus. Pellentesque ut pulvinar urna, blandit gravida ipsum. Nullam volutpat arcu nec fringilla auctor. Integer egestas enim commodo, faucibus neque ac, rutrum magna. Vivamus tincidunt rutrum auctor. Cras at rutrum felis. Fusce elementum lorem ut pharetra venenatis.
        """
        lbl.textColor = .darkGray
        lbl.font = UIFont.systemFont(ofSize: 16)
        lbl.numberOfLines = 0
        return lbl
    }()

    //======================================================================//
    //
    // MARK:- viewDidLoad
    //
    override func viewDidLoad() {
        super.viewDidLoad()

        setupViews()
        setupAutoLayout()
    }

    func setupViews() {

        title = "ScrollView Demo"
        view.backgroundColor = .white
        view.addSubview(scrollView)
        scrollView.addSubview(lipsumLbl)
    }

    func setupAutoLayout() {

        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        lipsumLbl.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        lipsumLbl.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        lipsumLbl.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        lipsumLbl.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        lipsumLbl.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    }
}

산출:

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


당신은 이미 leftAnchor를 가지고있을 때 왜 LeadAnchor가 필요합니까?
ShadeToD

이 목적으로 leftAnchor를 사용할 수 없습니다. 따라서 같은 목표를 달성하기 위해 leadingAnchor를 사용해야합니다.
iAj

당신은 당신의 예에서 두 가지를 모두 사용했습니다.
ShadeToD

@ShadeToD 확인하겠습니다
iAj

2

제 경우에는 잘못된 컨텐츠 크기 및 컨텐츠 크기 모호성 문제가 iPad에서 발생했지만 iPhone의 경우 작동했습니다. 문제를 해결하기 위해 스토리 보드에서 다음 변경을 수행했습니다.

  1. UIView에 scrollview를 추가하고 선행, 상단, 후행 및 하단을 0,0,0,0에 추가하십시오.
  2. 예를 들어 요구 사항에 따라 스크롤보기의 높이를 설정하십시오. 100.
  3. UIView를 추가하여 뷰를 스크롤하고 선행, 상단, 후행 및 하단을 0,0,0,0에 추가하고 center (X) 및 center (Y) 제약 조건을 정렬하십시오.
  4. 스크롤보기의 크기 관리자에서 "컨텐츠 레이아웃 안내"를 선택 해제하십시오.

1

세로 스크롤

  1. 제한 조건이 0,0,0,0 인 UIScrollView를 슈퍼 뷰에 추가하십시오.
  2. SuperView에 제약 조건이 0,0,0,0 인 ScrollView에 UIView를 추가하십시오.
  3. UIView에 대해 동일한 너비 제약 조건을 UIScrollView에 추가하십시오.
  4. UIView에 높이를 추가하십시오.
  5. UIView에 제약 조건이있는 요소를 추가하십시오.
  6. 맨 아래에 가장 가까운 요소의 경우 UIView 맨 아래에 제한이 있는지 확인하십시오.

0

내가 한 것은 여기에 표시된 것처럼 별도의 콘텐츠보기를 만드는 것입니다.

컨텐츠 뷰는 자유 형식이며 contentView와 관련하여 자체 제한 조건으로 모든 서브 뷰를 추가 할 수 있습니다.

UIScrollView가 기본보기 컨트롤러에 추가됩니다.

프로그래밍 방식으로 IBOutlet을 통해 연결된 contentView를 클래스에 추가하고 UIScrollView의 contentView를 설정합니다.

인터페이스 빌더를 통한 ContentView가있는 UIScrollView


0

같은 오류가 발생했습니다. 다음을 수행했습니다.

  1. 보기 (슈퍼 뷰)
  2. ScrollView 0,0,600,600
  3. ScrollView 내부의 UIView : 0,0,600,600
  4. UIView는 이미지보기, 라벨을 포함

이제 scrollView (2)에 UIView (3)에 선행 / 후행 / 상단 / 하단을 추가하십시오.

View (1)과 View (3)을 선택하여 높이와 무게를 동일하게 설정하십시오. 문제가 해결되었습니다.

나는 도움이 될 비디오를 만들었습니다.

https://www.youtube.com/watch?v=s-CPN3xZS1A


0

[XCode 7.2 및 iOS 9.2에서 테스트]

스토리 보드 오류 및 경고를 억제 한 것은 스크롤보기 및 내용보기 (내 경우에는 스택보기) 의 고유 크기자리 표시 자로 설정하는 것이 었습니다. . 이 설정은 스토리 보드의 크기 관리자에서 찾을 수 있습니다. 그리고 디자인 타임 고유 컨텐츠 크기를 설정하면 Interface Builder에서 편집하는 동안보기에만 영향을 미칩니다. 뷰는 런타임에이 고유 컨텐츠 크기를 갖지 않습니다.

그래서 우리는 이것을 설정하여 잘못되지 않을 것 같아요.

참고 : 스토리 보드에서는 스크롤보기의 모든 가장자리를 슈퍼 뷰로 고정하고 스택보기의 모든 가장자리를 스크롤보기로 고정했습니다. 내 코드 에서 scrollview와 stackview 모두에 대해 translatesAutoresizingMaskIntoConstraints 를 false로 설정했습니다 . 그리고 나는 콘텐츠 크기를 언급하지 않았습니다. 스택 뷰가 동적으로 커지면 스토리 보드에 설정된 제약 조건으로 스택을 스크롤 할 수 있습니다.

스토리 보드 경고는 나를 화나게 만들었고 경고를 억제하기 위해 수평 또는 수직으로 물건을 중앙에 놓고 싶지 않았습니다.


0

오른쪽 스크롤의 스크롤 막대가 보이지만 내용이 움직이지 않는 동작을하는 사람은 다음 사항을 고려할 가치가 있습니다.

스크롤보기의 내용과 스크롤보기 외부의 객체 사이에 제약 조건을 사용하여 스크롤보기의 내용에 고정 된 위치를 제공하여 내용이 스크롤보기 위에 떠있는 것처럼 보일 수 있습니다.

그것은 Apple의 문서에 있습니다. 예를 들어, 실수로 상단 Label / Button / Img / View를 contentView 대신 스크롤 영역 외부의보기 (헤더 또는 scrollView 바로 위에 있습니까?)에 고정하면 전체 contentView가 고정됩니다.


0

이전 답변에서 언급했듯이 스크롤보기 안에 사용자 정의보기를 추가해야합니다.

사용자 정의보기는 이미지에 표시된 ContentView입니다.

모든 하위보기를 컨텐츠보기에 추가하십시오. 어느 시점에서 스크롤 컨텐츠보기에 컨텐츠 크기 경고가 모호하다는 것을 알 수 있습니다. 컨텐츠보기를 선택하고 "자동 레이아웃 문제 해결"단추 (IB 레이아웃의 오른쪽 하단 모서리에 있음)를 클릭 한 다음 "누락 된 항목 추가 제한 조건 "옵션.

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

이제부터는 프로젝트를 실행할 때 스크롤 뷰가 추가 코드없이 컨텐츠 크기를 자동으로 업데이트합니다.


0

스크롤보기의 상단에서 하단까지 연속적인 제약 조건을 만드는 방법이 있는지 확인해야합니다. [-트리플 엑스]

필자의 경우-가로 스크롤 스크롤보기 -Apple의 기술 노트 에도 불구하고 스크롤보기의 각 자식에 대해 너비와 높이 제한을 추가 해야했습니다. 알려주지 해야했습니다.



0

여전히 UIScrollView에 문제가있는 경우 콘텐츠 레이아웃 안내를 끕니다 (xcode Interface Builder에서 ScrollView 선택-> 오른쪽 패널에서 크기 관리자 선택-> '콘텐츠 레이아웃 안내'선택 해제) 또는 다음 단계를 수행하십시오. xcode 11 스크롤보기 레이아웃 - 새로운 스타일의 레이아웃에 유용 할 수 있습니다. macOS 10.15.2, Xcode 11.3.1, 05.02.2020에서 잘 작동합니다.

스크린 샷 참조


0

자동 레이아웃 사용

잘 정의 된보기 안에 스크롤보기를 추가 한 다음 스크롤보기 안에 스택보기를 추가하십시오.

스크롤 뷰 및 스택 뷰에서 관련 슈퍼 뷰에 상단, 왼쪽, 오른쪽, 하단, 중앙 X 및 중앙 Y 구속 조건 추가

현재 기본 설정은 Top Space가 아닌 Align Top 제약 조건을 추가하는 것이므로 제약 조건이 스택 뷰에서 올바른 수퍼 뷰 (scrollview)로 연결되어 있는지 확인하십시오.

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