Untuk apa properti contentInset UIScrollView?

158

Dapatkah seseorang menjelaskan kepada saya untuk apa properti contentInset UIScrollViewdigunakan? Dan mungkin memberikan contoh?

Orang AsingBR
sumber

Jawaban:

240

Ini mengatur jarak inset antara tampilan konten dan tampilan gulir terlampir.

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)

Inilah artikel Perpustakaan Referensi iOS yang bagus tentang tampilan gulir yang memiliki tangkapan layar informatif (gbr 1-3) - Saya akan mereplikasi melalui teks di sini:

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


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

Tampilan gulir melampirkan tampilan konten ditambah padding apa pun yang disediakan oleh inset konten yang ditentukan.

jball
sumber
apakah itu digunakan untuk menambahkan padding ke UIScrollView? Jika tidak, Anda bisa memberi saya contoh praktis. Masalah saya bukanlah bagaimana mengimplementasikannya tetapi kapan mengimplementasikannya.
ForeignerBR
28
Ya, itu mengisi konten di bagian dalam tampilan gulir. Ini mirip dengan paddingproperti CSS .
Marc W
Maaf untuk mendukung ini, saya bisa memindahkannya pertanyaannya sendiri, tetapi berdasarkan ini, apa yang sebenarnya terjadi jika Anda mengatur setiap nilai contentInset ke 0 selain contentHeight misalnya? Apakah itu memaksa keseluruhan scrollview menjadi ketinggian yang Anda atur?
jakev
@ jakev Tidak, properti .frame mengontrol dimensi scrollview di dalam induknya (Lihat jawaban ini: stackoverflow.com/questions/5361369/… ). Mengatur contentInsets ke 0 untuk semua sisi berarti bahwa konten tidak akan diisi sama sekali di dalam scrollview. Jadi ketika Anda menggulir ke atas, kontennya berada tepat di bagian atas scrollview. Jika Anda menggulir ke bawah, konten mencapai tepat ke bawah scrollview.
Jeremy Wiebe
apakah mungkin untuk menjaga contentInset selalu walaupun ketika scrolling selalu menjaga marin ke atas (contenInset) dari scrollView
Chlebta
86

Sementara jawaban jball adalah deskripsi yang sangat baik dari insets konten, itu tidak menjawab pertanyaan kapan harus menggunakannya. Saya akan meminjam dari diagramnya:

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

Itulah yang Anda dapatkan saat melakukannya, tetapi kegunaannya hanya muncul saat Anda menggulir:

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

Baris atas konten itu akan tetap terlihat karena masih di dalam bingkai tampilan gulir. Salah satu cara untuk memikirkan offset atas adalah "berapa banyak untuk menggeser konten ke bawah tampilan gulir ketika kita digulirkan sepenuhnya ke atas"

Untuk melihat tempat di mana ini benar-benar digunakan, lihat aplikasi Foto bawaan di iphone. Bilah Navigasi dan bilah status transparan, dan konten tampilan gulir terlihat di bawahnya. Itu karena bingkai tampilan gulir memanjang sejauh itu. Tetapi jika bukan karena inset konten, Anda tidak akan pernah dapat memiliki bagian atas konten yang menghapus navigasi bar transparan ketika Anda pergi jauh ke atas.

Fabian
sumber
Yang menyenangkan di sini adalah Anda dapat menggunakan insets untuk membuat efek "scroll under status bar with blur".
TheEye
Contoh tentang aplikasi foto mudah dimengerti.
abhimuralidharan
8

Insets konten memecahkan masalah memiliki konten yang berada di bawah bagian lain dari Antarmuka Pengguna dan masih dapat dijangkau menggunakan bilah gulir. Dengan kata lain, tujuan dari Inset Konten adalah untuk membuat area interaksi lebih kecil dari area sebenarnya.

Pertimbangkan kasus di mana kita memiliki tiga area logis layar:

TOP BUTTONS

TEXT

BOTTOM TAB BAR

dan kami ingin TEKS agar tidak pernah muncul secara transparan di bawah TOP TOMBOL, tetapi kami ingin Teks muncul di bawah BOTTOM TAB BAR dan masih memungkinkan pengguliran sehingga kami dapat memperbarui teks yang duduk secara transparan di bawah BOTTOM TAB BAR.

Kemudian kita akan menetapkan asal atas menjadi di bawah TOMBOL TOP, dan tinggi untuk memasukkan bagian bawah BOTTOM TAB BAR. Untuk mendapatkan akses ke Teks yang duduk di bawah konten BOTTOM TAB BAR kami akan mengatur inset bawah menjadi ketinggian BOTTOM TAB BAR.

Tanpa sisipan, penggulung tidak akan membiarkan Anda menggulung konten yang cukup untuk mengetik ke dalamnya. Dengan inset, seolah-olah konten memiliki "isi BLANK" ekstra ukuran inset konten. Teks kosong telah "inset" ke dalam "konten" yang sebenarnya - begitulah saya mengingat konsepnya.

Faisal Memon
sumber
4

Ini digunakan untuk menambahkan padding UIScrollView

Tanpa contentInset, tampilan tabel seperti ini:

masukkan deskripsi gambar di sini

Kemudian atur contentInset:

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

Efeknya adalah sebagai berikut:

masukkan deskripsi gambar di sini

Tampaknya lebih baik, bukan?

Dan saya menulis blog untuk mempelajari contentInset, kritik diterima.

fujianjin6471
sumber
2

Pertanyaan yang bagus

Pertimbangkan contoh berikut ( scrolleradalah 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)];
}

Insets adalah HANYA cara untuk memaksa scroller Anda memiliki "jendela" pada konten yang Anda inginkan. Saya masih mengacaukan kode sampel ini, tetapi idenya ada di sana: gunakan insets untuk mendapatkan "jendela" di blog Anda UIScrollView.

Dan Rosenstark
sumber