Bagaimana cara menambahkan jarak antara UITableViewCell


182

Apakah ada cara untuk menambahkan spasi antara UITableViewCell?

Saya telah membuat tabel dan setiap sel hanya berisi gambar. Gambar ditugaskan ke sel seperti ini:

cell.imageView.image = [myImages objectAtIndex:indexPath.row];

tetapi ini membuat gambar diperbesar dan masuk ke dalam seluruh sel, dan tidak ada jarak antar gambar.

Atau katakanlah dengan cara ini, ketinggian gambar adalah misalnya 50, dan saya ingin menambahkan 20 spasi di antara gambar. Apakah ada cara untuk mencapai ini?


1
Untuk Swift 2.2 lihat jawaban saya di sini: stackoverflow.com/a/37673417/2696626
ibrahimyilmaz

Jawaban:


160

Versi Swift

Diperbarui untuk Swift 3

Jawaban ini agak lebih umum daripada pertanyaan asli demi pemirsa di masa depan. Ini adalah contoh tambahan untuk contoh UITableView dasar untuk Swift .

masukkan deskripsi gambar di sini

Gambaran

Ide dasarnya adalah membuat bagian baru (bukan baris baru) untuk setiap item array. Bagian kemudian dapat spasi menggunakan tinggi bagian header.

Bagaimana cara melakukannya

  • Siapkan proyek Anda seperti yang dijelaskan dalam contoh UITableView untuk Swift . (Yaitu, tambahkan UITableViewdan sambungkan tableViewoutlet ke View Controller).

  • Di Interface Builder, ubah warna latar belakang tampilan utama menjadi biru muda dan UITableViewwarna latar belakang menjadi jelas.

  • Ganti kode ViewController.swift dengan yang berikut ini.

LihatController.swift

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    let cellReuseIdentifier = "cell"
    let cellSpacingHeight: CGFloat = 5
    
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // These tasks can also be done in IB if you prefer.
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // MARK: - Table View delegate methods
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.animals.count
    }
    
    // There is just one row in every section
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return cellSpacingHeight
    }
    
    // Make the background color show through
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        headerView.backgroundColor = UIColor.clear
        return headerView
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // note that indexPath.section is used rather than indexPath.row
        cell.textLabel?.text = self.animals[indexPath.section]
        
        // add border and color
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.layer.cornerRadius = 8
        cell.clipsToBounds = true
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // note that indexPath.section is used rather than indexPath.row
        print("You tapped cell number \(indexPath.section).")
    }
}

Catatan yang indexPath.sectiondigunakan daripada indexPath.rowuntuk mendapatkan nilai yang tepat untuk elemen array dan ketuk posisi.

Bagaimana Anda mendapatkan bantalan / ruang ekstra di kanan dan kiri?

Saya mendapatkannya dengan cara yang sama Anda menambahkan spasi ke tampilan apa pun. Saya menggunakan batasan tata letak otomatis. Cukup gunakan alat pin di Interface Builder untuk menambahkan spasi untuk kendala terkemuka dan tertinggal.


Hai, saya bertanya-tanya apakah ini mungkin tanpa mengubah semua baris Anda ke bagian. Saya memiliki batas pada setiap tableViewCell, jadi menambah ketinggian tidak akan membantu. Saya memiliki banyak penyesuaian dengan sel saya, dan saya tidak ingin mengubahnya menjadi bagian. Terima kasih!
Ujjwal-Nadhani

3
@ user2901306, saya ragu-ragu untuk menggunakan metode ini pada awalnya, juga, karena rasanya saya harus bisa menggunakan baris dan meningkatkan margin atau sesuatu. Namun, saya tidak menemukan cara untuk melakukannya dan metode ini cukup berhasil. Anda tidak perlu mengubah kustomisasi di sel Anda. Anda pada dasarnya hanya perlu menambahkan numberOfSectionsInTableViewdan return 1untuk jumlah baris. Kemudian gunakan indexPath.sectionuntuk mendapatkan indeks sel saat ini. Coba sekali. Saya pikir Anda akan menemukan bahwa Anda tidak perlu melakukan banyak perubahan pada pengaturan Anda saat ini. Ini jelas lebih mudah daripada subclassing.
Suragch

