17.11.21 릴리 TIL : StackView & ScrollView

Lily·2021년 11월 17일
0

Today I Learned

목록 보기
23/30
post-custom-banner

🤓오늘 공부한 내용


1. 테스트 관련 코드는 프로덕션 코드에 넣는 걸 지양!

private var queue: [CalculateItem] = []
    var testableQueue: [CalculateItem] {
        get {
            return queue
        }
    }

test code에서 메서드의 테스트 결과를 확인하기 위해queue에 접근해야해서,
연산 프로퍼티를 만들어 주었다.

테스트 관련 코드는 테스트 객체에서만 관리되는 것이 좋다는 리뷰를 받았다.
그래서 연산프로퍼티 대신 private (set)을 지정해주었다.

 private(set) var queue: [CalculateItem] = []

2. Stack Views

뷰의 collection을 vertical or horizontal layout으로 만드는 선형의 인터페이스.
horizontal or vertical 뷰의 스택을 만드는 데 필요한 constraints를 만들고 관리한다. 스택에 뷰가 추가되거나 삭제될 때마다 dynamic하게 constraints를 추가하고 삭제함.

An UIStackView creates and manages the constraints necessary to create horizontal or vertical stacks of views. It will dynamically add and remove its constraints to react to views being removed or added to its stack. With customization it can also react and influence the layout around it.
[🍎 Developer Documentation] UIStackView


이 글은 야곰닷넷의 Auto layout강의를 수강하고 작성되었습니다.
야곰닷넷🐻 Auto Layout 정복하기

Instance Property

  • axis : 스택뷰의 방향. Horizontal / Vertical
  • distribution : 스택 뷰 안의 view들의 사이즈를 어떻게 분배할지
  • alignment : 스택 뷰 안의 view들의 위치를 어떻게 배치할지
  • spacing : view간의 거리 설정

distribution (사이즈)

  • .fill : 스택 뷰 방향에 따라 꽉차게 늘어나게 폭/넓이 결정. * contents hugging priority가 낮은 요소가 늘어난다.
  • .fill equally : 동등한 폭/높이로 설정
  • .fill proportionally : contents 사이즈의 비율대로 폭/넓이 결정
  • .equal spacing : fill + spacing, 꽉차게 늘어나면서 spacing은 동일하게 결정
  • .equal centering : 각 뷰의 center간에 거리가 동일하도록 사이즈가 결정


alignment (위치)

  • .fill : 스택 뷰 방향(axis)의 반대 방향으로 폭/넓이를 설정
  • .leading : vertical일 때, leading에 맞춰 정렬
  • .top : horizontal일 때, top에 맞춰 정렬
  • .firstBaseline : 뷰의 텍스트 첫번째 줄 baseline을 맞추어 정렬
  • .lastBaseline : 뷰의 텍스트 마지막 줄 baseline을 맞추어 정렬
  • .center : vertical - 수직 중앙 정렬, horizontal - 수평 중앙 정렬
  • .trailing : vertical일 때, trailing 에 맞춰 정렬
  • .bottom : horizontal일 때, bottom에 맞춰 정렬


Stack에 view 추가하고 삭제하기

var vertical: UIStackView = UIStackView()
  
// stack에 view 추가
  @objc func addView() {
      let view = UIView()
      vertical.addArrangedSubview(view)
  }

// stack에 있는 view 삭제
  @objc func removeView() {
      guard let last = vertical.arrangedSubviews.last else {
          vertical.removeArrangedSubview(last)
      }
  }

arrangedSubViews

Instance Property
arrangedSubviews

The list of views arranged by the stack view.

var arrangedSubviews: [UIView] { get }

[🍎 Developer Documentation] arrangedSubViews

[UIView] array로 정의되어 있어서 array의 메서드들을 사용 가능하다!

3. Scroll View

ScrollView내 Contents view를 scroll하고 zooming할 수 있게 하는 View

Contents View : Scroll View안에 보여질 view, 컨텐츠 영역.

Instance Property

  • frame layout guide : layout guide for untransformed frame rectangle
  • content layout guide : layout guide for untranslated content rectangle

어떤 개념인지 아직 명확하게 이해되지 않아서 좀 더 공부가 필요할 것 같다.

스크롤 방향 제약 주는 방법

  • To disable Horizontal Scrolling
    Contents View의 width = Scroll View의 width
  • To disable Vertical Scrolling
    Contents View의 height = Scroll View의 height

contents를 scroll되는 contents view에 포함시키지 않는 방법

contents의 위치를 frame layout guide에 연결한다.

scroll view에 빨간 선이 생기는 이유

scroll view안에 들어갈 contents view의 사이즈가 정해져야한다.
왜냐하면 scroll view자신이 움직여야하는 전체사이즈를 contents size가 정해주기 때문이다.

만약 임시방편으로 빨간 선을 없애고 싶다면,
Contents view의 사이의 넓이나 높이를 Scroll view의 것과 동일하게 맞춰준다.

profile
i🍎S 개발을 합니다
post-custom-banner

0개의 댓글