Bagaimana menambahkan padding terkemuka untuk melihat ditambahkan di dalam UIStackView

127

Ini adalah pengaturan saya: Saya memiliki UIScrollViewtepi dengan leading, top, trialing edge yang disetel ke 0. Di dalamnya saya menambahkan UIStackViewdengan batasan ini:

stackView.centerYAnchor.constraintEqualToAnchor(selectedContactsScrollView.centerYAnchor).active = true  
stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor).active = true

Di dalam tampilan tumpukan saya menambahkan beberapa tampilan.
Masalah saya adalah karena kendala, tampilan pertama yang ditambahkan ke tampilan tumpukan juga akan memiliki tepi terdepan = 0.

Apa cara agar saya bisa menambahkan beberapa padding ke tampilan pertama? Tanpa menyesuaikan batasan tampilan gulir.

Adrian
sumber
2
maukah Anda menambang mengubah jawaban yang diterima? Jawaban Tolga sepertinya jauh lebih baik.
Madu

Jawaban:

27

Solusi yang Anda berikan tidak menambahkan padding untuk tampilan Anda di dalam UIStackView Anda (seperti yang Anda inginkan dalam pertanyaan), tetapi ini menambahkan petunjuk untuk UIStackView.

Solusinya bisa dengan menambahkan UIStackView lain di dalam UIStackView asli Anda dan memberikan arahan ke UIStackVIew baru ini. Kemudian, tambahkan tampilan Anda ke UIStackView baru ini.

Petunjuk, Anda dapat melakukannya sepenuhnya menggunakan Interface Builder. Dengan kata lain, tidak perlu menulis kode untuk itu.

William Kinaan
sumber
375

Jika isLayoutMarginsRelativeArrangementproperti benar, tampilan tumpukan akan menata tampilan yang diatur relatif terhadap margin tata letaknya.

stackView.layoutMargins = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
stackView.isLayoutMarginsRelativeArrangement = true

Tapi itu mempengaruhi semua tampilan yang diatur di dalam tampilan tumpukan. Jika Anda ingin padding ini hanya untuk satu tampilan tersusun, Anda perlu menggunakan nestedUIStackView

Tolga Okur
sumber
2
isLayoutMarginsRelativeArrangementadalah getter, setter is layoutMarginsRelativeArrangement. Saya tidak bisa mengedit jawabannya
maross
5
@maross tidak ada perbedaan antara fungsi pengambil dan penyetel di Swift. Tapi Anda benar, orang yang mengembangkan dengan Objective-C harus menggunakannya layoutMarginsRelativeArrangement. Dokumentasi resmi: developer.apple.com/reference/uikit/uistackview/…
Tolga Okur
3
Untuk Objective-C:stackView.layoutMargins = UIEdgeInsetsMake(0, 20, 0, 20); [stackView setLayoutMarginsRelativeArrangement:YES];
Snouto
4
Feb 2019, tengah malam duduk di kantor - Jawaban seperti ini memberi saya kekuatan untuk maju. Terima kasih @tolpp
nefarianx
156

Saya telah menemukan bahwa batasan tidak berfungsi di dalam Stack View, atau terlihat agak aneh.

(Seperti jika saya menambahkan batasan leading / trailing ke yang dipilih pada image stackview, yang menambahkan mengarah ke collectionview juga, tetapi tidak menambahkan trailing; dan pasti konflik).

stackview di dalam stackview

Untuk mengatur margin tata letak untuk semua tampilan di dalam stackview, pilih:

Stack View > Size Inspector > Layout Margins > Fixed

Catatan: "Fixed"opsi sebelumnya disebut "Explicit", seperti yang terlihat di tangkapan layar.

Kemudian tambahkan padding Anda:

papan cerita

