web-dev-qa-db-ja.com

Autolayoutを使用したプログラムUIScrollview

AppleのWebサイトでテクニカルノートを読み、Autolayoutを使用してUIScrollviewを設定してiOS 11のプログラミングに関するmatt neuburgの本を読んだ後、すべてがどのように機能するかの概念を完全に理解できませんでした。

基本的に私が持ちたいのは、子ビューを持つScrollviewですChildViewこの子ビューにはTextviewがあります。

以下に、私が達成しようとしているもののモックアップを添付しますプログラマチックにペン先なし、ストーリーボードなし。

enter image description here

コードについては、これは私が通常思いつくものです：

コード

let Scroller: UIScrollView = {
    let scroll = UIScrollView()
    scroll.translatesAutoresizingMaskIntoConstraints = false
    scroll.backgroundColor = UIColor.alizarinColor()
    return scroll
}()

// Content view

let ContentView : UIView = {

    let content = UIView()
    content.translatesAutoresizingMaskIntoConstraints = false
    content.backgroundColor = UIColor.blue
    return content
}()

override func viewDidLoad() {

    super.viewDidLoad()

    self.view.addSubview(Scroller)

    // Auto layout
    Scroller.leftAnchor.constraint(equalTo: view.leftAnchor, constant:0).isActive = true
    Scroller.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    Scroller.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
    Scroller.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true

    Scroller.addSubview(ContentView)
    // Undefined Content view 
}

注意してください：ContentView、私は通常、この場合、Autolayoutではなく、キーボードbecomesFirstResponderのときに垂直に上にスクロールさせたいという事実はありません。私がこれを思いついたもう1つの方法は、スクロールビューよりも大きいUIViewを作成して、スクロールビューを親とするこの大きなビューの子ビューを子ビューにすることです。

私の問題：これからどうやってこれを達成できますか？助言がありますか？私はそれを次のようなものに考えていました：（ContentViewはこれをスクロール可能にするより大きなビューになり、子ビューは階層の3番目の子ビューになります）

enter image description here

iosswiftuiscrollviewautolayout
15
Samarey

UIScrollViewが自動レイアウトでどのように機能するかについて、Appleのドキュメントを注意深く読みました。

  1. まず、フェイクコンテンツビューを作成する必要はありません、スクロールビューにサブビューを直接追加できます（フェイクコンテンツビューは無関係であり、不要なオブジェクト）。 Appleは作成することをお勧めしません。できることを提案するだけです。

  2. 次に、スクロールビューのサブビューは、サイズを決定するためにスクロールビューに依存せず、位置のみを決定します。

  3. そして3番目に、制約は、自動レイアウトがコンテンツビューを作成するために、左端、右端、最上端、および最下端を定義する必要があります。このルールは最初は直感に反するように思えるかもしれませんが、Appleがスクロールビューを作成することを望んでいる方法です。

具体的には、スクロールビューを作成するときに、そのフレームにコントローラービューの境界を指定できます。

_scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
_

次に、サブビューをスクロールビューの端に固定して、コンテンツビューの境界を設定する必要があります。したがって、最上部のビューはスクロールビューの上部に固定する必要があり、その幅はスクロールビューの幅（ビューの幅）を超えることはできません（目標の場合は（は垂直方向のみのスクロールです）。

_topMostView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(topMostView)
topMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
topMostView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
topMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
topMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true
_

topMostViewはスクロールビューに依存せずにサイズ（位置のみ）を決定します。これは重要です。

スクロールビューのコンテンツの高さは_1000_になりましたが、スクロールビューの下部には何も固定されていないためスクロールしません。したがって、一番下のビューでそれを行います。

_bottomMostView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(bottomMostView)
bottomMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
bottomMostView.topAnchor.constraint(equalTo: topMostView.bottomAnchor).isActive = true
bottomMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
bottomMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true

bottomMostView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
_

最後のアンカーは、_1000_ポイントの高さのビューを、ビューの下部にちょうどアンカーしたアンカーに固定しているため、_1000_ポイントの高さよりも確実に小さいため、奇妙に見えるかもしれません。しかし、これはAppleがあなたにそれを望んでいる方法です。この方法では、コンテンツビューを作成する必要はありません。自動レイアウトがあなたのためにそれを行います。通常のスクロールビューのプロパティからのコンテンツビューの寸法。

ちなみに、「エッジの制約」（左端、右端、最上端、最下端）を定義するこの原則は、スクロールビューを超えています。自動レイアウトを使用してカスタムUITableViewCellを作成し、4つのエッジ制約を定義する（つまり、最上部のサブビューがセルtopMostView.topAnchor.constraint(equalTo: self.topAnchor).isActive = trueの最上部に固定され、最下部のサブビューがセルの下部bottomMostView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = trueなど）は、自己サイズ調整セルの作成方法です。それは、実際にはビュー、コントロールなどのように、セルフサイジングを作成する方法です。

40
bsod

ScrollViewを作成するとき、Apple contentViewをその中に入れ、そのcontentViewにviewControllerのビューの幅を与え、top、bottom、leading、trailing制約をscrollviewに固定してから、開始することをお勧めします必要に応じてアイテムを上から下に配置し、一番下のアイテムをscollviewのcontentViewの一番下に固定することで、scrollviewが高さをレンダリングできるようにします。この下の制約は好きなように設定できます。それ

5
Sh_Khan