UITableView - เปลี่ยนสีส่วนหัวของส่วน

ฉันจะเปลี่ยนสีของส่วนหัวของส่วนใน UITableView ได้อย่างไร

แก้ไข : คำตอบที่จัดทำโดย DJ-Sควรได้รับการพิจารณาสำหรับ iOS 6 ขึ้นไป คำตอบที่ยอมรับนั้นล้าสมัย

หวังว่าวิธีการนี้จากUITableViewDelegateโปรโตคอลจะช่วยให้คุณเริ่มต้น:

Objective-C:

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
{
  UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
  if (section == integerRepresentingYourSectionOfInterest)
     [headerView setBackgroundColor:[UIColor redColor]];
  else 
     [headerView setBackgroundColor:[UIColor clearColor]];
  return headerView;
}

สวิฟท์:

func tableView(_ tableView: UITableView!, viewForHeaderInSection section: Int) -> UIView!
{
  let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.size.width, height: 30))
  if (section == integerRepresentingYourSectionOfInterest) {
    headerView.backgroundColor = UIColor.redColor()
  } else {
    headerView.backgroundColor = UIColor.clearColor()
  }
  return headerView
}

อัปเดต 2017:

สวิฟท์ 3:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
    {
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.size.width, height: 30))
        if (section == integerRepresentingYourSectionOfInterest) {
            headerView.backgroundColor = UIColor.red
        } else {
            headerView.backgroundColor = UIColor.clear
        }
        return headerView
    }

แทนที่[UIColor redColor]ด้วยสิ่งที่UIColorคุณต้องการ headerViewนอกจากนี้คุณยังอาจต้องการที่จะปรับขนาดของ

นี่เป็นคำถามเก่า แต่ฉันคิดว่าคำตอบต้องได้รับการอัปเดต

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

-(void)tableView:(UITableView *)tableView 
    willDisplayHeaderView:(UIView *)view 
    forSection:(NSInteger)section

วิธีการมอบหมายส่วน

ตัวอย่างเช่น:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    // Background color
    view.tintColor = [UIColor blackColor];

    // Text Color
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
    [header.textLabel setTextColor:[UIColor whiteColor]];

    // Another way to set the background color
    // Note: does not preserve gradient effect of original header
    // header.contentView.backgroundColor = [UIColor blackColor];
}

นำมาจากโพสต์ของฉันที่นี่: https://happyteamlabs.com/blog/ios-how-to-customize-table-view-header-and-footer-colors/

สวิฟท์ 3/4

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int){
    view.tintColor = UIColor.red
    let header = view as! UITableViewHeaderFooterView
    header.textLabel?.textColor = UIColor.white
}

ต่อไปนี้เป็นวิธีเปลี่ยนสีข้อความ

UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 3, tableView.bounds.size.width - 10, 18)] autorelease];
label.text = @"Section Header Text Here";
label.textColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.75];
label.backgroundColor = [UIColor clearColor];
[headerView addSubview:label];

คุณสามารถทำได้ถ้าคุณต้องการส่วนหัวด้วยสีที่กำหนดเอง:

[[UITableViewHeaderFooterView appearance] setTintColor:[UIColor redColor]];

โซลูชันนี้ใช้งานได้ดีตั้งแต่ iOS 6.0

โซลูชันต่อไปนี้ใช้งานได้กับSwift 1.2 กับ iOS 8+

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    // This changes the header background
    view.tintColor = UIColor.blueColor()

    // Gets the header view as a UITableViewHeaderFooterView and changes the text colour
    var headerView: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    headerView.textLabel.textColor = UIColor.redColor()

}

การตั้งค่าสีพื้นหลังบน UITableViewHeaderFooterView ถูกเลิกใช้แล้ว กรุณาใช้contentView.backgroundColorแทน

อย่าลืมที่จะเพิ่มรหัสชิ้นนี้จากตัวแทนหรือมุมมองของคุณจะถูกตัดออกหรือปรากฏหลังโต๊ะในบางกรณีเมื่อเทียบกับความสูงของมุมมอง / ฉลากของคุณ

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

คุณสามารถทำได้บน main.storyboard ในเวลาประมาณ 2 วินาที

