วิธีเพิ่มระยะห่างระหว่าง UITableViewCell


182

มีวิธีใดที่จะเพิ่มระยะห่างระหว่างกันUITableViewCellหรือไม่

ฉันสร้างตารางและแต่ละเซลล์มีรูปภาพเท่านั้น ภาพที่ได้รับมอบหมายให้เซลล์เช่นนี้:

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

แต่สิ่งนี้ทำให้ภาพขยายและพอดีกับทั้งเซลล์และไม่มีระยะห่างระหว่างภาพ

หรือให้พูดด้วยวิธีนี้ความสูงของภาพเช่น 50 และฉันต้องการเพิ่มระยะห่างระหว่างภาพ 20 ภาพ มีวิธีใดบ้างที่จะทำให้สิ่งนี้สำเร็จ?


1
สำหรับSwift 2.2ดูคำตอบของฉันที่นี่: stackoverflow.com/a/37673417/2696626
ibrahimyilmaz

คำตอบ:


160

สวิฟท์รุ่น

อัปเดตสำหรับ Swift 3

คำตอบนี้ค่อนข้างกว้างกว่าคำถามเดิมเพื่อประโยชน์ของผู้ชมในอนาคต มันเป็นตัวอย่างที่เสริมเพื่อพื้นฐานเช่น UITableView สำหรับสวิฟท์

ป้อนคำอธิบายรูปภาพที่นี่

ภาพรวม

แนวคิดพื้นฐานคือการสร้างส่วนใหม่ (แทนที่จะเป็นแถวใหม่) สำหรับแต่ละรายการในแถวลำดับ ส่วนนั้นจะสามารถเว้นระยะความสูงโดยใช้ส่วนหัวส่วน

ทำอย่างไร

  • ตั้งค่าโครงการของคุณตามที่อธิบายในUITableView ตัวอย่างสำหรับสวิฟท์ (นั่นคือเพิ่ม a UITableViewและต่อtableViewเต้าเสียบเข้ากับ View Controller)

  • ในเครื่องมือสร้างส่วนติดต่อเปลี่ยนสีพื้นหลังของมุมมองหลักเป็นสีฟ้าอ่อนและUITableViewสีพื้นหลังเพื่อล้าง

  • แทนที่รหัส ViewController.swift ด้วยสิ่งต่อไปนี้

ViewController.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).")
    }
}

โปรดทราบว่าindexPath.sectionมีการใช้งานมากกว่าindexPath.rowเพื่อให้ได้ค่าที่เหมาะสมสำหรับองค์ประกอบอาร์เรย์และตำแหน่งการแตะ

คุณไม่ได้รับเพิ่ม padding / พื้นที่บนด้านขวาและซ้ายได้อย่างไร?

ผมได้รับมันเช่นเดียวกับคุณเพิ่มระยะห่างไปที่มุมมองใด ๆ ฉันใช้ข้อ จำกัด เลย์เอาต์อัตโนมัติ เพียงใช้เครื่องมือพินในเครื่องมือสร้างส่วนติดต่อเพื่อเพิ่มระยะห่างสำหรับข้อ จำกัด ที่นำหน้าและต่อท้าย


สวัสดีฉันสงสัยว่าสิ่งนี้เป็นไปได้หรือไม่โดยไม่ต้องแปลงแถวทั้งหมดเป็นส่วน ฉันมีเส้นขอบบนทุก tableViewCell ดังนั้นการเพิ่มความสูงจะไม่ช่วยได้ ฉันมีการปรับแต่งมากมายกับเซลล์ของฉันและฉันไม่ต้องการแปลงเป็นส่วนต่างๆ ขอบคุณ!
Ujjwal-Nadhani

3
@ user2901306 ฉันลังเลที่จะใช้วิธีนี้ตั้งแต่แรกเพราะฉันรู้สึกว่าฉันควรจะสามารถใช้แถวและเพิ่มระยะขอบหรืออะไรก็ได้ อย่างไรก็ตามฉันไม่พบวิธีที่จะทำและวิธีนี้ใช้ได้ค่อนข้างดี คุณไม่ต้องเปลี่ยนการปรับแต่งในเซลล์ของคุณ โดยทั่วไปคุณจะต้องเพิ่มnumberOfSectionsInTableViewและreturn 1สำหรับจำนวนแถวเท่านั้น จากนั้นใช้indexPath.sectionเพื่อรับดัชนีเซลล์ปัจจุบัน ลองอีกครั้ง ฉันคิดว่าคุณจะค้นพบว่าคุณไม่จำเป็นต้องทำการเปลี่ยนแปลงมากมายกับการตั้งค่าปัจจุบันของคุณ นี้แน่นอนง่ายกว่า subclassing
Suragch

