กำจัดตัวคั่นพิเศษด้านล่าง UITableView


714

เมื่อฉันตั้งค่ามุมมองตารางที่มี 4 แถวยังคงมีเส้นคั่นพิเศษ (หรือเซลล์ว่างพิเศษ) ใต้แถวที่เติม

ฉันจะลบเซลล์เหล่านี้ได้อย่างไร

รูปสำหรับเส้นคั่นพิเศษใน UITableView

คำตอบ:


1505

เครื่องมือสร้างส่วนต่อประสาน (iOS 9+)

เพียงลาก UIView ไปที่ตาราง ในกระดานเรื่องราวมันจะนั่งที่ด้านบนด้านล่างเซลล์ที่คุณกำหนดเอง คุณอาจต้องการตั้งชื่อมันว่า "ท้ายกระดาษ"

ที่นี่จะแสดงเป็นสีเขียวเพื่อความชัดเจนคุณอาจต้องการสีที่ชัดเจน

โปรดทราบว่าด้วยการปรับความสูงคุณสามารถส่งผลต่อวิธีการ "จัดการการตีกลับด้านล่าง" ของตารางตามที่คุณต้องการ (ความสูงเป็นศูนย์มักจะดี)

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


เมื่อต้องการทำโดยทางโปรแกรม:

รวดเร็ว

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.tableFooterView = UIView()
}

Objective-C

iOS 6.1+

- (void)viewDidLoad 
{
    [super viewDidLoad];

    // This will remove extra separators from tableview
    self.tableView.tableFooterView = [UIView new];
}

หรือถ้าคุณต้องการ

    self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

ประวัติศาสตร์ใน iOS:

เพิ่มไปยังตัวควบคุมมุมมองตาราง ...

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
     // This will create a "invisible" footer
     return CGFLOAT_MIN;
 }

และถ้าจำเป็น ...

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{        
    return [UIView new];

    // If you are not using ARC:
    // return [[UIView new] autorelease];
}

ฉันคิดว่าคำอธิบายและรหัสของคุณกลับกัน อย่างไรก็ตามมันใช้งานได้ดีสำหรับฉัน ฉันใช้ส่วนท้าย "ของจริง" กับตารางที่จัดกลุ่มเท่านั้นดังนั้นฉันจึงเพิ่มถ้า (tableView.style! = UITableViewStyleGrouped) {} ​​รอบรหัสของคุณ ตอนนี้ตารางที่ไม่ได้จัดกลุ่มทั้งหมดของฉันจะสูญเสียเซลล์พิเศษในขณะที่ตารางที่จัดกลุ่มของฉันไม่ได้รับผลกระทบ
arlomedia

ปฏิบัติตามบันทึกย่อของฉันด้านบนฉันจะเพิ่มคำเตือนว่าหากคุณใส่เงื่อนไขใด ๆ ลงในเมธอด viewForFooterInSection ต้องแน่ใจว่าวิธีส่งคืน UIView หรือศูนย์ หากคุณคืนโมฆะโดยบังเอิญแอปของคุณจะขัดข้อง
arlomedia

4
@Mathieu สิ่งนี้จะใช้ได้เพราะหากตารางมีส่วนท้ายที่กำหนดเองมันจะไม่สร้างแถว "fantom" เพื่อเติมเต็มมุมมองตาราง ดังนั้นในคุณจะสร้างมุมมองที่ว่างเปล่าเพื่อใช้เป็นส่วนท้ายและตั้งค่าความสูงเป็นใกล้ 0 (ไม่สามารถเป็นศูนย์มิเช่นนั้น iOS จะไม่แสดงผล) ด้วยเคล็ดลับง่ายๆนี้คุณจะเปลี่ยนพฤติกรรมเริ่มต้น
J. Costa

2
@ j.Costa: โซลูชันของคุณจะทำงานเพียงครั้งเดียวในขณะที่สร้าง uitableview หลังจากคลิกที่เซลล์สุดท้ายทางออกของคุณไม่ดีขึ้น โปรดปรับปรุงคำตอบของคุณ