Menggunakan cell.layer.xxx di cellForRow dapat memberi Anda hit kinerja. Lebih baik mengatur nilai-nilai ini dalam XIB
Abhishek Bedi

@AbhishekBedi, saya selalu menemukan layermanipulasi cukup cepat. Apakah Anda mengatakan ini karena Anda melihat ada peningkatan kinerja, atau sebagai praktik umum yang baik? Bahkan jika Anda mengaturnya dalam XIB, mereka masih harus diatur ketika sel dibuat.
Suragch

1
@FateNuller, saya tidak setuju dengan Anda. Jawaban Husam terlihat cukup bagus.
Suragch

150

Solusi mudah saya menggunakan Swift :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}

Hasil masukkan deskripsi gambar di sini


11
Solusi bagus Jika ada yang punya masalah, saya harus menelepon super.layoutSubviews()dulu untuk memastikan seluruh tampilan ditata dengan baik sebelum mengatur bingkainya.
ruttopia

@ Husam Solusi Anda bekerja untuk saya. Tapi saya punya masalah ketika sel dipilih. Saya telah menetapkan batas untuk contentView dan setiap kali saya memilih sel, batasnya akan lebih kecil. Bagaimana saya bisa memperbaikinya?
Bad_Developer

@SonHoang Anda mungkin harus mengesampingkan didSetuntuk selectedvariabel dan panggilan layoutSubviews()dalam!
Husam

1
Hei, Husam. Terima kasih atas solusi hebatnya. Jangan beri tahu saya cara mengubah warna konten yang ditambahkan di antara sel?
A.Kant

1
Ini adalah solusi yang jauh lebih baik daripada jawaban yang diterima. Jawaban yang diterima sangat dekat dengan 100 baris kode dan ini hanya satu. Luar biasa.
YungGun

135

Cara saya mencapai menambahkan spasi antar sel adalah dengan membuat numberOfSections = "Jumlah array Anda" dan membuat setiap bagian hanya berisi satu baris. Lalu tentukan headerView dan tingginya.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return yourArry.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return cellSpacingHeight;
}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    [v setBackgroundColor:[UIColor clearColor]];
    return v;
}

22
Ini sangat bagus. Saya harus mengubah sedikit cellForRowAtIndexPath, bukan array normal [indexPath.row] tetapi array [indexPath.section]. Kalau tidak, ia akan menampilkan item pertama dari array di semua bagian.
Tom Spee

@ TomSpee - Bagaimana Anda mengatasi masalah itu di cellForRowAtIndexPath?

5
@TKutal - Sama seperti kode normal di cellForRowAtIndexPath tetapi ubah indexPath.row menjadi indexPath.section
Tom Spee

Meskipun ini memenuhi apa yang diinginkan penanya, saya tidak percaya bahwa Apple akan merekomendasikan pendekatan ini. Koreksi saya jika saya salah, tetapi saya yakin "bagian" dimaksudkan untuk secara logis memisahkan "bagian" dari data yang Anda wakili dalam tabel Anda. Anda seharusnya tidak menggunakan "bagian" untuk menata ruang di antara setiap sel data yang seharusnya semua ditampilkan dalam satu bagian. Saya pikir pendekatan yang lebih baik, meskipun lebih sulit, akan menjadi subkelas UITableViewCell, dan mensimulasikan pemisah tampilan tabel dengan menambahkan tampilan ke bagian bawah sel.
FateNuller

2
Maka Apple seharusnya tidak mengeluh tetapi membuat metode yang nyaman untuk memvariasikan ruang antar baris.
Arnie Schwarzvogel

44