การใช้ cell.layer.xxx ใน cellForRow สามารถทำให้คุณได้รับประสิทธิภาพ ตั้งค่าเหล่านี้ได้ดีขึ้นใน XIB
Abhishek Bedi

@AbhishekBedi ฉันพบว่ากิจวัตรlayerจะค่อนข้างเร็ว คุณกำลังพูดอย่างนี้หรือไม่เพราะคุณสังเกตเห็นการแสดงที่ฮิตหรือเป็นแนวปฏิบัติทั่วไป แม้ว่าคุณจะตั้งค่าไว้ใน XIB พวกเขายังคงต้องตั้งค่าเมื่อสร้างเซลล์
Suragch

1
@ FateNuller ฉันไม่เห็นด้วยกับคุณ คำตอบของ Husamดูดีมาก
Suragch

150

โซลูชันง่าย ๆ ของฉันเมื่อใช้Swift :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

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

ผลลัพธ์ ป้อนคำอธิบายรูปภาพที่นี่


11
ทางออกที่ดี ในกรณีที่ใครมีปัญหาฉันต้องโทรsuper.layoutSubviews()ก่อนเพื่อให้แน่ใจว่ามุมมองทั้งหมดถูกจัดวางอย่างเหมาะสมก่อนที่จะตั้งเฟรม
ruttopia

@Husam โซลูชันของคุณใช้งานได้สำหรับฉัน แต่ฉันมีปัญหาเมื่อเลือกเซลล์ ฉันได้ตั้งค่าขอบสำหรับ contentView และเมื่อใดก็ตามที่ฉันเลือกเซลล์เส้นขอบจะมีขนาดเล็กลง ฉันจะแก้ไขได้อย่างไร
Bad_Developer

@SonHoang คุณอาจจะต้องแทนที่didSetสำหรับselectedตัวแปรและโทรlayoutSubviews()ภายใน!
Husam

1
เฮ้ Husam ขอบคุณสำหรับทางออกที่ดี อย่าบอกวิธีเปลี่ยนสีของเนื้อหาที่เพิ่มระหว่างเซลล์?
A.Kant

1
นี่เป็นทางออกที่ดีกว่าคำตอบที่ได้รับการยอมรับ คำตอบที่ยอมรับนั้นมีโค้ดใกล้ 100 บรรทัดและนี่เป็นเพียงคำตอบเดียว เหลือเชื่อ
YungGun

135

วิธีที่ฉันเพิ่มการเว้นวรรคระหว่างเซลล์คือการทำ numberOfSections = "การนับอาร์เรย์ของคุณ" และทำให้แต่ละส่วนมีเพียงหนึ่งแถวเท่านั้น จากนั้นกำหนด headerView และความสูง