3
การใช้tableFooterViewปล่อยให้ตัวแยกในเซลล์สุดท้ายในแถวเนื่องจากตารางยังคงคาดการณ์เนื้อหาด้านล่างของเซลล์นั้น การใช้วิธีการในอดีตจะขจัดตัวคั่นสุดท้ายและดูโดยรวมที่ดีขึ้น
James Kuang

128

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

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

- (void) addHeaderAndFooter
{
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 10)];
    v.backgroundColor = [UIColor clearColor];
    [self.myTableView setTableHeaderView:v];
    [self.myTableView setTableFooterView:v];
    [v release];
}

ในการตอบสนองต่อ @Casebash ฉันกลับไปที่รหัสในแอปของฉัน ("AcmeLists" List Manager ใน iTunes store ... ) และใช้วิธี addHeaderAndFooter ลัดวงจรเพื่อตรวจสอบ ไม่ว่าฉันมีตัวคั่นแถวพิเศษ; ด้วยรหัสที่ฉันมีสิ่งที่คุณเห็นในหน้าต่างนี้สแนป: ไม่มีภาพแถวของตารางคั่น ดังนั้นฉันจึงไม่แน่ใจว่าทำไมมันไม่ได้ผลสำหรับคุณ ยิ่งกว่านั้นฉันรู้สึกว่าการมีส่วนท้ายแบบกำหนดเองใด ๆ ในมุมมองตารางจำเป็นต้องหยุดการวาดตัวคั่นแถวสำหรับแถวว่างด้านล่าง นั่นจะน่าเกลียด สำหรับการอ้างอิงฉันดูตารางที่มีจำนวนแถวมากกว่าที่สามารถดูได้บนหน้าจอแล้วสำหรับตารางที่มีสองแถว ในทั้งสองกรณีไม่มีตัวคั่นภายนอก

บางทีมุมมองที่กำหนดเองของคุณไม่ได้ถูกเพิ่มเข้ามา ในการตรวจสอบว่าตั้งค่าสีพื้นหลังเป็นอย่างอื่นที่ไม่ใช่clearColorเช่น[UIColor redColor]เช่นหากคุณไม่เห็นแถบสีแดงที่ด้านล่างของตารางส่วนท้ายของคุณจะไม่ถูกตั้งค่า


1
คุณสามารถทำสิ่งนี้ใน IB ได้เช่นกัน เพียงแค่ลาก UIView ที่ด้านล่างของ TableView และตั้งค่าความสูงเป็น 1
Ortwin Gentz

70

การลบบรรทัดตัวคั่นพิเศษสำหรับแถวว่างใน UITableView ในSwift

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.yourTableview.tableFooterView = UIView()
}

34

ฉันต้องการขยายคำตอบwkw :

เพียงเพิ่มส่วนท้ายเท่านั้นที่มีความสูง 0 จะเป็นการหลอกลวง (ทดสอบกับ sdk 4.2, 4.4.1)

- (void) addFooter
{
    UIView *v = [[UIView alloc] initWithFrame:CGRectZero];

    [self.myTableView setTableFooterView:v];
}

หรือแม้แต่ง่ายกว่า - ที่ซึ่งคุณตั้งค่ามุมมอง Table ให้เพิ่มบรรทัดนี้:

//change height value if extra space is needed at the bottom.
[_tableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectMake(0,0,0,0)]];

หรือง่ายยิ่งขึ้น - เพียงแค่ลบตัวคั่นใด ๆ :

[_tableView setTableFooterView:[UIView new]];

ขอบคุณwkwอีกครั้ง :)


นี่คือคำตอบที่ถูกต้องเพราะในวิธีการอื่น ๆ แถวสุดท้ายยังคงอยู่กับแยกเส้น
Ankush

22

สำหรับ iOS 7 ขึ้นไปโดยใช้สตอรี่บอร์ด

เพียงลากUIViewเข้ามาUITableViewเป็นส่วนท้ายของคุณ ตั้งค่าความสูงของมุมมองท้ายกระดาษเป็น 0


