programing

UIStackView를 스크롤할 수 있습니까?

powerit 2023. 4. 28. 21:42
반응형

UIStackView를 스크롤할 수 있습니까?

수 해 보겠습니다. UISackView를 만드는 입니까?UIStackView스크롤?

코드가 없는 솔루션을 찾는 사람이 있을 경우 자동 레이아웃을 사용하여 스토리보드에서 이를 완전히 수행할 수 있는 예제를 만들었습니다.

Github에서 얻을 수 있습니다.

기본적으로 예제를 재생성하려면(수직 스크롤용):

  1. 성을 합니다.UIScrollView제약 조건을 설정합니다.
  2. 추가UIStackView에▁UIScrollView
  3. 조건을 합니다.Leading,Trailing,Top&Bottom 과같합니다야아에 나오는 과 같아야 .UIScrollView
  4. 한 등동정을WidthUIStackView그리고.UIScrollView.
  5. , Distribution = = 을 의 = 채 = 기 우 = 정 동 간 = 0으로 합니다.UIStackView
  6. 를 합니다.UIViews에▁UIStackView
  7. 달려.

파일Width위해서Height4단계에서, 그리고 세트Axis=Horizontal5단계에서 수평 UI 스택 뷰를 가져옵니다.

올바른 솔루션을 제시합니다.

Xcode 11+의 경우

1단계: ScrollView 추가 및 크기 조정

여기에 이미지 설명 입력여기에 이미지 설명 입력

2단계: Scroll View에 대한 제약 조건 추가

여기에 이미지 설명 입력

3단계: ScrollView에 StackView를 추가하고 크기를 조정합니다.

여기에 이미지 설명 입력

4단계: 스택 뷰에 대한 제약 조건 추가(스택 뷰 -> 컨텐츠 레이아웃 가이드 -> "선행, 상단, 후행, 하단")

여기에 이미지 설명 입력 여기에 이미지 설명 입력

4.1단계: 구속조건 수정 -> 상수(... -> 상수 = 0)

여기에 이미지 설명 입력 여기에 이미지 설명 입력

5단계: 스택 뷰에 대한 제약 조건 추가(스택 뷰 -> 프레임 레이아웃 가이드 -> "동일한 너비")

여기에 이미지 설명 입력 여기에 이미지 설명 입력

6단계 예:높이 제약 조건 실행이 포함된 두 개의 UI뷰 추가

나는 그것이 당신에게 유용하기를 바랍니다.

Apple의 자동 레이아웃 안내서에는 스크롤 보기 작업에 대한 전체 섹션이 포함되어 있습니다.일부 관련 스니펫:

  1. 내용 보기의 상단, 하단, 선행 및 후행 가장자리를 스크롤 보기의 해당 가장자리에 고정합니다.이제 내용 보기가 스크롤 보기의 내용 영역을 정의합니다.
  2. (선택사항)수평 스크롤을 사용 불가능으로 설정하려면 내용 보기의 너비를 스크롤 보기의 너비와 동일하게 설정합니다.이제 콘텐츠 보기가 스크롤 보기를 수평으로 채웁니다.
  3. (선택사항)수직 스크롤을 사용 불가능으로 설정하려면 내용 보기의 높이를 스크롤 보기의 높이와 동일하게 설정합니다.이제 콘텐츠 보기가 스크롤 보기를 수평으로 채웁니다.

추가 정보:

레이아웃은 5단계와 6단계에서 정의된 경우를 제외하고 내용 보기의 크기를 완전히 정의해야 합니다.내용 보기가 스크롤 보기보다 높은 경우, 스크롤 보기는 수직 스크롤을 사용할 수 있습니다.내용 보기가 스크롤 보기보다 넓으면 스크롤 보기에서 수평 스크롤을 사용할 수 있습니다.

요약하자면, 스크롤 뷰의 내용 뷰(이 경우 스택 뷰)는 가장자리에 고정되어 있고 너비 및/또는 높이가 제한되어 있어야 합니다.즉, 스택 뷰의 내용은 스크롤을 원하는 방향으로 (직접 또는 간접적으로) 제한되어야 하며, 예를 들어 수직으로 스크롤되는 스택 뷰 내의 각 뷰에 높이 제한을 추가해야 합니다.다음은 스택 뷰를 포함하는 스크롤 뷰의 수직 스크롤을 허용하는 방법의 예입니다.