Saya perlu melakukan konsep yang sama agar UITableCells memiliki "ruang" di antara mereka. Karena Anda tidak bisa menambahkan ruang antar sel, Anda dapat memalsukannya dengan memanipulasi ketinggian sel UITableView dan kemudian menambahkan UIView ke contentView sel Anda. Berikut ini adalah cuplikan layar dari prototipe yang saya lakukan di proyek pengujian lain ketika saya mensimulasikan ini:

Jarak antara UITableViewCells

Berikut ini beberapa kode (Catatan: ada banyak nilai yang dikodekan untuk tujuan demonstrasi)

Pertama, saya perlu mengatur heightForRowAtIndexPathuntuk memungkinkan ketinggian yang berbeda pada UITableViewCell.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    NSString *text = [self.newsArray  objectAtIndex:[indexPath row]];
    if ([text isEqual:@"December 2012"])
    {
        return 25.0;
    }

    return 80.0;
}

Selanjutnya, saya ingin memanipulasi tampilan dan nuansa UITableViewCells jadi saya melakukannya dalam willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathmetode.

- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.IsMonth)
    {
        UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
        av.backgroundColor = [UIColor clearColor];
        av.opaque = NO;
        av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
        UILabel *monthTextLabel = [[UILabel alloc] init];
        CGFloat font = 11.0f;
        monthTextLabel.font = [BVFont HelveticaNeue:&font];

        cell.backgroundView = av;
        cell.textLabel.font = [BVFont HelveticaNeue:&font];
        cell.textLabel.textColor = [BVFont WebGrey];
    }


    if (indexPath.row != 0)
    {
        cell.contentView.backgroundColor = [UIColor clearColor];
        UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
        whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
        whiteRoundedCornerView.layer.masksToBounds = NO;
        whiteRoundedCornerView.layer.cornerRadius = 3.0;
        whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
        whiteRoundedCornerView.layer.shadowOpacity = 0.5;
        [cell.contentView addSubview:whiteRoundedCornerView];
        [cell.contentView sendSubviewToBack:whiteRoundedCornerView];

    }
}

Perhatikan bahwa saya membuat whiteRoundedCornerView tinggi 70.0 saya dan itulah yang menyebabkan ruang simulasi karena tinggi sel sebenarnya 80.0 tetapi contentView saya 70.0 yang memberikan tampilan.

Mungkin ada cara lain untuk mencapai ini lebih baik, tetapi hanya bagaimana saya menemukan cara melakukannya. Saya harap ini bisa membantu orang lain.


Hanya FYI, untuk jumlah sel yang sangat besar, Anda ingin mengatur tampilan konten di dalam subkelas sel alih-alih willDisplayCell. Kinerja mulai menerima pukulan besar dengan cara ini semakin banyak sel yang Anda tambahkan ke antrian
BBH1023

@ BBH1023 Lapisan bayangan berlipat ganda setiap kali tampilan muncul saat menavigasi bolak-balik untuk melihat dengan cepat. Bagaimana Anda menyarankan untuk membatalkan itu jika sudah diterapkan sekali
soulshined

untuk privent untuk menambahkan lebih banyak bayangan lakukan ini: NSInteger tag = 120; if (indexPath.row! = 0) {if (cell.tag! = 120) {cell.contentView.backgroundColor = [UIColor clearColor]; ... [cell.contentView sendSubviewToBack: whiteRoundedCornerView]; cell.tag = tag; }}
user3001228

24

Anda harus mengatur bingkai ke gambar Anda. Kode yang belum diuji adalah

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);

2
Baru saja diuji dengan backgroundView dan ini adalah solusi kerja paling sederhana
Sam

2
Pastikan Anda memanggil kode ini layoutSubviewsjika Anda UITableViewCell
mensubclassing

30
@ NicoHämäläinen Baiklah, saya telah mengembangkan lebih dari 20 aplikasi selama tiga tahun terakhir, dan saya SELALU subkelas UITableViewCelluntuk mendapatkan hasil yang saya butuhkan :) ... Subklas UITableViewCellsangat umum.
Mazyod

1
@ NicoHämäläinen tidak ada yang salah dengan subkelas UITableViewCell. Saat Anda membuat kustom UITableViewCellsAnda harus subklas UITableViewCell.
Popeye