18

ลองสิ่งนี้ มันใช้งานได้สำหรับฉัน:

- (void) viewDidLoad
{
  [super viewDidLoad];

  // Without ARC
  //self.tableView.tableFooterView = [[[UIView alloc] init] autorelease];

  // With ARC, tried on Xcode 5
  self.tableView.tableFooterView = [UIView new];
}


11

หากคุณกำลังใช้ Swift เพิ่มรหัสต่อไปนี้เพื่อviewDidLoadของคอนโทรลเลอร์ที่จัดการ tableview:

override func viewDidLoad() {
    super.viewDidLoad()

    //...

    // Remove extra separators
    tableView.tableFooterView = UIView()
}

8

คุณสามารถเพิ่มท้ายกระดาษเปล่าที่ท้ายแล้วมันจะซ่อนเซลล์ว่าง แต่มันก็ดูน่าเกลียดด้วย:

tableView.tableFooterView = UIView()

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

มีวิธีที่ดีกว่าคือเพิ่มบรรทัด 1 จุดที่ท้ายสุดของมุมมองตารางเนื่องจากส่วนท้ายและเซลล์ว่างจะไม่ปรากฏอีกต่อไป

let footerView = UIView()
footerView.frame = CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 1)
footerView.backgroundColor = tableView.separatorColor
tableView.tableFooterView = footerView

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


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

อย่างไรก็ตามคุณต้องการ แต่ฉันคิดว่าตัวคั่น "ที่ยังไม่เสร็จสมบูรณ์" ดูค่อนข้างน่าเกลียด
Darko


7

การแก้ปัญหาของ J. Costa: คุณสามารถทำการเปลี่ยนแปลงทั่วโลกไปยังตารางได้โดยใส่รหัสบรรทัดนี้:

[[UITableView appearance] setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];

ภายในวิธีที่เป็นไปได้ครั้งแรก (โดยปกติAppDelegateคือใน: application:didFinishLaunchingWithOptions:วิธี)


2
ระวังด้วยอันนี้มีหลายกรณีที่ส่วนท้ายที่คุณตั้งใจจะถูกเขียนทับและคุณจะใช้เวลาหนึ่งหรือสองวันในการตั้งสติของคุณ นอกจากนี้ tableFooterView ยังไม่ได้ทำเครื่องหมายด้วย UI_APPEARANCE_SELECTOR เพื่อให้พฤติกรรมที่แท้จริงสามารถเปลี่ยนแปลงได้ตลอดเวลา
mwright

6

ฉันรู้ว่าคำถามนี้เป็นคำตอบที่ได้รับการยอมรับ แต่ฉันวางไว้ที่นี่วิธีที่แตกต่างกันสำหรับวิธีการซ่อนบรรทัดคั่นพิเศษของ UITableViewแต่ฉันใส่นี่วิธีที่แตกต่างกันสำหรับวิธีการซ่อนเส้นคั่นเสริม

คุณสามารถซ่อนtableViewบรรทัดคั่นมาตรฐานและเพิ่มบรรทัดที่กำหนดเองที่ด้านบนของแต่ละเซลล์

ปรับปรุง:

วิธีที่ง่ายที่สุดในการเพิ่มตัวแยกที่กำหนดเองคือการเพิ่มUIViewความสูง 1px อย่างง่าย:

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
separatorLineView.backgroundColor = [UIColor grayColor]; /// may be here is clearColor;
[cell.contentView addSubview:separatorLineView];

หรือ

    self.tblView=[[UITableView alloc] initWithFrame:CGRectMake(0,0,320,370) style:UITableViewStylePlain];
    self.tblView.delegate=self;
    self.tblView.dataSource=self;
    [self.view addSubview:self.tblView];

    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 10)];
    v.backgroundColor = [UIColor clearColor];
    [self.tblView setTableHeaderView:v];
    [self.tblView setTableFooterView:v];
    [v release];

หรือ

- (float)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    // This will create a "invisible" footer
    return 0.01f;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    // To "clear" the footer view
    return [[UIView new] autorelease];
}

