단순 목록 레이아웃

AloeStackView 소개

AloeStackView는 에어비앤비가 제작한 UI의view를 가속화하기 위해 UItableView와 같은 세로 목록 레이아웃은 UItableView처럼 delegate와 데이터 Source를 준비하지 않아도 간단하게 실현할 수 있다.
지금까지의 이런 용도라면 UIStackView로 세로로 배열해 시행하지만, 반드시 헤드셋을 만들 때의 행동과 씨파라 등 사소한 부분을 하나하나 스스로 시행해야 한다.Aloe StackView 콘텐츠도 UIStackView이지만 이런 번거로운 부분이 한꺼번에 나올 수 있도록 인터페이스를 준비해 스스로 UIStackView를 사용하는 것보다 편리하다.
다만, AloeStackView의 목적은 빠르고 간단하게 제작하는 것이기 때문에 UItableView처럼 View를 재활용하지는 않을 것입니다.큰 스크린은 메모리를 먹을 수 있고 처음 그리는 데 시간이 걸리는 단점도 있다.따라서 UItableView를 완전히 대체할 수 없습니다.
코드 500줄 이하와 매우 작기 때문에 (UIScrollView에 UIStackView 세로 배열만 설정할 뿐) 외부 라이브러리도 사용하지 않았기 때문에 가져오는 어려움이 매우 낮기 때문에 쉽게 시도할 수 있는 라이브러리가 아니라고 생각합니다.
블로그 버스에도 소개되어 있으니 관심 있는 분들도 이쪽을 보세요.

사용법

기본적

만들기view

    import AloeStackView

    let stackView = AloeStackView()

view addRow만 표시

    let label = UILabel()
    label.text = "Label"
    stackView.addRow(label)

그렇게 되면 이렇게 UITObleView에 셀을 추가한 듯한 표현이 된다.

뷰의 재활용이 없기 때문에 이 레이블의 텍스트를 업데이트하려는 경우

    label.text = "Text"

그냥 뷰를 업데이트하는 거예요.(UITObleView처럼 reload cell 필요 없음)
전체 화면에서 Aloe StackViewAloeStackViewController를 사용하려면 이것을 사용할 수 있습니다.현재 (v1.0.1)시에는 Storyboard가 지원되지 않기 때문에 코드로 AloeStackViewController를 생성해야 합니다.(Storyboard에서 AloeStackViewController를 설정한 것은)

    import AloeStackView

    class ViewController: AloeStackViewController {
      override func viewDidLoad() {
        super.viewDidLoad()
        stackView.addRow(...)
      }
    }

Row 추가, 삽입, 삭제

Row(UItableView에서 말한 cell)를 추가·삭제할 때는 각각 하나의 Row를 추가·삭제하는 방법과 여러 Row를 취합해 추가·삭제하는 방법을 준비했다.

끝에 추가

func addRow(_ row: UIView, animated: Bool = false)

func addRows(_ rows: [UIView], animated: Bool = false)

맨 앞에 삽입

func prependRow(_ row: UIView, animated: Bool = false)

func prependRows(_ rows: [UIView], animated: Bool = false)

지정된 Row 앞에 삽입

func insertRow(_ row: UIView, before beforeRow: UIView, animated: Bool = false)

func insertRows(_ rows: [UIView], before beforeRow: UIView, animated: Bool = false)

지정된 Row 뒤에 삽입

func insertRow(_ row: UIView, after afterRow: UIView, animated: Bool = false)

func insertRows(_ rows: [UIView], after afterRow: UIView, animated: Bool = false)

지정된 Row 삭제

func removeRow(_ row: UIView, animated: Bool = false)

func removeRows(_ rows: [UIView], animated: Bool = false)

전체 Row 삭제

func removeAllRows(animated: Bool = false)

개평을 떼다

Row를 클릭할 때 처리하는 방법에는 두 가지가 있습니다.

TapHandler 모드 사용

하나는 TapHandler를 사용하는 방법입니다.

func setTapHandler<RowView: UIView>(forRow row: RowView, handler: ((RowView) -> Void)?)

    stackView.setTapHandler(
      forRow: label,
      handler: { [weak self] label in
        self?.showAlert(title: "Row Tapped", message: "Tapped on: \(label.text ?? "")")
      })

    label.isUserInteractionEnabled = true

주의해야 할 것은 isUserInteractionEnable 진정으로 반응할 때만 반응할 수 있다는 것이다.

Tappable 모드 사용

