iOS => UIScrollView

UIScrollViewを作成する

CGRectをフレームとしてUIScrollViewのインスタンスを作成します。

迅速

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

目標-C

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

スクロールコンテンツのサイズを表示

contentSizeプロパティは、スクロール可能なコンテンツのサイズに設定する必要があります。スクロール可能領域のサイズを指定します。スクロール可能領域、つまりcontentSizeがUIScrollViewフレームサイズより大きい場合、スクロールが表示されます。

Autolayoutで：

スクロールビューのコンテンツがautolayoutを使用して設定されている場合は、明示的に垂直方向と水平方向の両方にサイズを設定し、4つのエッジをすべてスクロールビューに固定する必要があります。このように、 contentSizeはスクロールビューのコンテンツに基づいて自動的に計算され、コンテンツのレイアウトが変更されたときにも更新されます。

手動：

迅速

scrollview.contentSize = CGSize(width: 640, height: 800)

目標-C

scrollview.contentSize = CGSizeMake(640, 800);

AutoLayoutを使用したScrollView

autolayoutでscrollviewを使うための簡単なステップ。

単一ビューアプリケーションで新しいプロジェクトを作成する
デフォルトのViewControllerを選択し、属性インスペクタからiPhone-4inchにその画面サイズを変更します。
次のようにviewcontrollerのビューにスクロールビューを追加し、背景色を青に設定します

下の図に示すように、制約を追加します

これがすることは、単にviewcontrollerのビューにスクロールビューのすべてのエッジを貼り付けることです

シナリオ1：

今私たちのコンテンツが巨大であると言えば、それは垂直方向だけでなく水平方向にもスクロールしたいと考えています。

このため、

フレーム（0,0,700,700）のスクロールビューにUIViewを追加します。別の方法で識別するために、オレンジの背景色を付けます。

次は重要な部分です。水平方向と垂直方向にスクロールする必要があります。

オレンジ色のビューを選択し、次の制約を追加します

私が上記のステップで行ったことを説明しましょう。

高さと幅を700に固定しました。
末尾のスペースをscrollview = 0に設定すると、スクロールビューにコンテンツが水平方向にスクロール可能であることが通知されます。
ボトムスペースをscrollview = 0に設定し、スクロールビューに内容が垂直スクロール可能であることを通知します。

今すぐプロジェクトを実行して確認します。

シナリオ2： コンテンツの幅がスクロール幅の幅と同じになるが、高さがスクロールビューよりも大きいことがわかっているシナリオを考えてみましょう。

手順に従って、コンテンツを垂直方向にスクロールします。

上記の場合、幅の制約を削除してください。
オレンジ色の表示の幅をスクロール幅に合わせて変更します。
オレンジ色のビューからCtrlキーを押しながらドラッグして、ビューをスクロールし、 等幅のコンストレインを追加します。

そして完了！単に実行し、それが垂直にスクロールするかどうか確認してください

シナリオ3：

今度は、垂直方向ではなく水平方向にのみスクロールしたいと考えています。

手順に従って、コンテンツを水平方向にスクロールします。

すべての変更を元に戻して 、以下のように制約を達成します（つまり、垂直スクロールおよび水平スクロールを達成した元の制約を復元します ）

オレンジ色のビューのフレームを確認してください（0,0,700,700）
オレンジ色の表示の高さの制約を削除します。
スクロールビューの高さに合わせてオレンジ色の高さを変更します。
オレンジ色のビューからCtrlキーを押しながらドラッグして、ビューをスクロールし、 等しい高さの制約を追加します。

そして完了！単に実行し、それが垂直にスクロールするかどうか確認してください

自動レイアウトを有効にしてコンテンツをスクロールする

このプロジェクトは、Interface Builderに完全に組み込まれた自己完結型の例です。あなたは10分以内にそれを処理することができるはずです。次に、学習した概念を自分のプロジェクトに適用することができます。

ここではUIView使用していますが、好きなビュー（ボタン、ラベルなど）を表すことができます。私はストーリーボードのスクリーンショットがこのフォーマットのためによりコンパクトであるため、水平スクロールも選択しました。ただし、垂直スクロールの原則は同じです。

主なコンセプト

UIScrollViewは1つのサブビューのみを使用する必要があります。これは、スクロールしたいものすべてを保持するコンテンツビューとして機能する「UIView」です。
コンテンツビューとスクロールビューの親の水平スクロールの高さを同じにします。（縦スクロールの場合と同じ幅）
スクロール可能なすべてのコンテンツの幅が設定され、すべての側面に固定されていることを確認します。

新しいプロジェクトを開始する

単一のビューアプリケーションにすぎません。

ストーリーボード

この例では、水平スクロールビューを作成します。 View Controllerを選択し、Size InspectorでFreeformを選択します。幅を1,000 、高さを300ます。これは、スクロールするコンテンツを追加するためにストーリーボードの部屋を私たちに提供するだけです。

スクロールビューを追加する

UIScrollViewを追加し、4面すべてをView Controllerのルートビューに固定します。