1
@ NicoHämäläinen Anda harus memperbarui komentar Anda. Orang-orang cenderung untuk mengambil informasi dan tidak membaca lebih lanjut. Karena situs ini adalah sumber yang bagus dan pengembang cenderung mempercayai fakta yang mereka lihat di sini, maka itu bisa menyesatkan mereka untuk memikirkan hal-hal buruk .. hanya dua koin saya. Mungkin saya punya histeria
chrs

11

Saya berada di kapal yang sama. Pada awalnya saya mencoba beralih ke bagian, tetapi dalam kasus saya itu berakhir lebih dari sakit kepala daripada yang saya pikir, jadi saya sudah mencari alternatif. Untuk tetap menggunakan baris (dan tidak mengacaukan bagaimana Anda mengakses data model Anda), inilah yang bekerja untuk saya hanya dengan menggunakan mask :

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

Yang harus Anda lakukan adalah membuat tinggi sel lebih besar dengan nilai yang sama seperti yang Anda inginkan verticalPadding, dan kemudian memodifikasi tata letak bagian dalam Anda sehingga setiap tampilan yang memiliki jarak ke tepi sel memiliki jarak yang sama meningkat verticalPadding/2. Kelemahan minor: Anda mendapatkan verticalPadding/2bantalan di bagian atas dan bawah tableView, tetapi Anda dapat dengan cepat memperbaiki ini dengan mengatur tableView.contentInset.bottom = -verticalPadding/2dan tableView.contentInset.top = -verticalPadding/2. Semoga ini bisa membantu seseorang!


1
Bekerja di Swift 5 juga.
LondonGuy

1
Jawaban Terbaik!! Terima kasih. Jika menggunakan sel khusus, maka ini berfungsi di "override func awakeFromNib ()"
trees_are_great

10

Saya pikir solusi yang paling lurus jika Anda hanya mencari sedikit ruang dan mungkin paling murah adalah dengan hanya mengatur warna batas sel ke warna latar belakang tabel Anda kemudian mengatur lebar perbatasan untuk mendapatkan hasil yang diinginkan!

    cell.layer.borderColor = blueColor.CGColor
    cell.layer.borderWidth = 3

1
Bukan ide yang bagus untuk latar belakang transparan. Kalau tidak, itu bisa berhasil.
ergunkocak

1
Ini benar. Bukan solusi untuk semua kasus tetapi ini akan berhasil untuk beberapa kasus! @ergunkocak
Craig

8

Jika Anda belum menggunakan header bagian (atau footer), Anda bisa menggunakannya untuk menambahkan spasi sewenang-wenang ke sel tabel. Alih-alih memiliki satu bagian dengan n baris, buat tabel dengan n bagian dengan masing-masing satu baris.

Terapkan tableView:heightForHeaderInSection:metode untuk mengontrol spasi.

Anda mungkin juga ingin menerapkan tableView:viewForHeaderInSection:untuk mengontrol seperti apa spacing itu.


8

Saya menyelesaikannya seperti ini di Swift 4.

Saya membuat ekstensi UITableViewCell dan memasukkan kode ini:

override open var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 10
        frame.origin.x += 10
        frame.size.height -= 15
        frame.size.width -= 2 * 10
        super.frame = frame
    }
}

override open func awakeFromNib() {
    super.awakeFromNib()
    layer.cornerRadius = 15
    layer.masksToBounds = false
}

Saya harap ini membantu Anda.


teks dalam sel dipotong.
Mehdico

override CGRect berfungsi, dan saya tidak menambahkan awakeFromNib.
Eric Tan

5

Contoh dalam cepat 3 ..