1. เลือกมุมมองตาราง
2. ไปที่ตัวตรวจสอบคุณสมบัติ
3. รายการสินค้า
4. เลื่อนลงไปที่ดูหัวข้อย่อย
5. เปลี่ยนพื้นหลัง"

หากคุณไม่ต้องการสร้างมุมมองที่กำหนดเองคุณสามารถเปลี่ยนสีเช่นนี้ได้ (ต้องใช้ iOS 6):

-(void) tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    if ([view isKindOfClass: [UITableViewHeaderFooterView class]]) {
        UITableViewHeaderFooterView* castView = (UITableViewHeaderFooterView*) view;
        UIView* content = castView.contentView;
        UIColor* color = [UIColor colorWithWhite:0.85 alpha:1.]; // substitute your color here
        content.backgroundColor = color;
    }
}

ตั้งค่าพื้นหลังและสีข้อความของส่วนพื้นที่: (ขอบคุณWilliam JockuschและDj S)

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    if ([view isKindOfClass: [UITableViewHeaderFooterView class]]) {
        UITableViewHeaderFooterView* castView = (UITableViewHeaderFooterView*) view;
        castView.contentView.backgroundColor = [UIColor grayColor];
        [castView.textLabel setTextColor:[UIColor grayColor]];
    }
}

สวิฟต์ 4

เมื่อต้องการเปลี่ยนสีพื้นหลัง , สีป้ายข้อความและตัวอักษรสำหรับหัวมุมมองของมาตรา UITableView เพียงแทนที่willDisplayHeaderViewสำหรับมุมมองตารางของคุณเช่นดังนั้น:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let header = view as! UITableViewHeaderFooterView
        header.backgroundView?.backgroundColor = .white
        header.textLabel?.textColor = .black
        header.textLabel?.font = UIFont(name: "Helvetica-Bold", size: 14)
} 

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน หวังว่ามันจะช่วยคุณได้เช่นกัน!

ต่อไปนี้เป็นวิธีเพิ่มรูปภาพในมุมมองส่วนหัว:

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
{
    UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
    UIImageView *headerImage = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"top-gery-bar.png"]] autorelease];

    headerImage.frame = CGRectMake(0, 0, tableView.bounds.size.width, 30);

    [headerView addSubview:headerImage];

    return headerView;
}

สำหรับ iOS8 (เบต้า) และ Swift เลือกสี RGB ที่คุณต้องการแล้วลองทำสิ่งนี้:

override func tableView(tableView: UITableView!, viewForHeaderInSection section: Int) -> UIView! {
    var header :UITableViewHeaderFooterView = UITableViewHeaderFooterView()

    header.contentView.backgroundColor = UIColor(red: 254.0/255.0, green: 190.0/255.0, blue: 127.0/255.0, alpha: 1)
    return header

}

("แทนที่" มีตั้งแต่ฉันใช้ UITableViewController แทน UIViewController ปกติในโครงการของฉัน แต่ไม่บังคับสำหรับการเปลี่ยนสีของส่วนหัว)

ข้อความของส่วนหัวของคุณจะยังคงเห็น โปรดทราบว่าคุณจะต้องปรับความสูงส่วนหัว

โชคดี.

SWIFT 2

ฉันสามารถเปลี่ยนสีพื้นหลังของส่วนได้สำเร็จด้วยเอฟเฟกต์เบลอเพิ่มเติม (ซึ่งยอดเยี่ยมมาก ๆ ) วิธีเปลี่ยนสีพื้นหลังของส่วนได้อย่างง่ายดาย:

1. ก่อนอื่นให้ไปที่กระดานเรื่องราวแล้วเลือกมุมมองตาราง
2. ไปที่ตัวตรวจสอบคุณสมบัติ
3. รายการสินค้า
4. เลื่อนลงไปที่มุมมอง
5. เปลี่ยนพื้นหลัง"

