Для чего нужно свойство contentInset UIScrollView?


158

Может кто-нибудь объяснить мне, для чего используется свойство contentInset в UIScrollViewэкземпляре? А может привести пример?

Ответы:


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
Да, он дополняет содержимое внутри представления прокрутки. Это похоже на paddingсвойство CSS .
Марк W

Извините за это, я могу перенести это на свой вопрос, но исходя из этого, что на самом деле произойдет, если вы установите для каждого значения contentInset значение 0, отличное от contentHeight, например? Это заставляет весь скроллвью быть высотой, на которую вы его установили?
Яков

@jakev Нет. Свойство .frame управляет размерами прокрутки в пределах его родителя (см. этот ответ: stackoverflow.com/questions/5361369/… ). Если для contentInsets задано значение 0 для всех сторон, это просто означает, что содержимое не будет дополнено в пределах прокрутки. Поэтому, когда вы прокручиваете до верха, контент располагается прямо напротив вершины прокрутки. Если вы прокрутите страницу до конца, контент достигнет нижней части прокрутки.
Джереми Уибе

Можно ли сохранить contentInset всегда, даже когда прокрутка всегда держать отступ к началу (contenInset) scrollView
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| ↓
---------------
  _|_______|___ 
             ↑

Этот верхний ряд контента будет по-прежнему видимым, потому что он все еще находится внутри фрейма представления прокрутки. Один из способов думать о верхнем смещении - «насколько сместить контент вниз по представлению прокрутки, когда мы прокручиваемся полностью до самого верха»

Чтобы увидеть место, где это на самом деле используется, посмотрите на встроенное приложение «Фотографии» на iphone. Панель навигации и строка состояния прозрачны, а содержимое вида прокрутки видно под ним. Это потому, что кадр представления прокрутки простирается так далеко. Но если бы не вставка содержимого, вы никогда бы не смогли очистить верхнюю часть содержимого на этой прозрачной панели навигации, когда вы пройдете весь путь вверх.


Приятно, что вы можете использовать вставки для создания эффекта «прокрутки под строкой состояния с размытием».
TheEye

Пример с приложением о фотографиях был понятен.
abhimuralidharan

8

Вставки содержимого решают проблему наличия содержимого, которое находится под другими частями пользовательского интерфейса и все же остается доступным с помощью полос прокрутки. Другими словами, цель Content Inset - сделать область взаимодействия меньше, чем ее фактическая область.

Рассмотрим случай, когда у нас есть три логические области экрана:

TOP BUTTONS

TEXT

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.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.