[Swift] 코드로 ScrollView 레이아웃을 작성합니다.

입문


스토리보드에서 ScrollView 레이아웃을 쉽게 설정할 수 있습니다.
때로는 코드로 설정해야 하는데...
어떤 장면인지.
동적으로 레이아웃을 변경하고 싶을 때!
예를 들어, 스크롤할 뷰의 레이아웃이 데이터베이스 데이터에 따라 다를 경우 스크롤 뷰의 레이아웃을 동적으로 변경해야 합니다.
이 글에서, 나는 내가 실제로 좋아하는 ScrollView 레이아웃 인코딩의 회의 기록을 쓰기로 결정했다.

ScrollView 크기 결정 방법


ScrollView 레이아웃을 설정하면 스크롤되지 않을 수 있습니다.
이것은 많은 경우에 ScrollView입니다.컨텐츠 크기를 설정하지 않았기 때문인 것 같습니다.
예, ScrollView 크기는 ScrollView입니다.contentsize에서 결정합니다.
따라서 스크롤 보기의 레이아웃이 표시하고자 하는 대상에 따라 변경되면 대상의 크기에 따라 contentSize를 다시 설정해야 합니다.
var dataNum: Int
//データの数が10個の時
dataNum = 10
scrollView.contentSize = CGSize(width: 100, height: 100 * dataNum)
이렇게 쓰면 ScrollView의 크기는 데이터의 수에 따라 달라집니다.

ScrollView에 객체 배치


이로써 ScrollView의 크기를 개체 수에 따라 조정하는 방법을 알게 되었습니다!
다음 단계는 실제 대상을 스크롤 보기에 추가한 다음 코드로 레이아웃을 변경하는 것입니다!
이번에는 스크롤 보기에 여러 개의 보기를 추가하고 싶습니다.
다음 그림과 같이 View 계층이 스토리보드에 있는 ScrollView와 ParentView가 모/자 관계로 연관되어 있다고 가정합니다.

우선 subView 생성


//subViewの数
 let num = 10
//表示するviewの数(今回は10とする)

for _ in 1...num  {
  let subView = UIView()
  subView.translatesAutoresizingMaskIntoConstraints = false
  ParentView.addSubview(subView)
}

다음으로, 우리는subview를 제약할 것이다

for subview in ParentView.subviews{

            //左側の設定
            subview.leadingAnchor.constraint(equalTo: ParentView.leadingAnchor, constant: 0).isActive = true
            //右側の設定
            subview.trailingAnchor.constraint(equalTo: ParentView.trailingAnchor, constant: 0).isActive = true

            //Topの設定
            //一番上のsubviewnのTopはParentViewのTopを基準にする
            if subview == ParentView.subviews.first {
                subview.topAnchor.constraint(equalTo: ParentView.topAnchor, constant: 0).isActive = true

                //高さはParentViewをviewの数分だけ分割したものとする
                subview.heightAnchor.constraint(equalTo: ParentView.heightAnchor, multiplier: CGFloat(1 / num)).isActive = true
            }else{
                if let firstView = ParentView.subviews.first {
                    //一番上のView以外は高さのみ設定する
                    subview.heightAnchor.constraint(equalTo: firstView.heightAnchor, multiplier: 1.0).isActive = true
                }
            }


            //Bottomの設定
            //一番したのViewはParentViewを基準に設定する
            if subview == ParentView.subviews.last {
                subview.bottomAnchor.constraint(equalTo: ParentView.bottomAnchor, constant: 0).isActive = true
            }else{
                //他のviewは次のsubview(1つ下のview)のtopを基準に設定する
                //ちなみに、after()はArryにextentionしてます
                if let nextView = ParentView.subviews.after(subview){
                    subview.bottomAnchor.constraint(equalTo: nextView.topAnchor, constant: 0).isActive = true
                }
            }
        }

마지막으로 ParentView 제한 사항 추가


참고로 저는 scrollView를 ParentView의 슈퍼뷰로 삼고 있습니다.
        //ParentViewのフレームのアップデート
        if let scrollV = ParentView.superview as? UIScrollView {
            ParentView.translatesAutoresizingMaskIntoConstraints = false
            //ParentViweの幅をスクロールviewを基準とする
            ParentView.widthAnchor.constraint(equalToConstant: scrollV.frame.width).isActive = true
            //ParentViewの高さをクロールviewを基準とし、num倍する
            ParentView.heightAnchor.constraint(equalTo: scrollV.heightAnchor, multiplier: CGFloat(num)).isActive = true

            scrollV.contentOffset = CGPoint(x: 0, y: 0)
            scrollV.contentSize = ParentView.frame.size


        }
        //レイアウトの更新
        self.view.layoutIfNeeded()

마지막


View 레이아웃의 라이프 사이클과 관련이 있지만 이번에는 설명이 없으므로 아래 기사를 참고하십시오.
UIVIew 레이아웃의 라이프 사이클

좋은 웹페이지 즐겨찾기