จากนั้นสำหรับเอฟเฟกต์เบลอเพิ่มไปยังรหัส:

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    // This is the blur effect

    let blurEffect = UIBlurEffect(style: .Light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)

    // Gets the header view as a UITableViewHeaderFooterView and changes the text colour and adds above blur effect
    let headerView: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    headerView.textLabel!.textColor = UIColor.darkGrayColor()
    headerView.textLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 13)
    headerView.tintColor = .groupTableViewBackgroundColor()
    headerView.backgroundView = blurEffectView

}

ฉันรู้ว่ามันตอบในกรณี In Swift ใช้ต่อไปนี้

    override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let tableViewWidth = self.tableView.bounds

        let headerView = UIView(frame: CGRectMake(0, 0, tableViewWidth.size.width, self.tableView.sectionHeaderHeight))
        headerView.backgroundColor = UIColor.greenColor()

        return headerView
    }

iOS 8+

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        tableView.tableHeaderView?.backgroundColor = UIColor.blue()
}

จากคำตอบ @Dj S โดยใช้ Swift 3 ซึ่งใช้งานได้ดีกับ iOS 10

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    // Background color
    view.tintColor = UIColor.black

    // Text Color
    let headerView = view as! UITableViewHeaderFooterView
    headerView.textLabel?.textColor = UIColor.white
}

ฉันมีโครงการที่ใช้เซลล์มุมมองตารางแบบสแตติกใน iOS 7.x willDisplayHeaderView ไม่เริ่มทำงาน อย่างไรก็ตามวิธีนี้ใช้งานได้:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    NSLog(@"%s", __FUNCTION__);
    CGRect headerFrame = CGRectMake(x, y, w, h);    
    UIView *headerView = [[UIView alloc] initWithFrame:headerFrame];  
    headerView.backgroundColor = [UIColor blackColor];

 -(void) tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view
  forSection:(NSInteger)section
  {
        if ([view isKindOfClass: [UITableViewHeaderFooterView class]])
        {
             UITableViewHeaderFooterView *castView = (UITableViewHeaderFooterView *) view;
             UIView *content = castView.contentView;
             UIColor *color = [UIColor whiteColor]; // substitute your color here
             content.backgroundColor = color;
             [castView.textLabel setTextColor:[UIColor blackColor]];
        }
 }

ฉันคิดว่ารหัสนี้ไม่เลว

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = tableView.dequeueReusableHeaderFooterViewWithIdentifier(MyHeaderView.reuseIdentifier) as MyHeaderView
    let backgroundView = UIView()
    backgroundView.backgroundColor = UIColor.whiteColor()
    headerView.backgroundView = backgroundView
    headerView.textLabel.text = "hello"
    return headerView
}

Swift 4 ทำให้ง่ายมาก เพียงเพิ่มสิ่งนี้ลงในชั้นเรียนของคุณและตั้งค่าสีตามต้องการ

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.backgroundColor = UIColor(red: 0.094, green: 0.239, blue: 0.424, alpha: 1.0)
    }

หรือถ้าเป็นสีเรียบง่าย

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.backgroundColor = UIColor.white
    }

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

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor(red: 0.094, green: 0.239, blue: 0.424, alpha: 1.0)
    }

หรือถ้าเป็นสีเรียบง่าย

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor.white
    }

ใน iOS 7.0.4 ฉันสร้างส่วนหัวที่กำหนดเองด้วย XIB ของตัวเอง ไม่มีอะไรพูดถึงที่นี่ก่อนที่จะทำงาน มันต้องเป็นคลาสย่อยของ UITableViewHeaderFooterView เพื่อทำงานกับdequeueReusableHeaderFooterViewWithIdentifier:และดูเหมือนว่าคลาสจะดื้อรั้นมากเกี่ยวกับสีพื้นหลัง ดังนั้นในที่สุดฉันก็เพิ่ม UIView (คุณสามารถทำได้ด้วยโค้ดหรือ IB) ด้วยชื่อ customBackgroudView จากนั้นตั้งค่าคุณสมบัติเป็น backgroundColor ใน layoutSubviews: ฉันตั้งค่าเฟรมของมุมมองนั้นเป็นขอบเขต มันใช้งานได้กับ iOS 7 และไม่ผิดพลาด

// in MyTableHeaderView.xib drop an UIView at top of the first child of the owner
// first child becomes contentView