masukkan deskripsi gambar di sini

  1. Buat satu tampilan aplikasi
  2. tambahkan tableview di view controller
  3. tambahkan customcell untuk sel tablview
  4. lihat kode pengontrol di bawah ini seperti

       class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
       @IBOutlet weak var tableView: UITableView!
    
    
        var arraytable = [[String:Any]]()
         override func viewDidLoad() {
         super.viewDidLoad()
    
         arraytable = [
         ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"],
         ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"]
    ]
    
    
    
    
    
    
       tableView.delegate = self
       tableView.dataSource = self
    
       //For Auto Resize Table View Cell;
      tableView.estimatedRowHeight = 44
       tableView.rowHeight = UITableViewAutomaticDimension
    
       //Detault Background clear
       tableView.backgroundColor = UIColor.clear
    }

    func numberOfSections (dalam tableView: UITableView) -> Int {return arraytable.count}

       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 1
     }
    
    // Set the spacing between sections
     func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10
    }
    
    // Make the background color show through
      func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    headerView.backgroundColor = UIColor.clear
    
    return headerView
    }
    
         func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
         let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell
    
         cell.tv_title.text = arraytable[indexPath.section]["title"] as! String?
        cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String?
    
       //label height dynamically increase
       cell.tv_details.numberOfLines = 0
    
    
    
    
       //For bottom border to tv_title;
       let frame =  cell.tv_title.frame
        let bottomLayer = CALayer()
       bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
        bottomLayer.backgroundColor = UIColor.black.cgColor
       cell.tv_title.layer.addSublayer(bottomLayer)
    
      //borderColor,borderWidth, cornerRadius
      cell.backgroundColor = UIColor.lightGray
      cell.layer.borderColor = UIColor.red.cgColor
      cell.layer.borderWidth = 1
      cell.layer.cornerRadius = 8
      cell.clipsToBounds = true
    
      return cell
      }
    
       }
  5. Unduh sumber lengkap ke tautan Github:

    https://github.com/enamul95/CustomSectionTable


itu menggandakan jawaban lain yang @Suragch telah dijawab sebelumnya untuk versi cepat, tolong jangan membuat duplikasi
Amr Angry

1
ini bukan solusi yang baik. Jika Anda memerlukan bagian tajuk dengan judul ini tidak akan berfungsi
kuzdu

4

Tiga pendekatan yang dapat saya pikirkan:

  1. Buat sel tabel kustom yang menjabarkan seluruh sel dengan cara yang Anda inginkan

  2. Alih-alih menambahkan gambar ke tampilan gambar, hapus subview tampilan gambar, buat tampilan kustom yang menambahkan UIImageView untuk gambar dan tampilan lain, mungkin UIView sederhana yang menyediakan jarak yang diinginkan, dan menambahkannya sebagai subview dari tampilan gambar.

  3. Saya ingin menyarankan agar Anda memanipulasi UIImageView secara langsung untuk menetapkan ukuran / padding yang tetap, tetapi saya tidak berada di dekat Xcode jadi saya tidak dapat mengonfirmasi apakah / bagaimana ini akan bekerja.

Apakah itu masuk akal?


4

Ya, Anda dapat menambah atau mengurangi jarak (bantalan) antara dua sel dengan membuat satu tampilan dasar pada tampilan konten dalam sel. Mengatur warna yang jelas untuk latar belakang tampilan konten dan Anda dapat menyesuaikan ketinggian tampilan dasar untuk membuat ruang antar sel.


4

Berdasarkan jawaban Husam: Menggunakan lapisan sel alih-alih tampilan konten memungkinkan untuk menambahkan batas di seluruh sel dan aksesori jika perlu. Metode ini membutuhkan penyesuaian hati-hati dari batasan dasar sel serta inset-inset tersebut jika tidak, tampilan tidak akan sesuai.

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

    CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
    self.layer.frame = newFrame;
}

@end

3

Ubah jumlah baris di bagian menjadi 1 Anda telah mengubah jumlah bagian alih-alih jumlah baris

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

Di sini Anda menempatkan spasi di antara baris

 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

2

Saya pikir ini adalah solusi terbersih:

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

1
Saya tidak bisa melihat perubahan visual setelah menerapkan layoutMarginscara ini. Mungkin karena saya menggunakan autolayout.
Cœur