หรือ วิธีที่ดีที่สุดและเรียบง่ายอย่างที่ฉันเคยเป็น

self.tableView.tableFooterView = [[UIView alloc] init];

ลองอย่างใดอย่างหนึ่ง


6

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

extension UITableView {

  @IBInspectable
  var isEmptyRowsHidden: Bool {
        get {
          return tableFooterView != nil
        }
        set {
          if newValue {
              tableFooterView = UIView(frame: .zero)
          } else {
              tableFooterView = nil
          }
       }
    }
}

การใช้งาน:

tableView.isEmptyRowsHidden = true

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


5

uitableview เส้นแยกพิเศษซ่อนเส้นคั่นพิเศษซ่อนใน swift 3.0

 self.tbltableView.tableFooterView = UIView(frame: .zero)

5

หากคุณไม่ต้องการตัวคั่นใด ๆ หลังจากเซลล์สุดท้ายคุณต้องมีความสูงใกล้ศูนย์ แต่ความสูงที่ไม่เป็นศูนย์สำหรับส่วนท้ายของคุณ

ในUITableViewDelegate:

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return .leastNormalMagnitude
}

1
ยอดเยี่ยม! ทำงานให้ฉัน !!
Antony Raphel


3

เพียงเพิ่มมุมมองด้วยสีตัวคั่นที่ต้องการเป็นสีพื้นหลังความกว้าง 100% ความสูง 1px ที่ตำแหน่ง x0 y-1 ใน tableViewCell ของคุณ ตรวจสอบให้แน่ใจว่า tableViewCell ไม่คลิปภาพตัวอย่าง แต่ควรดู tableView

ดังนั้นคุณจะได้ตัวแยกที่ง่ายและใช้งานได้จริงเฉพาะระหว่างเซลล์ที่มีอยู่โดยไม่มีการแฮ็กต่อรหัสหรือ IB

หมายเหตุ: บนเด้งแนวตั้งตัวคั่นที่ 1 จะปรากฏขึ้น แต่นั่นไม่น่าจะมีปัญหาเพราะมันเป็นพฤติกรรมเริ่มต้นของ iOS


3

ฉันใช้มุมมองตารางเพื่อแสดงจำนวนแถวความสูงคงที่ดังนั้นฉันจึงปรับขนาดและทำให้ไม่สามารถเลื่อนได้


3

หากต้องการกำจัดเส้นคั่นพิเศษจากด้านล่างของ UItableview โดยทางโปรแกรมให้เขียนโค้ดสองบรรทัดต่อไปนี้แล้วมันจะลบเครื่องหมายคั่นพิเศษออกจากนั้น

tableView.sectionFooterHeight = 0.f;
tableView.sectionHeaderHeight = 0.f;

เคล็ดลับนี้ใช้ได้กับฉันตลอดเวลาลองด้วยตัวเอง


2

ฉันโชคดีที่ได้ใช้คำตอบที่ได้รับการยอมรับ (iOS 9+, Swift 2.2) ฉันได้ลองใช้งาน:

self.tableView.tableFooterView = UIView(frame: .zero)

อย่างไรก็ตามไม่มีผลต่อฉันtableView- ฉันเชื่อว่าอาจมีบางอย่างเกี่ยวข้องกับความจริงที่ฉันใช้UITableViewControllerผมเชื่อว่ามันอาจจะมีบางสิ่งบางอย่างจะทำอย่างไรกับความจริงที่ว่าฉันถูกใช้

แต่ฉันต้องแทนที่viewForFooterInSectionเมธอด (ฉันไม่ได้ตั้งค่าไว้ที่tableFooterViewอื่น):

override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    return UIView(frame: .zero)
}

สิ่งนี้ใช้ได้ผลดีtableViewกับ a ในส่วนเดียว (ถ้าคุณมีหลายส่วนคุณต้องระบุอันสุดท้าย)


2

หากคุณมีเพียงส่วนเดียววิธีที่เร็วและง่ายที่สุดคือการตั้งค่าสไตล์มุมมองตารางจาก "ธรรมดา" เป็น "จัดกลุ่ม" (ดูภาพ)

