サーチ…


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

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分以内にそれを処理することができるはずです。次に、学習した概念を自分のプロジェクトに適用することができます。

水平スクロールを表示するアニメーションGIF

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

主なコンセプト

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

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

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

ストーリーボード

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

シミュレートされたサイズの設定

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

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

スクロールバーの固定スクリーンショット

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

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

固定コンテンツビューのスクリーンショット

イコールハイツ

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

均等な高さを設定する

注意:

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

コンテンツを追加

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

コンテンツビューを追加したIBのスクリーンショット

制約:

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

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

完成した

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

さらなる研究

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

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 

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