- (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
มันใช้งานได้ดี ฉันต้องเปลี่ยน cellForRowAtIndexPath เล็กน้อยไม่ใช่อาร์เรย์ปกติ [indexPath.row] แต่เป็นอาร์เรย์ [indexPath.section] มิฉะนั้นจะแสดงรายการแรกของอาร์เรย์ในทุกส่วน
Tom Spee

@TomSpee - คุณแก้ไขปัญหาดังกล่าวใน cellForRowAtIndexPath อย่างไร

5
@TKutal - เช่นเดียวกับรหัสปกติใน cellForRowAtIndexPath แต่เปลี่ยน indexPath.row เป็น indexPath.section
Tom Spee

แม้ว่าสิ่งนี้จะบรรลุสิ่งที่ผู้ถามต้องการ แต่ฉันไม่เชื่อว่า Apple จะแนะนำวิธีการนี้ แก้ไขให้ถูกต้องหากฉันผิด แต่ฉันเชื่อว่า "ส่วน" มีไว้สำหรับแยกข้อมูล "ส่วน" ของข้อมูลที่คุณกำลังแสดงในตารางของคุณอย่างมีเหตุผล คุณไม่ควรใช้ "ส่วน" เพื่อจัดรูปแบบช่องว่างระหว่างแต่ละเซลล์ของข้อมูลซึ่งมิฉะนั้นควรแสดงทั้งหมดในส่วนเดียว ฉันคิดว่าวิธีที่ดีกว่าแม้ว่าจะยากกว่าคือไปที่คลาสย่อย UITableViewCell และจำลองตัวแยกมุมมองตารางโดยเพิ่มมุมมองลงที่ด้านล่างของเซลล์
FateNuller

2
จากนั้น Apple ไม่ควรบ่น แต่สร้างวิธีที่สะดวกในการเปลี่ยนช่องว่างระหว่างแถว
Arnie Schwarzvogel

44

ฉันต้องการทำแนวคิดเดียวกันของการมี UITableCells มี "ช่องว่าง" ระหว่างพวกเขา เนื่องจากคุณไม่สามารถเพิ่มช่องว่างระหว่างเซลล์ได้อย่างแท้จริงคุณสามารถปลอมมันด้วยการจัดการความสูงของเซลล์ของ UITableView แล้วเพิ่ม UIView ให้กับ contentView ของเซลล์ของคุณ นี่คือภาพหน้าจอของต้นแบบที่ฉันทำในโครงการทดสอบอื่นเมื่อฉันจำลองสิ่งนี้:

ระยะห่างระหว่าง UITableViewCells

นี่คือโค้ดบางส่วน (หมายเหตุ: มีค่าฮาร์ดโค้ดจำนวนมากสำหรับวัตถุประสงค์ในการสาธิต)

ก่อนอื่นฉันต้องตั้งค่าheightForRowAtIndexPathให้อนุญาตสำหรับความสูงที่แตกต่างกันบน 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;
}

ถัดไปฉันต้องการจัดการรูปลักษณ์ของ UITableViewCells ดังนั้นฉันจึงทำเช่นนั้นในwillDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathวิธีการ

- (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];

    }
}

โปรดทราบว่าฉันได้ทำ whiteRoundedCornerView height 70.0 ของฉันและนั่นคือสิ่งที่ทำให้เกิดพื้นที่จำลองเนื่องจากความสูงของเซลล์เป็นจริง 80.0 แต่ contentView ของฉันคือ 70.0 ซึ่งทำให้ปรากฏ

อาจมีวิธีอื่นในการทำให้สำเร็จดียิ่งขึ้น แต่นี่เป็นเพียงวิธีที่ฉันค้นพบวิธีการทำ ฉันหวังว่ามันจะช่วยคนอื่นได้


เพียงแค่ FYI สำหรับเซลล์จำนวนมากคุณต้องการตั้งค่ามุมมองเนื้อหาภายในเซลล์ย่อยของเซลล์แทน willDisplayCell การแสดงเริ่มที่จะได้รับความนิยมอย่างมากด้วยวิธีนี้ยิ่งมีจำนวนเซลล์ที่คุณเพิ่มเข้าไปในคิว
BBH1023

@ BBH1023 เลเยอร์เงาทวีคูณทุกครั้งที่มีการดูเมื่อนำทางไปมาเพื่อดูอย่างรวดเร็ว คุณจะแนะนำให้ยกเลิกหากมีการใช้งานแล้วครั้งหนึ่ง
Soulshined

เพื่อเป็นการส่วนตัวเพื่อเพิ่มเงาให้ทำดังนี้: 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

คุณจะต้องตั้งค่าเฟรมให้กับรูปภาพของคุณ รหัสไม่ได้ทดสอบคือ

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

2
เพิ่งทดสอบกับ backgroundView และนี่เป็นวิธีการทำงานที่ง่ายที่สุด
Sam

2
เพียงให้แน่ใจว่าคุณเรียกรหัสนี้ในlayoutSubviewsกรณีที่คุณเป็น subclassingUITableViewCell
Mazyod