TableView จัดกลุ่ม

หากคุณมีส่วนเพิ่มคุณอาจต้องตั้งความสูงส่วนหัวเป็นศูนย์ (ขึ้นอยู่กับ / / ลูกค้าของคุณ / รสนิยมของผู้จัดการโครงการของคุณ)

หากคุณมีส่วนมากขึ้นและไม่ต้องการยุ่งกับส่วนหัว (แม้ว่าจะเป็นเพียงหนึ่งบรรทัดในกรณีที่ง่ายที่สุด) คุณต้องตั้งค่า UIView เป็นส่วนท้ายตามที่อธิบายไว้ในคำตอบก่อนหน้า)


2

ส่วนต่อขยาย Swift 4.0

เป็นเพียงการต่อเติมเล็กน้อยสำหรับกระดานเรื่องราว:

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

extension UITableView {
    @IBInspectable
    var hideSeparatorForEmptyCells: Bool {
        set {
            tableFooterView = newValue ? UIView() : nil
        }
        get {
            return tableFooterView == nil
        }
    }
}

2

Swift 4 วิธีที่ง่ายและรวดเร็ว

override func viewDidLoad() {
     tableView.tableFooterView = UIView(frame: .zero)
}

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


การตั้งค่า UIView ใหม่เป็น tableFooterView ได้รับคำตอบแล้ว 10 ครั้งพร้อมคำอธิบายที่ดีกว่าเกี่ยวกับสาเหตุรหัสที่ดีขึ้น (คุณหายไปsuper.viewDidLoad()) และรวมอยู่ในคำตอบของ wiki ด้านบน สำหรับการลบตัวคั่นทั้งหมดนั้นไม่ใช่คำถามที่เกี่ยวกับเรื่องนี้ดังนั้นให้ย้อนกลับการแก้ไขครั้งล่าสุดของคุณและ / หรือลบคำตอบของคุณโดยสิ้นเชิง
Cœur

1

หากคุณต้องการลบพื้นที่ที่ไม่ต้องการใน UITableview คุณสามารถใช้วิธีการด้านล่างสองวิธี

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

1

ฉันได้เพิ่มส่วนขยาย tableview เล็ก ๆ ที่ช่วยตลอด

extension UITableView {
     func removeExtraCells() {
         tableFooterView = UIView(frame: .zero)
     }
}

1

ลองกับสิ่งนี้

สำหรับวัตถุประสงค์ C

- (void)viewDidLoad 
 {
  [super viewDidLoad];
  // This will remove extra separators from tableview
  self.yourTableView.tableFooterView = [UIView new];
}

สำหรับสวิฟท์

override func viewDidLoad() {
 super.viewDidLoad()
 self.yourTableView.tableFooterView = UIView()
}


0

UIKitไม่สร้างเซลล์ที่ว่างเปล่าเมื่อมีtableView tableFooterViewดังนั้นเราจึงสามารถให้เคล็ดลับและกำหนดเป็นศูนย์ความสูงของวัตถุเป็นส่วนท้ายของUIViewtableView

tableView.tableFooterView = UIView()

0

ในกรณีที่คุณมีsearchbarในview(เพื่อ จำกัด จำนวนผลลัพธ์เช่น) คุณจะต้องเพิ่มสิ่งต่อไปนี้ในshouldReloadTableForSearchStringและshouldReloadTableForSearchScope:

controller.searchResultsTable.footerView = [ [ UIView alloc ] initWithFrame:CGRectZero ];

0

ในสวิฟท์ (ฉันใช้ 4.0) คุณสามารถทำได้โดยการสร้างที่กำหนดเองUITableViewCellชั้นเรียนและoverridingsetSelectedวิธี จากนั้นseparator insetsทุกคนที่0 (คลาสหลักของฉันพร้อมมุมมองตารางมีสีพื้นหลังที่ชัดเจน) สี

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // eliminate extra separators below UITableView
    self.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.