또 다른 방법은 로우에 불러오는 View를 Tappable 에 적용하고 didTapView () 를 실현하는 것이다.
그러면 누르면 didTapView()라고 합니다.

    class ToggleLabel: UILabel, Tappable {
      func didTapView() {
        textColor = textColor == .red ? .black : .red
      }
    }

    let label = ToggleLabel()
    label.text = "Label"
    label.isUserInteractionEnabled = true
    stackView.addRow(label)

이런 상황에서isUserInteractionEnable도 진짜 때만 반응한다.

클릭 시 강조 표시

Highlightable 프로토콜만 적용됩니다.

    class ToggleLabel: UILabel, Highlightable {
    }

Row 표시 숨기기

감추다

func hideRow(_ row: UIView, animated: Bool = false)

func hideRows(_ rows: [UIView], animated: Bool = false)

나타내다

func showRow(_ row: UIView, animated: Bool = false)

func showRows(_ rows: [UIView], animated: Bool = false)

표시/숨기기

위의 showRow hideRow 와 차이점은 ishiidden에 표시를 숨기는 것을 설정하는 것입니다.

func setRowHidden(_ row: UIView, isHidden: Bool, animated: Bool = false)

func setRowsHidden(_ rows: [UIView], isHidden: Bool, animated: Bool = false)

숨겨진 상태 가져오기

func isRowHidden(_ row: UIView) -> Bool

스타일

Row의 여백, 배경색, 선택색, 구분자의 기본 색상과 개별 Row의 색상을 설정할 수 있습니다.

Row Inset(Padding)

Row의 위아래 좌우 공백을 변경할 때 사용합니다.

var rowInset

add 이후 변경도 변경되지 않음

func setInset(forRow row: UIView, inset: UIEdgeInsets)

func setInset(forRows rows: [UIView], inset: UIEdgeInsets)

add 후 변경하고 싶을 때 이쪽을 사용하세요.

배경색

Row의 배경색을 변경하려는 경우 사용합니다.

var rowBackgroundColor

기본적으로 투명합니다.

add 이후 rowBackgroundColor 변경해도 변경되지 않음

func setBackgroundColor(forRow row: UIView, color: UIColor)

func setBackgroundColor(forRows rows: [UIView], color: UIColor)

add 후 변경하고 싶을 때 이쪽을 사용하세요.

색상 선택

Row 선택 시 색상을 변경할 수 있습니다.
※ StackViewCell 방법이므로 cellForRow()에서 StackViewCell을 따서 불러야 합니다.

var rowHighlightColor

구분자 관련

구분자 색상

var separatorColor

구분자 높이

var separatorHeight

분리자 Inset

var separatorInset: UIEdgeInsets

add 이후 변경도 변경되지 않음

func setSeperatorInset(forRow row: UIView, inset: UIEdgeInsets)

func setSeperatorInset(forRows rows: [UIView], inset: UIEdgeInsets)

add 후 변경하고 싶을 때 이쪽을 사용하세요.

구분자 숨기기

var hidesSeparatorsByDefault

기본값: 가짜

기본적으로 구분 기호를 숨깁니다.add 이후에도 변경되지 않음

func hideSeparator(forRow row: UIView)

func hideSeparators(forRows rows: [UIView])

func showSeparator(forRow row: UIView)

func showSeparators(forRows rows: [UIView])

add 후 변경하고 싶을 때 이쪽을 사용하세요.

var automaticallyHidesLastSeparator

기본값: false

맨 아래 Row 구분 기호의 설정을 자동으로 숨깁니다.

SeparatorHiiding 프로토콜

SeparatorHiding 프로토콜을 적용하면 Row의 구분자만 표시됩니다.

    class ToggleLabel: UILabel, SeparatorHiding {
    }

기타

전체 Row 확보

func getAllRows() -> [UIView]

로우 있어요?

func containsRow(_ row: UIView) -> Bool

Row가 보이는 위치로 스크롤

func scrollRowToVisible(_ row: UIView, animated: Bool = true)

AloeStackView 상속

func cellForRow(_ row: UIView) -> StackViewCell

cell을 추가할 때 호출은 row에 대응하는 StackViewCell로 되돌아옵니다.

func configureCell(_ cell: StackViewCell)

안은 비어 있습니다.생성할 때 (row의dd, insert) 라고 불립니다.

총결산

실시 방식을 대충 살펴보니 모브학과를 제외하고 UItableView가 할 수 있는 주요 일은 기본적으로 모두 할 수 있다.
맨 아래 줄의 구분자를 자동으로 숨기는 기능에 관해서는 UItableView보다 AloeStackView가 더 편리하다고 생각합니다.