30
@ NicoHämäläinenเอ่อฉันได้พัฒนาแอพมากกว่า 20 แอพในช่วงสามปีที่ผ่านมาและฉันมักจะทำคลาสย่อยUITableViewCellเพื่อรับผลลัพธ์ที่ฉันต้องการ :) ... การจัดคลาสUITableViewCellเป็นเรื่องธรรมดามาก
Mazyod

1
@ NicoHämäläinenมีอะไรผิดปกติกับ UITableViewCellsubclassing เมื่อคุณกำลังสร้างที่กำหนดเองUITableViewCellsคุณควรจะ UITableViewCellsubclassing
ป๊อปอาย

1
@ NicoHämäläinenคุณควรอัปเดตความคิดเห็นของคุณแล้ว คนมักจะคว้าข้อมูลและไม่อ่านเพิ่มเติม เนื่องจากไซต์นี้เป็นแหล่งข้อมูลที่ดีและนักพัฒนามักจะเชื่อใจในข้อเท็จจริงที่พวกเขาเห็นที่นี่มันอาจทำให้พวกเขาเข้าใจผิดคิดสิ่งเลวร้าย .. แค่เหรียญสองเหรียญของฉัน บางทีฉันอาจมีอาการฮิสทีเรีย
chrs

11

ฉันอยู่ในเรือลำเดียวกัน ตอนแรกฉันพยายามเปลี่ยนไปใช้ส่วนต่างๆ แต่ในกรณีของฉันมันกลายเป็นเรื่องปวดหัวมากกว่าที่ฉันคิดไว้ในตอนแรกดังนั้นฉันจึงกำลังมองหาทางเลือกอื่น ในการใช้แถว (และไม่ยุ่งกับวิธีที่คุณเข้าถึงข้อมูลโมเดลของคุณ) ต่อไปนี้คือสิ่งที่ใช้ได้กับฉันเพียงแค่ใช้มาสก์ :

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
}

ทั้งหมดที่คุณมีเหลือที่จะทำคือการทำให้ความสูงของเซลล์ที่มีขนาดใหญ่โดยค่าเช่นเดียวกับที่คุณต้องการแล้วปรับเปลี่ยนรูปแบบภายในของคุณเพื่อให้มุมมองที่มีระยะห่างกับขอบของเซลล์มีระยะห่างที่เดียวกันเพิ่มขึ้นverticalPadding verticalPadding/2ไมเนอร์ข้อเสีย: คุณจะได้รับverticalPadding/2การขยายทั้งด้านบนและด้านล่างของ tableView แต่คุณได้อย่างรวดเร็วสามารถแก้ไขปัญหานี้โดยการตั้งค่าและtableView.contentInset.bottom = -verticalPadding/2 tableView.contentInset.top = -verticalPadding/2หวังว่านี่จะช่วยใครซักคน!


1
ใช้งานได้ใน Swift 5 ด้วย
LondonGuy

1
คำตอบที่ดีที่สุด !! ขอบคุณ. หากใช้เซลล์ที่กำหนดเองการทำงานใน "แทนที่ func awakeFromNib ()"
trees_are_great

10

ฉันคิดว่าวิธีแก้ปัญหาที่ตรงไปตรงมาที่สุดหากคุณกำลังมองหาที่ว่างเล็ก ๆ น้อย ๆ และอาจมีราคาแพงที่สุดอย่างน้อยก็แค่ตั้งค่าสีเส้นขอบของเซลล์ให้เป็นสีพื้นหลังของตารางแล้วตั้งค่าความกว้างของเส้นขอบ

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

1
ไม่ใช่ความคิดที่ดีสำหรับพื้นหลังโปร่งใส มิฉะนั้นอาจใช้งานได้
ergunkocak

1
นี่เป็นเรื่องจริง ไม่ใช่วิธีแก้ปัญหาสำหรับทุกกรณี แต่มันจะใช้ได้กับบางคน! @ergunkocak
Craig

8

หากคุณไม่ได้ใช้ส่วนหัว (หรือส่วนท้าย) อยู่แล้วคุณสามารถใช้ส่วนหัวเพื่อเพิ่มระยะห่างโดยพลการลงในเซลล์ตาราง แทนที่จะมีหนึ่งส่วนที่มี n แถวให้สร้างตารางที่มีส่วน n กับแถวละหนึ่งแถว

ใช้งาน tableView:heightForHeaderInSection:วิธีการเพื่อควบคุมระยะห่าง