Margin tidak akan "memecah" ketinggian eksplisit untuk sel, jadi Anda harus memiliki tinggi otomatis agar sel ini berfungsi
Aviel Gross

1
Saya memiliki ketinggian otomatis.
Cœur

2

Artikel ini membantu, cukup banyak apa yang dikatakan jawaban lain tetapi merangkum dan ringkas

https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6

Di dalamnya, ia hanya menerapkannya ke sisi kiri dan kanan tetapi UIEdgeInsetsMakeinit memungkinkan untuk menambahkan padding ke keempat titik.

func UIEdgeInsetsMake (_ atas: CGFloat, _ kiri: CGFloat, _ bawah: CGFloat, _ kanan: CGFloat) -> UIEdgeInsets

Deskripsi
Membuat inset tepi untuk tombol atau tampilan. Inset adalah margin di sekitar persegi panjang. Nilai positif mewakili margin lebih dekat ke pusat persegi panjang, sedangkan nilai negatif mewakili margin lebih jauh dari pusat.

Parameter
atas: Inset di bagian atas objek.
kiri: Inset di sebelah kiri objek
bawah: Inset di bagian bawah objek.
kanan: Inset di sebelah kanan objek.

Mengembalikan
inset untuk tombol atau tampilan

Perhatikan bahwa UIEdgeInsets juga dapat digunakan untuk mencapai hal yang sama.

Xcode 9.3 / Swift 4


Jawaban ini salah mengatakan bahwa kode Swift 4 kompatibel, tetapi UIEdgeInsetsMake telah ditinggalkan. UIEdgeInsets harus digunakan sebagai gantinya.
José

developer.apple.com/documentation/uikit/… di mana tepatnya dikatakan telah ditinggalkan? Saya menggunakan ini dalam proyek saya dan saya sedang bekerja dengan Xcode terbaru, oleh karena itu Swift 9.3 @ José
Mauricio Chirino

Kamu benar, maaf, salahku. UIEdgeInsets lebih disukai, tetapi itu tidak berarti yang lain sudah usang. SwiftLint akan mengeluh tentang legacy constructor saat menggunakan UIEdgeInsetsMake.
José

1
OK mengerti. Silakan hapus downvote jika Anda adalah orang yang memberikan tolong, saya tidak pernah mengatakan jawaban saya adalah satu-satunya yang mungkin.
Mauricio Chirino

Dikatakan bahwa saya tidak dapat mengubah suara saya kecuali Anda mengubah jawaban Anda. Bisakah Anda sedikit mengubah kata-katanya?
José

2

Tidak perlu menggunakan banyak bagian berbeda. Jawaban lain menggunakan bingkai insets dan CGRect dan layer dan ... BLAH. Tidak baik; gunakan tata letak otomatis dan UITableViewCell kustom. Dalam UITableViewCell itu, alih-alih sub melihat konten Anda di dalam contentView, buat containerView baru (a UIView), tinjau tampilan kontainer di dalam contentView, lalu tinjau semua pandangan Anda di dalam tampilan wadah.

Untuk membuat spasi sekarang, cukup edit margin tata letak tampilan kontainer, seperti:

class CustomTableViewCell: UITableViewCell {
    let containerView = UIView()
    let imageView = UIImageView()

    required init?(coder aDecoder: NSCoder) {super.init(coder: aDecoder)}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        containerView.translatesAutoResizingMaskIntoConstraints = false
        imageView.translatesAutoResizingMaskIntoConstraints = false
        contentView.addSubview(containerView)
        containerView.addSubview(imageView)

        contentView.layoutMargins = UIEdgeInsets(top: 15, left: 3, bottom: 15, right: 3)
        containerView.layoutMargins = UIEdgeInsets(top: 15, left: 17, bottom: 15, right: 17) // It isn't really necessary unless you've got an extremely complex table view cell. Otherwise, you could just write e.g. containerView.topAnchor

        let cg = contentView.layoutMarginsGuide
        let lg = containerView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: cg.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: cg.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: cg.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: cg.bottomAnchor),
            imageView.topAnchor.constraint(equalTo: lg.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: lg.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: lg.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: lg.bottomAnchor)
        ])
    }
}