Zaporozhchenko Oleksandr
sumber
23
salah satu hal yang disembunyikan Apple. Saya benci bagaimana Xcode adalah kebalikan dari baik, ramah dan mudah. Terima kasih
Bebek
Xcode terus mogok saat saya mengubah margin tata letak eksplisit tersebut. Mengajukan bug tetapi mereka menjawab itu adalah duplikat.
mvandillen
Itulah yang tidak dapat saya temukan di UI. Ubah Margin Tata Letak menjadi Eksplisit untuk melihat bidang margin Stack View.
pkamb
13
FYI XCode 9 sekarang menyebut ini "Tetap", bukan "Eksplisit".
Mel
Juga di Xcode 9, hapus centang "Gunakan Panduan Tata Letak Area Aman" di File inspector, yang saat ini masih menyebabkan banyak masalah di IB, dan tetap menggunakan panduan Tata Letak normal untuk kendala Anda.
PJ_Finnegan
16

Apa yang berhasil bagi saya adalah menambahkan ke tampilan tumpukan UIView lain yang hanya spacer (bekerja setidaknya dengan stackView.distribution = .Fill):

let spacerView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
stackView.addArrangedSubview(spacerView)
stackView.addArrangedSubview(viewThatNeedsSpaceBeforeIt)
stackView.addArrangedSubview(NextView)...
dorsz
sumber
6

swift 3: Anda hanya perlu mengatur offset dengan:

firstView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 200).isActive = true

Pastikan batasan ini ditetapkan setelah Anda parentView.addArrangdSubView(firstView)

William Hu
sumber
4

Jika Anda hanya membutuhkan padding terdepan, maka Anda dapat mengatur Alignment tampilan tumpukan ke "Trailing" dan kemudian Anda akan bebas menentukan Batasan utama yang unik pada setiap subview yang ada di dalamnya.

Sebagai bonus, Anda juga dapat mengatur kesejajaran tampilan tumpukan ke "Tengah" dan kemudian Anda dapat menggunakan Batasan Utama dan / atau Trailing untuk memberikan padding tersendiri pada setiap item di kedua sisi.

Jonathan Parham
sumber
1

Pertanyaan ini sudah memiliki jawaban yang bagus, Satu saran, gunakan spacingproperti untuk mengatur jarak antar tampilan. Untuk tampilan pertama dan terakhir, mungkin ada dua opsi, baik setel insets sebagai @tolpp disarankan atau tambahkan batasan yang melekat pada induk (stackview) dengan konstanta untuk menambahkan pengisi.

infiniteLoop
sumber
1

Solusinya adalah memiliki tampilan reguler dalam tampilan tumpukan untuk menampung tampilan apa pun yang ingin Anda tambahkan batasan, lalu Anda dapat menambahkan batasan untuk item Anda yang relatif terhadap tampilan dalam tampilan tumpukan. Dengan begitu, tampilan asli Anda dapat memiliki batasan awal dan akhir dalam tampilan tumpukan.

Ini dapat dilakukan di pembuat antarmuka dan secara terprogram.

Aiden Dixon
sumber
0

Apa yang kami lakukan adalah menambahkan komponen transparan (mis., UIButton / UIView) sebagai turunan pertama dan terakhir dari UIStackView. Kemudian atur membatasi lebar anak-anak yang tidak terlihat ini untuk menyesuaikan bantalan.

Crashalot
sumber
-3

Tampaknya solusinya cukup sederhana. Dari pada:

stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor).active = true

Saya baru saja menulis:

stackView.leadingAnchor.constraintEqualToAnchor(selectedContactsScrollView.leadingAnchor, constant: 15).active = true
Adrian
sumber
1
Sebenarnya kode Anda menambahkan sebuah leading untuk uistackview di dalam urscrollview, itu tidak menambahkan padding untuk pandangan Anda di dalam uistackview Anda, (seperti yang dinyatakan oleh pertanyaan)
William Kinaan
ya, tapi saya tidak tahu apakah Anda bisa menambahkan bantalan, jadi ini akan berhasil untuk saya.
Adrian
Sebagai pemikiran pertama, Anda dapat uistackview lain di dalam uistackview asli Anda dan memberikan padding padanya. kemudian tambahkan pandangan Anda ke uistackview baru ini (Anda dapat melakukannya sepenuhnya dengan pembuat antarmuka, tidak perlu menulis kode untuk itu)
William Kinaan
Ya, itu akan berhasil. Anda dapat menambahkan sebagai jawaban dan saya akan menerimanya.
Adrian