คุณอาจต้องการนำtableView:viewForHeaderInSection:ไปใช้เพื่อควบคุมระยะห่างที่ดูเหมือน


8

ฉันแก้ไขมันด้วยวิธีนี้ใน Swift 4

ฉันสร้างส่วนขยายของ UITableViewCell และรวมรหัสนี้:

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
}

ฉันหวังว่ามันจะช่วยคุณ


ข้อความในเซลล์ถูกครอบตัด
Mehdico

การแทนที่ CGRect ทำงานได้และฉันไม่ได้เพิ่ม awakeFromNib
Eric Tan

5

ตัวอย่างรวดเร็ว 3

ป้อนคำอธิบายรูปภาพที่นี่

  1. สร้างแอปพลิเคชันมุมมองเดียว
  2. เพิ่ม tableview ใน view controller
  3. เพิ่มเซลล์แบบกำหนดเองสำหรับเซลล์ tablview
  4. รหัสควบคุมดูเป็นร้องเหมือน

       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 (ใน 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. ดาวน์โหลดซอร์สเต็มไปยัง Github: link

    https://github.com/enamul95/CustomSectionTable


มันซ้ำคำตอบอื่นที่ @Suragch ได้รับการตอบก่อนสำหรับรุ่นที่รวดเร็วโปรดหลีกเลี่ยงการทำซ้ำ
Amr โกรธ

1
นี่ไม่ใช่ทางออกที่ดี หากคุณต้องการส่วนหัวมีชื่อนี้จะไม่ทำงาน
kuzdu

4

สามวิธีที่ฉันนึกได้:

  1. สร้างตารางเซลล์ที่กำหนดเองที่วางมุมมองของเซลล์ทั้งหมดในลักษณะที่คุณต้องการ

  2. แทนที่จะเพิ่มภาพไปยังมุมมองภาพให้ล้างมุมมองย่อยของมุมมองภาพสร้างมุมมองแบบกำหนดเองที่เพิ่ม UIImageView สำหรับภาพและมุมมองอื่นบางที UIView แบบง่ายที่ให้ระยะห่างที่ต้องการและเพิ่มเป็นมุมมองย่อย มุมมองภาพ

  3. ฉันอยากจะแนะนำให้คุณจัดการ UIImageView โดยตรงเพื่อตั้งค่าขนาด / การแพ็ดคงที่ แต่ฉันไม่มีที่อยู่ใกล้กับ Xcode ดังนั้นฉันจึงไม่สามารถยืนยันได้ว่าจะใช้งานได้หรือไม่

มันสมเหตุสมผลไหม


4

ใช่คุณสามารถเพิ่มหรือลดระยะห่าง (ช่องว่างภายใน) ระหว่างสองเซลล์โดยสร้างมุมมองพื้นฐานหนึ่งมุมมองเนื้อหาในเซลล์ตั้งค่าสีที่ชัดเจนสำหรับพื้นหลังมุมมองเนื้อหาและคุณสามารถปรับความสูงของมุมมองพื้นฐานเพื่อสร้างช่องว่างระหว่างเซลล์


4

ตามคำตอบของ Husam: การใช้เลเยอร์เซลล์แทนการดูเนื้อหาอนุญาตให้เพิ่มเส้นขอบรอบทั้งเซลล์และอุปกรณ์เสริมหากต้องการ วิธีนี้ต้องมีการปรับอย่างระมัดระวังของข้อ จำกัด ด้านล่างของเซลล์เช่นเดียวกับสิ่งที่ใส่เข้าไปมิฉะนั้นมุมมองจะไม่เหมาะสม

@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

เปลี่ยนจำนวนแถวในส่วนเป็น 1 คุณเปลี่ยนจำนวนส่วนแทนจำนวนแถว

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

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

ที่นี่คุณใส่ระยะห่างระหว่างแถว

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

2

ฉันคิดว่านี่เป็นทางออกที่สะอาดที่สุด:

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

1
ฉันไม่เห็นการเปลี่ยนแปลงทางสายตาหลังจากใช้layoutMarginsวิธีนี้ อาจเป็นเพราะฉันกำลังใช้การชำระอัตโนมัติ
Cœur

ระยะขอบจะไม่ "ทำลาย" ความสูงที่ชัดเจนสำหรับเซลล์ดังนั้นคุณต้องมีความสูงอัตโนมัติสำหรับเซลล์นี้เพื่อการทำงาน
Aviel Gross

1
ฉันมีความสูงอัตโนมัติ
Cœur

2

บทความนี้ช่วยได้มันเป็นสิ่งที่คนอื่น ๆ พูด แต่สรุปและกระชับ

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

ในนั้นเขาใช้เฉพาะกับด้านซ้ายและด้านขวา แต่ผู้UIEdgeInsetsMakeเริ่มต้นอนุญาตให้เพิ่มการขยายไปยังทั้งสี่จุด

func UIEdgeInsetsMake (_ top: CGFloat, _ ซ้าย: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> UIEdgeInsets

คำอธิบาย
สร้างส่วนเสริมของขอบสำหรับปุ่มหรือมุมมอง สิ่งที่ใส่เข้าไปคือระยะขอบรอบสี่เหลี่ยม ค่าบวกหมายถึงระยะขอบใกล้กับศูนย์กลางของสี่เหลี่ยมผืนผ้าในขณะที่ค่าลบแสดงระยะขอบเพิ่มเติมจากจุดศูนย์กลาง

พารามิเตอร์
ด้านบน: สิ่งที่ใส่เข้าไปที่ด้านบนของวัตถุ
ซ้าย: สิ่งที่ใส่เข้าไปทางด้านซ้ายของวัตถุ
ด้านล่าง: สิ่งที่ใส่เข้าไปที่ด้านล่างของวัตถุ
right: สิ่งที่ใส่เข้าไปทางด้านขวาของวัตถุ

ผลตอบแทน
สิ่งที่ใส่เข้าไปสำหรับปุ่มหรือมุมมอง

โปรดทราบว่า UIEdgeInsets ยังสามารถใช้เพื่อให้บรรลุเหมือนกัน

Xcode 9.3 / Swift 4


คำตอบนี้ไม่ถูกต้องกล่าวว่ารหัสนั้นเข้ากันได้กับ Swift 4 แต่ UIEdgeInsetsMake นั้นเลิกใช้แล้ว ควรใช้ UIEdgeInsets แทน
โฮเซ

developer.apple.com/documentation/uikit/…มันบอกว่ามันเลิกใช้แล้วที่ไหน? ฉันใช้สิ่งนี้ในโครงการของฉันและฉันกำลังทำงานกับ Xcode ล่าสุดดังนั้น Swift 9.3 @ José
Mauricio Chirino

คุณพูดถูกต้องขอโทษที่ไม่ดีของฉัน แนะนำให้ใช้ UIEdgeInsets แต่นั่นไม่ได้หมายความว่าอีกอันหนึ่งเลิกใช้แล้ว SwiftLint จะบ่นเกี่ยวกับตัวสร้างแบบดั้งเดิมแม้ว่าเมื่อใช้ UIEdgeInsetsMake
José

1
เข้าใจแล้ว โปรดลบ downvote ถ้าคุณเป็นคนที่ได้โปรดโปรดฉันไม่เคยพูดคำตอบของฉันเป็นไปได้เท่านั้น
Mauricio Chirino

มันบอกว่าฉันไม่สามารถเปลี่ยนการลงคะแนนของฉันจนกว่าคุณจะเปลี่ยนคำตอบของคุณ คุณสามารถปรับแต่งถ้อยคำได้บ้างไหม?
José

2

ไม่จำเป็นต้องใช้ส่วนต่าง ๆ มากมาย คำตอบอื่น ๆ ใช้ส่วนเสริมของเฟรมและ CGRect และเลเยอร์และ ... BLAH ไม่ดี; ใช้เลย์เอาต์อัตโนมัติและ UITableViewCell ที่กำหนดเอง ใน UITableViewCell นั้นแทนที่จะดูเนื้อหาของคุณภายใน contentView ให้สร้าง containerView (UIView) ดูมุมมองคอนเทนเนอร์ภายใน contentView จากนั้นเรียกดูมุมมองทั้งหมดของคุณภายในมุมมองคอนเทนเนอร์

หากต้องการทำให้ระยะห่างในขณะนี้เพียงแก้ไขระยะขอบเค้าโครงของมุมมองคอนเทนเนอร์เช่น:

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

สถานการณ์ของฉันคือฉันใช้ UIView ที่กำหนดเองเพื่อดูส่วนหัวในส่วนความสูงส่วนหัวในส่วนคืนความสูงคงที่บอกว่า 40 ปัญหาคือเมื่อไม่มีข้อมูลทั้งหมดมุมมองส่วนหัวถูกสัมผัสซึ่งกันและกัน ดังนั้นฉันต้องการเว้นวรรคระหว่างส่วนที่ขาดข้อมูลดังนั้นฉันจึงแก้ไขโดยเพียงเปลี่ยนระนาบ "tableview style" เป็น "Group" และใช้งานได้สำหรับฉัน


1

ลองดูโซลูชันของฉันบน GitHubด้วยคลาสย่อยUITableViewและการใช้คุณสมบัติรันไทม์ของ Objective-C
โดยทั่วไปจะใช้โครงสร้างข้อมูลส่วนตัวของ Apple UITableViewRowDataที่ฉันได้ทำการค้นหาส่วนหัวรันไทม์ส่วนตัวของUITableView:

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

และนี่คือคลาสส่วนตัวที่ต้องการซึ่งมีทุกสิ่งที่คุณต้องการในการจัดวางเซลล์ของคุณในแบบที่คุณต้องการโดยไม่ต้องตั้งค่าในคลาสของเซลล์:

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


1

ฉันมีปัญหาในการทำให้สิ่งนี้ทำงานควบคู่ไปกับสีพื้นหลังและมุมมองอุปกรณ์เสริมในเซลล์ จบลงด้วยการ:

1) ตั้งค่าคุณสมบัติมุมมองพื้นหลังของเซลล์ด้วยชุด UIView ด้วยสีพื้นหลัง

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

2) วางมุมมองนี้อีกครั้งใน layoutSubviews เพื่อเพิ่มแนวคิดของการเว้นวรรค

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

