web-dev-qa-db-ja.com

AutoLayoutを使用して、UIScrollViewの下部に表示

自動レイアウトのスクロールビューでコンテンツを設定しています。スクロールビュー内のオブジェクトは、前のものに上から下に固定されているため、それらは互いに下にあります。これらのオブジェクトの下に、最後に追加されたフッタービューがあります。

ここでの問題は次のとおりです。コンテンツが少ない場合、contentViewは画面の高さよりも小さくなるため、フッタービューは画面の中央のどこかに表示されます（これは通常の動作です）。しかし、それを防ぎ、ビューがどこか下に留まるようにしたいと思います。

つまり、次のような二重の制約を設定したいと思います。

Put this view below all the objects in the scrollview 
AND
keep this view at a distance of max [some number] of the bottom of the screen

両方の制約が常に満たされるように：

  • コンテンツの高さが画面よりも大きい場合、下にスクロールすると、ビューが下部に表示されます
  • 高さが小さい場合、ビューは画面の下部に「固定」され、コンテンツの下部とこのビューの上部の間に比較的大きなスペースが残ります

AutoLayoutでそれを実現するにはどうすればよいですか？

iosswiftautolayoutconstraints
11
Coconuts

自動レイアウトのみでかなり簡単...コードは必要ありません。

重要なのは、「コンテンツビュー」を使用して要素を保持し、「下」要素と「フッター」ビューの間のgreater-than-or-equal制約を使用することです。

この画像では、黄色がメインビュー、緑がスクロールビュー、青がコンテンツビュー、ラベルがグレー、フッタービューがピンクです。

enter image description here

  • 新しいView Controllerから始めます
  • スクロールビュー、通常の制約を追加します（私はずっと20を使用していたので、フレームを見ることができます）
  • UIViewをscrollViewに追加します-これが「コンテンツビュー」になります
  • contentView Top/Bottom/Leading/Trailing allに等しい0をscrollViewに制限する
  • contentViewの幅と高さの両方をscrollViewに制限します
  • 要素を追加します-ここでは3つのラベルを使用しました
  • ラベルを通常どおりに制限します...私は次のように使用しました：
    • LabelA-すべてが20で上/先頭/末尾に、LabelBまでの垂直間隔が60
    • LabelB-20の先頭/末尾、LabelCまでの垂直間隔は60
    • LabelC-20の先頭/末尾
  • LabelCもNumber of Lines: 0に設定されているため、複数行のテキストで展開されます
  • UIViewを「フッタービュー」として追加します（ラベルを貼り付けました）
  • footerView Leading/Trailing/Bottomをすべて20に制約します（フレームが見えるようにします）。
  • フッタービューに高さ制約を設定するか、そのコンテンツを使用して高さを制約します
  • labelCからfooterViewに垂直間隔制約を追加し、>= 40に設定します
  • 最後のステップでは、contentViewの高さ制約をPriority: 250に変更します

これで、LabelCの高さを拡大または縮小しても、footerViewは少なくとも垂直スペースを40ポイント保持します。 LabelCがフッタービューを下部に「プッシュ」するのに十分な大きさになると、scrollViewはスクロール可能になります。

結果：

enter image description hereenter image description hereenter image description here

28
DonMag

scrollViewのContentSizeを確認し、FooterView上位制約を必要な値で変更する必要があります

私のクラスコード

import UIKit

class scrollViewDrag: UIViewController
{
    /// ScrollView Outlet
    @IBOutlet weak var mainScrollView: UIScrollView!

    /// Footer View top spacing constraint
    @IBOutlet weak var footerViewTopConstraint: NSLayoutConstraint!

    /// Used for ScrollView Height
    var screenHeight = CGFloat()

    /// Did Load
    override func viewDidLoad() {
        super.viewDidLoad()

    }

    /// Function used to check for height 
    func checkForHeight(){
        /// Get scrollView Height
        screenHeight = mainScrollView.frame.size.height

        /// Check contentSize Height ?
        if mainScrollView.contentSize.height >= screenHeight {
            /// When ScrollView is having height greater than your scrollView Height
            /// Footer will scroll along other Views
        }
        else{
            /// Issue Case
            let spacingValue = screenHeight-mainScrollView.contentSize.height
            footerViewTopConstraint.constant = spacingValue
        }
    }

    /// Call the height function in DidAppear
    override func viewDidAppear(_ animated: Bool) {
        checkForHeight()
    }
}

ストーリーボード

enter image description here

私は同じ高さの4つのビューを使用していましたが、最後にフッタービューが4番目のビューとして接続されています

FooterView上部制約

enter image description here

footerViewTopConstraintとして使用される上位の制約

出力

ケース1-サイズがscrollViewの高さより大きい

enter image description here

ケース2-予想される出力

enter image description here

1
iOS Geek