// in MyTableHeaderView.h
@property (nonatomic, weak) IBOutlet UIView * customBackgroundView;

// in MyTableHeaderView.m
-(void)layoutSubviews;
{
    [super layoutSubviews];

    self.customBackgroundView.frame = self.bounds;
}
// if you don't have XIB / use IB, put in the initializer:
-(id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    ...
    UIView * customBackgroundView = [[UIView alloc] init];
    [self.contentView addSubview:customBackgroundView];
    _customBackgroundView = customBackgroundView;
    ...
}


// in MyTableViewController.m
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MyTableHeaderView * header = [self.tableView
                                          dequeueReusableHeaderFooterViewWithIdentifier:@"MyTableHeaderView"];
    header.customBackgroundView.backgroundColor = [UIColor redColor];
    return header;
}

เพียงแค่เปลี่ยนสีของเลเยอร์ของมุมมองส่วนหัว

- (UIView *) tableView: (UITableView *) tableView viewForHeaderInSection: (NSInteger) ส่วน 
{
  UIView * headerView = [[[UIView alloc] initWithFrame: CGRectMake (0, 0, tableView.bounds.size.width, 30)] autorelease];
 headerView.layer.backgroundColor = [UIColor clearColor] .CGColor
}

หากใครต้องการความรวดเร็ว

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView(frame: CGRect(x: 0,y: 0,width: self.tableView.frame.width, height: 30))
    view.backgroundColor = UIColor.redColor()
    let label = UILabel(frame: CGRect(x: 15,y: 5,width: 200,height: 25))
    label.text = self.tableView(tableView, titleForHeaderInSection: section)
    view.addSubview(label)
    return view
}

ฉันได้รับข้อความจาก Xcode ผ่านบันทึกคอนโซล

[TableView] การตั้งค่าสีพื้นหลังบน UITableViewHeaderFooterView ถูกเลิกใช้แล้ว โปรดตั้งค่า UIView ที่กำหนดเองด้วยสีพื้นหลังที่คุณต้องการเป็นคุณสมบัติ backgroundView แทน

จากนั้นฉันเพิ่งสร้าง UIView ใหม่และวางเป็นพื้นหลังของ HeaderView ไม่ใช่วิธีที่ดี แต่มันง่ายอย่างที่ Xcode พูด

ในกรณีของฉันมันทำงานเช่นนี้:

let headerIdentifier = "HeaderIdentifier"
let header = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: headerIdentifier)
header.contentView.backgroundColor = UIColor.white

เพียงตั้งค่าสีพื้นหลังของมุมมองพื้นหลัง:

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int){         
  let tableHeader = view as! UITableViewHeaderFooterView        
  tableHeader.backgroundView?.backgroundColor = UIColor.white     
}

ด้วย RubyMotion / RedPotion ให้วางสิ่งนี้ลงใน TableScreen ของคุณ:

  def tableView(_, willDisplayHeaderView: view, forSection: section)
    view.textLabel.textColor = rmq.color.your_text_color
    view.contentView.backgroundColor = rmq.color.your_background_color
  end

ทำงานเหมือนจับใจ!

สำหรับรวดเร็ว 5 +

ในwillDisplayHeaderViewวิธีการ

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

     //For Header Background Color
     view.tintColor = .black

    // For Header Text Color
    let header = view as! UITableHeaderFooterView
    header.textLabel?.textColor = .white
}

ฉันหวังว่านี่จะช่วยคุณ:]

แม้ว่าfunc tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)จะใช้งานได้เช่นกัน แต่คุณสามารถทำได้โดยไม่ต้องใช้วิธีการมอบหมายแบบอื่น ในfunc tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?วิธีการของคุณคุณสามารถใช้view.contentView.backgroundColor = UIColor.whiteแทนview.backgroundView?.backgroundColor = UIColor.whiteซึ่งไม่ได้ทำงาน (ฉันรู้ว่าbackgroundViewเป็นตัวเลือก แต่แม้ว่าจะอยู่ที่นั่นสิ่งนี้จะไม่ได้รับการกล่าวถึงหากไม่ได้ใช้งานwillDisplayHeaderView