// Pin the edges of the stack view to the edges of the scroll view that contains it
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

// Set the width of the stack view to the width of the scroll view for vertical scrolling
stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

2020년 최신 정보입니다.

100% 스토리보드 또는 100% 코드.

이 예는 수직적입니다.


가장 간단한 설명은 다음과 같습니다.

  1. 빈 전체 화면 장면이 표시됩니다.

  2. 스크롤 뷰를 추가합니다.제어 - 스크롤 뷰에서 기본 뷰로 끌어 왼쪽-오른쪽-위쪽-아래쪽을 모두 0으로 추가합니다.

  3. 스크롤 뷰에서 스택 뷰를 추가합니다.제어 - 스택 뷰에서 스크롤 뷰로 끌어 왼쪽-오른쪽-위쪽-아래쪽을 모두 0으로 추가합니다.

  4. 스택 뷰 내부에 레이블을 두 개 또는 세 개 배치합니다.

명확성을 위해 레이블의 배경색을 빨간색으로 만듭니다.라벨 높이를 100으로 설정합니다.

  1. 이제 각 UI 레이블의 너비를 설정합니다.

    놀게도드, .UILabel스택 뷰가 아닌 스크롤 뷰로 이동하고 동일한 너비를 선택합니다.

반복하는 방법

UILabel에서 UILabel의 상위 항목으로 드래그를 제어하지 않고 상위 항목으로 이동합니다. 즉, 스크롤 보기까지 이동하고 스택 보기로 이동하지 마십시오.

그렇게 간단하다.그게 비결입니다.

비밀 팁 - Apple 버그:

하나의 항목에서만 작동하지 않습니다!몇 개의 레이블을 추가하여 데모가 작동하도록 합니다.

모든 작업이 완료됩니다.

팁: 모든 새 항목에 높이를 추가해야 합니다.스크롤 스택 뷰의 모든 항목에는 고유한 크기(예: 레이블)가 있거나 명시적인 높이 제약 조건이 추가되어야 합니다.


대안적 접근 방식:

위의 접근 방식을 요약하려면 놀랍게도 레이블의 너비를 스크롤 보기의 너비로 설정합니다(스택 보기가 아님).

여기 다른 접근법이 있습니다...

스택 뷰에서 스크롤 뷰로 끌어 "폭 동일" 제약 조건을 추가합니다.이미 왼쪽에서 오른쪽으로 고정했기 때문에 이것은 이상하게 보이지만, 그것이 당신의 방식입니다.아무리 이상하게 보여도 그게 비밀입니다.

두 가지 옵션이 있습니다.

  1. 놀랍게도 스택 뷰에서 각 항목의 너비를 스크롤 뷰 상위 항목(스택 뷰 상위 항목이 아님)의 너비로 설정합니다.

또는

  1. 스택 뷰의 왼쪽과 오른쪽 가장자리가 스크롤 뷰에 고정되어 있더라도 스택 뷰의 "폭 동일"을 스크롤 뷰로 설정합니다.

명확하게 하기 위해, 그 방법들 중 하나를 수행하고, 두 가지 모두를 수행하지 마십시오.

여기서 가장 많이 투표된 답변의 제약 조건은 저에게 효과가 있었고, 저는 제 스토리보드에서 만들어진 것처럼 아래의 제약 조건의 이미지를 붙였습니다.

저는 다른 사람들이 알아야 할 두 가지 문제를 해결했습니다.

  1. 조건을 한 후 자동 오류가 Need constraints for: X position or width이 문제는 스택 뷰의 하위 뷰로 UI 레이블을 추가하여 해결되었습니다.

    서브뷰를 프로그래밍 방식으로 추가하고 있기 때문에 원래 스토리보드에 서브뷰가 없었습니다.자동 레이아웃 오류를 제거하려면 스토리보드에 하위 뷰를 추가한 다음 로드 시 해당 하위 뷰와 제약 조건을 추가하기 전에 해당 하위 뷰를 제거합니다.

  2. 래원추했습다니고려를 추가하려고 했습니다.UIButtonsUISackView로 이동합니다.단추와 보기는 로드되지만 스크롤 보기는 스크롤되지 않습니다.이 문제는 다음을 추가하여 해결되었습니다.UILabels버튼 대신 스택 보기로 이동합니다.동일한 제약 조건을 사용할 경우 UILabel이 있는 이 보기 계층은 스크롤되지만 UIButton은 스크롤되지 않습니다.

    UIButtons에 고유 콘텐츠 크기(Stack View에서 사용)가 있는 것 같아 이 문제로 혼란스럽습니다.버튼이 작동하지 않는 이유를 아는 사람이 있다면 그 이유를 알고 싶습니다.