コンテンツビューを追加する

スクロールビューにサブビューとしてUIViewを追加します。 これが鍵です。スクロールビューに多くのサブビューを追加しようとしないでください。単一のUIView追加するだけです。これは、スクロールする他のビューのコンテンツビューになります。コンテンツビューをすべての4つの側面のスクロールビューに固定します。

イコールハイツ

今すぐドキュメントアウトラインでは、 コマンドはそれらの両方を選択するために、コンテンツビューとスクロールビューの親ビューの両方をクリックしてください。次に、高さを等しくなるように設定します（コンテンツビューからスクロールビューへのControl </ kbdドラッグ）。 これはまた重要です。水平方向にスクロールしているので、スクロールビューのコンテンツビューでは、このように設定しない限り、どれだけ高いかわかりません。

注意：

コンテンツを垂直方向にスクロールさせる場合は、コンテンツビューの幅をスクロールビューの親の幅と同じに設定します。

コンテンツを追加

3つのUIViewを追加し、すべての制約を与えます。私はすべてに8ポイントのマージンを使用しました。

制約：

緑色の表示：上端、左端、下端を固定します。幅400を作成します。
赤い表示：上端、左端、下端を固定します。幅を300にする。
パープルビュー：4つのエッジをすべてピンします。残りのスペースが何であれ（この場合は268）、幅を指定します。

幅の制約を設定することも重要です。そのため、スクロール・ビューはコンテンツ・ビューの幅を知ることができます。

完成した

それで全部です。今すぐあなたのプロジェクトを実行することができます。この回答の先頭にあるスクロールイメージのように動作するはずです。

さらなる研究

iOS：AutoLayoutをScrollViewで動作させる方法
Interface Builderで自動レイアウトを使用してUIScrollViewを構成する方法
YouTubeのビデオチュートリアル： UIScrollView - 画面上でのビューの保持方法

スクロールを有効/無効にする

scrollEnabledプロパティは、スクロールが有効かどうかを決定するBoolean値を格納します。
このプロパティの値がtrue / YESの場合、スクロールが有効になります。そうでない場合はスクロールが有効になります。デフォルト値はtrue

迅速

scrollview.isScrollEnabled = true

目標-C

scrollview.scrollEnabled = YES;

ズームイン/アウトUIImageView

UIScrollViewインスタンスを作成する

let scrollview = UIScrollView.init(frame: self.view.bounds)

次に、これらのプロパティを設定します。

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate

画像をズームインまたはズームアウトするには、ユーザーが拡大/縮小できる量を指定する必要があります。私たちは、スクロールビューの値に設定することによってこれを行うminimumZoomScaleとmaximumZoomScaleプロパティを。どちらもデフォルトで1.0に設定されています。

最小と最大のズーミングのズームファクタを指定するzoomScaleと1.0を指定します。

ズームをサポートするには、スクロールビューのデリゲートを設定する必要があります。デリゲートオブジェクトは、 UIScrollViewDelegateプロトコルに準拠している必要があります。そのデリゲートクラスはviewForZoomingInScrollView()メソッドを実装し、ビューをズームしてズームする必要があります。

図のようにViewControllerを変更してください

class ViewController: UIViewController, UIScrollViewDelegate

次に、クラスに次のデリゲート関数を追加します。

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

UIImageViewインスタンスを作成する

この変数をクラス変数にする

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

それをscrollviewに追加します

scrollView?.addSubview(imageView)

参照

UIScrollViewがデリゲートメソッドのスクロールを終了したときの検出

scrollViewDidEndDecelerating：これは、スクロールビューがスクロール移動の減速を終了したことをデリゲートに伝えます。

目的C：

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

迅速：

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

スクロール方向を制限する

次のコードを使用して、ユーザーがスクロールできる方向を制限できます。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

ユーザーがx軸をスクロールするたびに、scrollViewのコンテンツオフセットが0に設定されます。
明らかにx sをy sに変更することができます。そのため、方向を水平のみにロックします。

また、このコードをscrollViewDidScroll(_ scrollView: UIScrollView)デリゲートメソッドに配置する必要があります。さもなければ、あなたはそれを働かせることはありません。

また、次のように、クラス宣言にUIScrollViewDelegateをインポートしてください。

class ViewController: UIViewController, UIScrollViewDelegate

...とviewDidLoad(_:)ようないくつかのメソッドでselfにscrollViewのデリゲートを設定しviewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

iOS
UIScrollView

サーチ…

UIScrollViewを作成する

スクロールコンテンツのサイズを表示

AutoLayoutを使用したScrollView

自動レイアウトを有効にしてコンテンツをスクロールする

主なコンセプト

新しいプロジェクトを開始する

ストーリーボード

完成した

さらなる研究

スクロールを有効/無効にする

ズームイン/アウトUIImageView

UIImageViewインスタンスを作成する

UIScrollViewがデリゲートメソッドのスクロールを終了したときの検出

目的C：

迅速：

スクロール方向を制限する