UIScrollView contentInsetプロパティは何のためのものですか?


158

UIScrollViewインスタンスのcontentInsetプロパティが何に使用されているかを誰かに説明できますか?そして多分例を提供しますか?

回答:


240

コンテンツビューとそれを囲むスクロールビューの間のはめ込みの距離を設定します。

Obj-C

aScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 7.0);

Swift 5.0

aScrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 7.0)

有益なスクリーンショットがあるスクロールビューに関する優れたiOSリファレンスライブラリの記事を以下に示します(図1-3)。ここでは、テキストを使用して複製します。

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑


   (cH = contentSize.height; cW = contentSize.width)

スクロールビューは、コンテンツビューと、指定されたコンテンツインセットによって提供されるパディングを囲みます。


それは、UIScrollViewにパディングを追加するために使用されますか?できない場合は、実用的な例を教えてください。私の問題は、それをどのように実装するかではなく、いつ実装するかです。
ForeignerBR

28
はい、コンテンツをスクロールビューの内側に埋め込みます。CSS paddingプロパティに似ています。
マークW

これに便乗して申し訳ありませんが、私はそれを独自の質問に移動できますが、これに基づいて、たとえば各contentInset値をcontentHeight以外の0に設定するとどうなりますか?それにより、スクロールビュー全体が設定した高さに強制されますか?
jakev

@jakevいいえ、.frameプロパティは、その親内のスクロールビューのサイズを制御します(この回答を参照してください:stackoverflow.com/questions/5361369/…)。すべての面でcontentInsetsを0に設定することは、コンテンツがスクロールビュー内でまったくパディングされないことを意味します。したがって、最上部にスクロールすると、コンテンツはスクロールビューの最上部に対して真っすぐに配置されます。一番下までスクロールすると、コンテンツはスクロールビューの一番下まで届きます。
Jeremy Wiebe 2013

スクロール時に常にmarinがscrollViewの先頭(contenInset)に維持される場合でも、contentInsetを常に維持することは可能ですか
Chlebta

86

jballの答えはコンテンツインセットの優れた説明ですが、いつ使用するかという質問には答えません。私は彼の図から借ります:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
   |content|    
-------------↑-

これを実行すると、それが得られますが、その有用性はスクロールしたときにのみ表示されます。

  _|←_cW_→_|_↓_
   |content| ← content is still visible
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑

コンテンツの一番上の行はスクロールビューのフレーム内にあるため、引き続き表示されます。上部のオフセットを考える1つの方法は、「最上部までスクロールしたときに、コンテンツをスクロールビューの下にどれだけシフトするか」です。

これが実際に使用されている場所を確認するには、iPhoneの組み込みのフォトアプリを確認してください。ナビゲーションバーとステータスバーは透明で、下にスクロールビューのコンテンツが表示されます。これは、スクロールビューのフレームがそこまで伸びているためです。しかし、それがコンテンツのインセットでなかった場合、最上部に移動しても、コンテンツの上部に透明なナビゲーションバーを表示させることはできません。


ここでの良い点は、インセットを使用して「ぼかしのあるステータスバーの下にスクロール」効果を作成できることです。
TheEye

写真アプリの例はわかりやすかったです。
abhimuralidharan 2017

8

コンテンツインセットは、ユーザーインターフェイスの他の部分の下に配置され、それでもスクロールバーを使用して到達可能なままであるコンテンツの問題を解決します。つまり、コンテンツインセットの目的は、インタラクションエリアを実際のエリアよりも小さくすることです。

画面に3つの論理領域がある場合を考えてみます。

TOP BUTTONS

TEXT

BOTTOM TAB BAR

TEXTをTOP BUTTONSの下に透過的に表示しないようにしますが、BOTTOM TAB BARの下にテキストを表示し、スクロールを許可して、BOTTOM TAB BARの下に透過的に配置されたテキストを更新できるようにします。

次に、上部の原点を上部ボタンの下に、高さを下部のタブバーを含むように設定します。BOTTOM TAB BARのコンテンツの下にあるテキストにアクセスするには、下のインセットをBOTTOM TAB BARの高さに設定します。

インセットがないと、スクローラは入力するのに十分なコンテンツをスクロールアップできません。インセットを使用すると、コンテンツにはインセットのサイズの余分な "空白のコンテンツ"があるかのようになります。空白のテキストは、実際の「コンテンツ」に「はめ込まれています」-そのように私はコンセプトを覚えています。


4

パディングを追加するために使用されます UIScrollView

なしのcontentInset場合、テーブルビューは次のようになります。

ここに画像の説明を入力してください

次に設定しcontentInsetます:

tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

効果は次のとおりです。

ここに画像の説明を入力してください

より良いようですよね?

そして、私はブログを書いてcontentInset、批評を歓迎します。


2

すばらしい質問です。

次の例を考えてみます(scrollerはUIScrollViewです):

float offset = 1000;
[super viewDidLoad];
for (int i=0;i<500; i++) {
    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(i * 100, 50, 95, 100)] autorelease];
    [label setText:[NSString stringWithFormat:@"label %d",i]];
    [self.scroller addSubview:label];
    [self.scroller setContentSize:CGSizeMake(self.view.frame.size.width * 2 + offset, 0)];
    [self.scroller setContentInset:UIEdgeInsetsMake(0, -offset, 0, 0)];
}

インセットは、スクローラーにコンテンツの「ウィンドウ」を強制的に配置する唯一の方法です。私はまだこのサンプルコードをいじっていますが、アイデアはありますUIScrollView。インセットを使用しての「ウィンドウ」を取得します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.