다음은 참조용으로 내 보기 계층 및 제약 조건입니다.

스크롤 뷰의 스택 뷰에 대한 제약 조건[1]

에이크의 말처럼UIStackView그리고.UIScrollView함께 잘 놀아요, 여기 보세요.

은 핵은심입니다.UIStackView과 "" "/" " 를 합니다.UIScrollView그러면 해당 콘텐츠를 스크롤/스크롤하는 작업이 잘 수행됩니다.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)       
}

수평 스크롤(UIScrollView 내 UIStackView)

수평 스크롤용입니다.먼저 다음을 생성합니다.UIStackView a 리고a.UIScrollView다음과 같은 방법으로 보기에 추가합니다.

let scrollView = UIScrollView()
let stackView = UIStackView()

scrollView.addSubview(stackView)
view.addSubview(scrollView)

다▁to▁set를 설정하는 것을 기억합니다.translatesAutoresizingMaskIntoConstraintsfalse에서.UIStackView 리고그고.UIScrollView:

stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false

모든 것이 작동하도록 하기 위해 모든 것의 후속, 선행, 상단 및 하단 앵커UIStackView 합니다.UIScrollView앵커:

stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

▁의 폭 .UIStackView 같나 커합 니다야의 이어야 합니다.UIScrollView앵커:

stackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor).isActive = true

이제 당신의 닻을 내리세요.UIScrollView예:

scrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

scrollView.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true 

다음으로, 다음 설정을 사용해 보는 것이 좋습니다.UIStackView정렬 및 분포:

topicStackView.axis = .horizontal
topicStackView.distribution = .equalCentering
topicStackView.alignment = .center

topicStackView.spacing = 10

마막으다사합니다야용해음을을 .addArrangedSubview:UISackView에 하위 보기를 추가하는 방법입니다.

텍스트 삽입

할 수 한 은 "" "" "" "" "" 입니다.UIStackViewA 내에서 개최됩니다.UIScrollView이제 당신은 사물을 좀 더 예쁘게 보이게 하기 위해 텍스트 세트에 접근할 수 있습니다.

let inset:CGFloat = 20
scrollView.contentInset.left = inset
scrollView.contentInset.right = inset

// remember if you're using insets then reduce the width of your stack view to match
stackView.widthAnchor.constraint(greaterThanOrEqualTo: topicScrollView.widthAnchor, constant: -inset*2).isActive = true

저도 같은 일을 하려고 하다가 우연히 이 훌륭한 게시물을 발견했습니다.앵커 API를 사용하여 프로그래밍 방식으로 이 작업을 수행하려면 이렇게 해야 합니다.

여러분의 약하자면포, 요▁your다▁embed▁to를 삽입하세요.UIStackView의 신의에UIScrollView 그고 앵커 조을 설합다 니정건의 합니다.UIStackView의 그것들과 일치하는.UIScrollView:

stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

다음에 추가하기만 하면 됩니다.viewdidload:

let insets = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)
scrollVIew.contentInset = insets
scrollVIew.scrollIndicatorInsets = insets

출처: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html

ScrollableStackView는 https://github.com/gurhub/ScrollableStackView 에서 사용할 수 있습니다.

Objective-C와 Swift 호환 라이브러리입니다.그것은 코코아 포드를 통해 이용할 수 있습니다.

샘플 코드(Swift)

import ScrollableStackView

var scrollable = ScrollableStackView(frame: view.frame)
view.addSubview(scrollable)

// add your views with 
let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 55))
rectangle.backgroundColor = UIColor.blue
scrollable.stackView.addArrangedSubview(rectangle)
// ...

샘플 코드(목표-C)

@import ScrollableStackView

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame];
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally;
scrollable.stackView.alignment = UIStackViewAlignmentCenter;
scrollable.stackView.axis = UILayoutConstraintAxisVertical;
[self.view addSubview:scrollable];

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)];
[rectangle setBackgroundColor:[UIColor blueColor]];