1

Situasi saya adalah saya menggunakan UIView kustom untuk viewForHeader di bagian juga heightForHeader di bagian mengembalikan ketinggian konstan katakanlah 40, masalah adalah ketika tidak ada data semua tampilan header disentuh satu sama lain. jadi saya ingin spasi antara bagian dalam ketiadaan data jadi saya memperbaikinya dengan hanya mengubah "gaya tampilan tabel" pesawat ke "Grup". Dan itu berhasil untuk saya.


1

Lihat solusi saya di GitHub dengan subkelas UITableViewdan menggunakan fitur runtime Objective-C.
Ini pada dasarnya menggunakan struktur data pribadi Apple UITableViewRowDatayang saya cari tajuk runtime pribadi UITableView:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h ,

dan inilah kelas privat yang diinginkan yang berisi semua yang Anda butuhkan untuk mengatur tata ruang sel Anda seperti yang Anda inginkan tanpa mengaturnya di kelas sel:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h


1

Saya mengalami kesulitan membuat ini bekerja bersama warna latar belakang dan tampilan aksesori di sel. Akhirnya harus:

1) Tetapkan properti tampilan latar belakang sel dengan set UIView dengan warna latar belakang.

let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view

2) Posisikan ulang tampilan ini di layoutSubviews untuk menambahkan ide spasi

override func layoutSubviews() {
    super.layoutSubviews()
    backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}

1

Menggunakan header sebagai spasi akan bekerja dengan baik, saya kira jika Anda tidak ingin menggunakan header. Kalau tidak, mungkin bukan ide terbaik. Yang saya pikirkan adalah membuat tampilan sel khusus.

Contoh:

Di sel khusus, buat tampilan latar belakang dengan kendala sehingga tidak memenuhi seluruh sel, berikan padding.

Kemudian, buat latar belakang tampilan tabel tidak terlihat dan hapus pemisah:

// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear

// Remove the separators
tableview.separatorStyle = .none

1

Jika Anda tidak ingin mengubah bagian dan nomor baris dari tampilan tabel Anda (seperti yang saya lakukan), inilah yang Anda lakukan:

1) Tambahkan ImageView ke bagian bawah tampilan sel tabel Anda.

2) Jadikan warna yang sama dengan warna latar belakang tampilan tabel.

Saya sudah melakukan ini di aplikasi saya dan berfungsi dengan baik. Bersulang! : D


0

masukkan deskripsi gambar di siniSWift-5, Spasi Antar UITableViewCell

    1. use sections instead of rows
    2. each section should return one row
    3. assign your cell data like this e.g [indexPath.section], instead of row
    4. use UITableView Method "heightForHeader" and return your desired spacing
    5. Do rest things as you were doing it

    Thanks!

0

Anda cukup menggunakan kendala dalam kode seperti ini:

class viewCell : UITableViewCell 
{

@IBOutlet weak var container: UIView!



func setShape() {
    self.container.backgroundColor = .blue
    self.container.layer.cornerRadius = 20
    container.translatesAutoresizingMaskIntoConstraints = false
    self.container.widthAnchor.constraint(equalTo:contentView.widthAnchor , constant: -40).isActive = true
           self.container.heightAnchor.constraint(equalTo: contentView.heightAnchor,constant: -20).isActive = true
           self.container.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
           self.container.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

    }
}

penting untuk menambahkan subview (wadah) dan memasukkan elemen lain di dalamnya.



-2

Solusi Swift 5.0

Di dalam subkelas UITableViewCell

override func layoutSubviews() {
    super.layoutSubviews()
    let padding = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    bounds = UIEdgeInsetsInsetRect(bounds, padding)
}

-4

Gunakan UITableViewDelegate, heightForRowAtIndexPathdan kembalikan ketinggian baris.

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}

Pertanyaannya adalah bagaimana cara menambahkan jarak antar sel daripada tinggi sel
shippo7
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.