1

ใช้ส่วนหัวเป็นระยะห่างจะทำงานได้ดีฉันเดาว่าถ้าคุณไม่ต้องการใช้ส่วนหัวใด ๆ มิฉะนั้นอาจไม่ใช่ความคิดที่ดีที่สุด สิ่งที่ฉันคิดคือการสร้างมุมมองเซลล์ที่กำหนดเอง

ตัวอย่าง:

ในเซลล์ที่กำหนดเองสร้างมุมมองพื้นหลังที่มีข้อ จำกัด เพื่อที่จะไม่เติมเต็มทั้งเซลล์

จากนั้นทำพื้นหลัง tableview ที่มองไม่เห็นและลบตัวคั่น:

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

// Remove the separators
tableview.separatorStyle = .none

1

หากคุณไม่ต้องการเปลี่ยนส่วนและหมายเลขแถวของมุมมองตาราง (เหมือนที่ฉันทำ) นี่คือสิ่งที่คุณทำ:

1) เพิ่ม ImageView ที่ด้านล่างของมุมมองเซลล์ตารางของคุณ

2) ทำให้มันเป็นสีเดียวกับสีพื้นหลังของมุมมองตาราง

ฉันทำสิ่งนี้ในแอปพลิเคชันของฉันและทำงานได้อย่างสมบูรณ์ ไชโย! : D


0

ป้อนคำอธิบายรูปภาพที่นี่SWift-5 ระยะห่างระหว่าง 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

คุณสามารถใช้ข้อ จำกัด ในรหัสดังนี้:

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

    }
}

สิ่งสำคัญคือการเพิ่มมุมมองย่อย (คอนเทนเนอร์) และใส่องค์ประกอบอื่น ๆ


-2

เพิ่มมุมมองภายในให้กับเซลล์จากนั้นเพิ่มมุมมองของคุณเองลงไป


-2

โซลูชัน Swift 5.0

ภายในคลาสย่อย UITableViewCell

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

-4

ใช้ UITableViewDelegate heightForRowAtIndexPathและส่งคืนความสูงของแถว

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

คำถามคือวิธีการเพิ่มระยะห่างระหว่างเซลล์มากกว่าความสูงของเซลล์
shippo7
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.