// add your views with
[scrollable.stackView addArrangedSubview:rectangle]; 
// ...

Catalyst.macOS Catalyst에 대한 입니다.macOS 앱은 윈도우 크기 조정을 지원하기 때문에 당신의UIStackView제어할 수 없는 상태에서 스크롤 가능한 상태로 전환되거나 그 반대로 전환됩니다.여기에는 두 가지 미묘한 점이 있습니다.

  • UIStackView가능한 모든 영역에 맞도록 설계되었습니다.
  • 전하는동안환,안동,UIScrollView에서는 탐색 모음(또는 macOS 앱의 경우 도구 모음) 아래의 새로 얻은/잃어버린 영역을 고려하여 경계 크기를 조정하려고 시도합니다.

이것은 불행하게도 무한 루프를 만들 것입니다.에 대해 잘 알지 못합니다.UIScrollView그리고 그것들adjustedContentInset하지만 그것의 내 로그로부터.layoutSubviews메소드, 다음과 같은 동작을 봅니다.

  • 하나는 창문을 넓힙니다.
  • UIScrollView범위 축소를 시도합니다(툴바 아래 영역이 필요하지 않으므로).
  • UIStackView다음의
  • UIScrollView만족하지 못하고 더 큰 범위로 복원하기로 결정합니다.제가 로그에서 본 것은 그것이기 때문에 이것은 저에게 매우 이상하게 느껴집니다.UIScrollView.bounds.height == UIStackView.bounds.height.
  • UIStackView다음의
  • 그런 다음 2단계로 루프합니다.

두 가지 단계로 문제를 해결할 수 있을 것 같습니다.

  • UIStackView.topUIScrollView.topMargin.
  • contentInsetAdjustmentBehavior.never.

서 저는 로 스크롤이 으로 성장하는 뷰에 이 있습니다.UIStackView수평 쌍의 경우 코드를 적절히 변경합니다.

앞으로 누구에게나 도움이 되길 바랍니다.인터넷에서 이것을 언급하는 사람을 찾을 수 없었고 무슨 일이 일어났는지 알아내는 데 꽤 오랜 시간이 걸렸습니다.

가로 스크롤 보기를 찾는 사용자가 있는 경우

func createHorizontalStackViewsWithScroll() {
    self.view.addSubview(stackScrollView)
    stackScrollView.translatesAutoresizingMaskIntoConstraints = false
    stackScrollView.heightAnchor.constraint(equalToConstant: 85).isActive = true
    stackScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
    stackScrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
    stackScrollView.bottomAnchor.constraint(equalTo: visualEffectViews.topAnchor).isActive = true
    stackScrollView.addSubview(stackView)
    
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.topAnchor.constraint(equalTo: stackScrollView.topAnchor).isActive = true
    stackView.leadingAnchor.constraint(equalTo: stackScrollView.leadingAnchor).isActive = true
    stackView.trailingAnchor.constraint(equalTo: stackScrollView.trailingAnchor).isActive = true
    stackView.bottomAnchor.constraint(equalTo: stackScrollView.bottomAnchor).isActive = true
    stackView.heightAnchor.constraint(equalTo: stackScrollView.heightAnchor).isActive = true
    
    stackView.distribution = .equalSpacing
    stackView.spacing = 5
    stackView.axis = .horizontal
    stackView.alignment = .fill
    
    for i in 0 ..< images.count {
        let photoView = UIButton.init(frame: CGRect(x: 0, y: 0, width: 85, height: 85))
        // set button image
        photoView.translatesAutoresizingMaskIntoConstraints = false
        photoView.heightAnchor.constraint(equalToConstant: photoView.frame.height).isActive = true
        photoView.widthAnchor.constraint(equalToConstant: photoView.frame.width).isActive = true
        
        stackView.addArrangedSubview(photoView)
    }
    stackView.setNeedsLayout()
}

스크롤 뷰에 포함된 스택 뷰의 동적 요소를 위한 간단한 한 가지 방법입니다.XIB에서 UIScrollView 내부에 UISStackView를 추가하고 스택 뷰가 스크롤 뷰(상단, 하단, 리드, 트레일)에 적합한 제약 조건을 추가하고 이들 사이에 수평 중심을 일치시키는 제약 조건을 추가합니다.그러나 마지막 제약 조건은 "빌드 시 제거"로 표시되었습니다.XIB를 만족시키고 오류를 방지합니다.

수평 스크롤의 예:

그러면:

그런 다음 코드에서 스택 보기에 다음과 같은 단추와 같은 요소를 추가합니다.

array.forEach { text in
     let button = ShadowButton(frame: .zero)
     button.setTitle(text, for: .normal)
     myStackView.addArrangedSubview(button)
     button.heightAnchor.constraint(equalToConstant: 40).isActive = true
     button.widthAnchor.constraint(equalToConstant: 80).isActive = true
}

스택 뷰를 스크롤 뷰 내부에 수직으로 중앙에 배치해야 하는 제약 조건이 있는 경우에는 제거하기만 하면 됩니다.

뷰뷰의 예(" "/" " " " " " ( " )EasyPeasy자동 레이아웃):

let scrollView = UIScrollView()
self.view.addSubview(scrollView)
scrollView <- [
    Edges(),
    Width().like(self.view)
]

let stackView = UIStackView(arrangedSubviews: yourSubviews)
stackView.axis = .vertical
stackView.distribution = .fill    
stackView.spacing = 10
scrollView.addSubview(stackView)
stackView <- [
    Edges(),
    Width().like(self.view)
]

각 서브뷰의 높이가 정의되어 있는지 확인하십시오!

  1. 무엇보다도, 스케치와 같은 것에서 보기를 디자인하거나 스크롤 가능한 콘텐츠로 무엇을 원하는지에 대한 아이디어를 얻는 것이 좋습니다.

  2. 그런 다음 보기 컨트롤러를 자유 형식으로 만들고(속성 검사기에서 선택) 보기의 본질적인 내용 크기에 따라 높이와 너비를 설정합니다(크기 검사기에서 선택).

  3. 그 후 뷰 컨트롤러에 스크롤 뷰를 넣었고 이것은 논리입니다. iOS에서 거의 항상 작동하는 것으로 나타났습니다(명령 + 해당 클래스를 클릭하거나 구글링을 통해 얻을 수 있는 해당 뷰 클래스의 문서화를 검토해야 할 수 있습니다).

    두 개 이상의 보기로 작업하는 경우 먼저 이전에 도입되었거나 더 원시적인 보기로 시작한 다음 나중에 도입되었거나 더 현대적인 보기로 이동합니다.스크롤 뷰가 먼저 도입되었으므로 스크롤 뷰부터 시작한 다음 스택 뷰로 이동합니다.여기서 스크롤 뷰 제약 조건을 슈퍼 뷰에 대한 모든 방향에서 0으로 설정합니다.모든 보기를 이 스크롤 보기 안에 넣은 다음 스택 보기에 넣습니다.

스택 뷰 작업 중

  • 먼저 그라운드 업(바텀 업 접근)으로 시작합니다. 즉, 뷰에 레이블, 텍스트 필드 및 이미지가 있는 경우 이러한 뷰를 먼저 레이아웃한 다음(스크롤 뷰 내부) 스택 뷰에 배치합니다.

  • 그런 다음 스택 뷰의 속성을 조정합니다.원하는 보기가 여전히 달성되지 않으면 다른 스택 보기를 사용합니다.

  • 그래도 여전히 달성되지 않으면 압축 저항 또는 내용물 포옹 우선순위를 가지고 플레이합니다.
  • 그런 다음 스택 뷰에 제약 조건을 추가합니다.
  • 위의 모든 항목이 만족스러운 결과를 제공하지 않는 경우 빈 UIView를 필러 뷰로 사용하는 것도 고려해 보십시오.

뷰를 만든 후에는 마더 스택 뷰와 스크롤 뷰 사이에 제약 조건을 지정하고 자식 스택 뷰는 마더 스택 뷰로 제약 조건을 지정합니다.지금쯤이면 잘 작동할 것입니다. 그렇지 않으면 Xcode에서 제안을 하는 경고를 받고, 그것이 무엇을 말하는지 읽고, 그것들을 실행할 수 있을 것입니다.이제 기대한 대로 실무적인 관점을 가져야 합니다.:).

중첩 또는 단일 스택 뷰 스크롤 뷰의 경우 루트 뷰와 함께 고정 너비를 설정해야 합니다.스크롤 뷰 내부에 있는 주 스택 뷰는 동일한 너비를 설정해야 합니다.[내 스크롤 보기는 보기의 아래에 있습니다. 무시하십시오.

UIStackView와 UIScrollView 사이에 동일한 너비 제약 조건을 설정합니다.

여기에 이미지 설명 입력

스크롤 뷰를 씬(scene)에 배치하고 씬(scene)을 채우도록 크기를 조정합니다.그런 다음, 스크롤 뷰 내부에 스택 뷰를 배치하고 항목 추가 버튼을 스택 뷰 내부에 배치합니다.모든 것이 준비되는 즉시 다음 제약 조건을 설정합니다.

Scroll View.Leading = Superview.LeadingMargin
Scroll View.Trailing = Superview.TrailingMargin
Scroll View.Top = Superview.TopMargin
Bottom Layout Guide.Top = Scroll View.Bottom + 20.0
Stack View.Leading = Scroll View.Leading
Stack View.Trailing = Scroll View.Trailing
Stack View.Top = Scroll View.Top
Stack View.Bottom = Scroll View.Bottom
Stack View.Width = Scroll View.Width

여기에 이미지 설명 입력

예외:Stack View.Width = Scroll View.Width핵심입니다.

저의 경우 stackView 내부의 뷰 수가 가변적이었기 때문에 항목을 중앙에 배치하고 싶었습니다.예를 들어, stackView에 하나의 뷰가 있는 경우 이 뷰를 화면 중앙에 배치하고 모든 뷰가 화면 내부에 맞지 않으면 스크롤 가능한 뷰를 원합니다.

이것이 제 견해의 위계입니다.

여기에 이미지 설명 입력

그래서 버튼의 고정 너비를 설정한 다음 stackView:

  • 버튼과 고정 너비는 같지만 우선순위는 650입니다.
  • X 중심을 용기에 맞춥니다. 보기
  • 뒤에 >= 0 및 앞에 >= 0을 컨테이너에 연결합니다.
  • 컨테이너에 대한 맨 아래 및 맨 위 공간보기

여기에 이미지 설명 입력

컨테이너의 경우 보기:

  • 후행, 선행, 하단, 상단, 높이 동일, 너비 동일(250 우선순위) 감독
  • 고정높이

여기에 이미지 설명 입력

스크롤 보기의 경우:

  • 후행, 선행, 하단, 상단에서 상단으로 수퍼뷰

스크롤 뷰는 선행 및 후행 제약 조건이 있는 뷰에도 포함됩니다.

여기에 이미지 설명 입력

그리고 제가 이것에 접근하기 위해 사용한 코드에 대해서는:

for index in 0...array.count - 1 {

      if index == 0 {
          firstButton.setTitle(title, for: .normal)
      } else {
          let button = UIButton()
          button.setTitle(title, for: .normal)
          stackView.addArrangedSubview(button)
          stackView.setNeedsLayout()
      }
}
containerView.layoutIfNeeded()
        
stackView.distribution = .fillEqually
stackView.spacing = 10
stackView.alignment = .fill

스토리보드로 이것을 할 때 모두가 놓친 것처럼 보이는 것은 승수를 고치는 것입니다!한 튜토리얼에서 위의 단계를 따르고 상수를 0으로 재설정할 때 승수를 확인하고 1로 재설정하면 제자리를 유지하기 위해 시각적으로 연결할 때 다른 요인이 발생합니다.

나는 UIStack View에서 간단히 LOOOOOOOOOOOOOONG 텍스트 블록 스쿼시 또는 스트레치를 만들 수 있다는 것을 발견했습니다.

스크롤 보기에 제약 조건 추가맨 위 왼쪽 아래 오른쪽, cons 0

스크롤 막대를 가리키는 스택 뷰에 구속조건 추가 내용 레이아웃 안내서

그런 다음 프레임 레이아웃 안내서에서 동일한 너비 또는 동일한 높이 제약 조건을 추가합니다.내용을 세로로 스크롤해야 하는 경우 너비, 가로로 스크롤해야 하는 경우 높이를 선택합니다.

자, 여기 열쇠가 있습니다.각 제약 조건을 편집하고 상수를 0으로 재설정하고 승수를 다시 1로 설정합니다!!!!!

당신이 하지 않으면 날씨가 흐려집니다.

작동하면 내부 컨텐츠와 마우스 스크롤을 클릭할 수 있습니다.

언급URL : https://stackoverflow.com/questions/31668970/is-it-possible-for-uistackview-to-scroll

반응형