自定义 UITableView 头部分

我想为每个部分定制 UITableView头文件。到目前为止,我已经实现了

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

这个 UITabelViewDelegate方法。我想做的是得到每个部分的当前标题,并只添加 UILabel作为一个子视图。

到目前为止,我还不能做到这一点。因为,我找不到任何东西来得到默认的节标题。第一个问题,有没有什么方法可以得到默认的节头

如果不可能,我需要创建一个容器视图,这是一个 UIView,但是,这次我需要设置默认的背景颜色,阴影颜色等。因为,如果您仔细查看部分的标题,它已经是定制的。

如何获得每个部分标题的这些默认值?

271067 次浏览

你可以试试这个:

 -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 18)];
/* Create custom view to display section header... */
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 5, tableView.frame.size.width, 18)];
[label setFont:[UIFont boldSystemFontOfSize:12]];
NSString *string =[list objectAtIndex:section];
/* Section header is in 0th index... */
[label setText:string];
[view addSubview:label];
[view setBackgroundColor:[UIColor colorWithRed:166/255.0 green:177/255.0 blue:186/255.0 alpha:1.0]]; //your background color...
return view;
}

如果我是你,我会创建一个方法,它返回一个给定包含 NSString 的 UIView

+ (UIView *) sectionViewWithTitle:(NSString *)title;

在这个方法的实现中,创建一个 UIView,添加一个 UILabel 和您想要设置的属性,当然还要将它的标题设置为给定的属性。

如果使用默认标题视图,则只能使用

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

斯威夫特:

override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {

如果您想自定义视图,则需要自己创建一个新的视图。

为什么不用 视图呢?

除了 titleForHeaderInSection 之外,您还可以简单地更改页眉、页脚的视图。 点击这里查看我的评论: 改变 UITable 部分背景颜色而不是丢失部分标题

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
//put your values, this is part of my code
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 30.0f)];
[view setBackgroundColor:[UIColor redColor]];
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(20, 5, 150, 20)];
[lbl setFont:[UIFont systemFontOfSize:18]];
[lbl setTextColor:[UIColor blueColor]];
[view addSubview:lbl];


[lbl setText:[NSString stringWithFormat:@"Section: %ld",(long)section]];


return view;
}

使用 tableView :viewForHeaderInSection:选择的答案是正确的。

分享一个小窍门。

如果您正在使用 Storyboard/xib,那么您可以创建另一个原型单元并将其用于您的“ section 单元”。配置标头的代码类似于配置行单元格的方式。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
static NSString *HeaderCellIdentifier = @"Header";


UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:HeaderCellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:HeaderCellIdentifier];
}


// Configure the cell title etc
[self configureHeaderCell:cell inSection:section];


return cell;
}

这是可能的最简单的解决方案。

 -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
SectionHeaderTableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:@"sectionHeader"];


//For creating a drop menu of rows from the section
//==THIS IS JUST AN EXAMPLE. YOU CAN REMOVE THIS IF-ELSE.==
if (![self.sectionCollapsedArray[section] boolValue])
{
headerView.imageView.image = [UIImage imageNamed:@"up_icon"];
}
else
{
headerView.imageView.image = [UIImage imageNamed:@"drop_icon"];
}


//For button action inside the custom cell
headerView.dropButton.tag = section;
[headerView.dropButton addTarget:self action:@selector(sectionTapped:) forControlEvents:UIControlEventTouchUpInside];


//For removing long touch gestures.
for (UIGestureRecognizer *recognizer in headerView.contentView.gestureRecognizers)
{
[headerView.contentView removeGestureRecognizer:recognizer];
[headerView removeGestureRecognizer:recognizer];
}


return headerView.contentView;
}

注意: SectionHeaderTableViewCell 是在故事板中创建的自定义 UITableViewCell。

试试这个..。

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)
{
// Background view is at index 0, content view at index 1
if let bgView = view.subviews[0] as? UIView
{
// do your stuff
}


view.layer.borderColor = UIColor.magentaColor().CGColor
view.layer.borderWidth = 1
}

魔术般地以快捷方式添加表格视图头

最近我试过这个。

在整个 UITableView 中,我只需要一个头部。

就像我想要在 TableView 的顶部有一个 UIImageView 一样。因此,我在 UITableViewCell 顶部添加了一个 UIImageView,并自动将其添加为 tableViewHeader。现在我将 ImageView 连接到 ViewController 并添加了 Image。

我很困惑,因为我第一次做这样的事。因此,为了消除我的困惑,打开 MainStoryBoard 的 xml 格式,发现图像视图是作为头部添加的。

对我来说很管用,谢谢 xCode 和 Swift。

如果 headerInSection 没有显示,可以尝试这个。

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

这将返回给定部分标题的高度。

返回文章页面 Lochana Tejas快速答案:

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 18))
let label = UILabel(frame: CGRectMake(10, 5, tableView.frame.size.width, 18))
label.font = UIFont.systemFontOfSize(14)
label.text = list.objectAtIndex(indexPath.row) as! String
view.addSubview(label)
view.backgroundColor = UIColor.grayColor() // Set your background color


return view
}

@ samwize 在 Swift 中的解决方案(所以支持他吧!)使用同样的回收机制来回收页眉/页脚部分真是太棒了:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let settingsHeaderSectionCell:SettingsHeaderSectionCell = self.dequeueReusableCell(withIdentifier: "SettingsHeaderSectionCell") as! SettingsHeaderSectionCell


return settingsHeaderSectionCell
}

如果您只想向 tableView 标题添加标题,请不要添加视图。在 Swift 3. x 中,代码是这样的:

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
var lblStr = ""
if section == 0 {
lblStr = "Some String 1"
}
else if section == 1{
lblStr = "Some String 2"
}
else{
lblStr = "Some String 3"
}
return lblStr
}

您可以实现一个数组来获取标题。

回到最初的问题(4年后) ,而不是重建您自己的节头,iOS 可以简单地调用您(与 will DisplayHeaderView: forSection:)后,它已经构建了默认的一个。例如,我想在节头的右边添加一个图形按钮:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
UITableViewHeaderFooterView * header = (UITableViewHeaderFooterView *) view;
if (header.contentView.subviews.count >  0) return; //in case of reuse
CGFloat rightEdge = CGRectGetMaxX(header.contentView.bounds);
UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(rightEdge - 44, 0, 44, CGRectGetMaxY(header.contentView.bounds))];
[button setBackgroundImage:[UIImage imageNamed:@"graphIcon"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(graphButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
[view addSubview:button];
}

Swift 3版本的 Lochana 和 estemendoza 回答:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {


let view = UIView(frame: CGRect(x:0, y:0, width:tableView.frame.size.width, height:18))
let label = UILabel(frame: CGRect(x:10, y:5, width:tableView.frame.size.width, height:18))
label.font = UIFont.systemFont(ofSize: 14)
label.text = "This is a test";
view.addSubview(label);
view.backgroundColor = UIColor.gray;
return view


}

此外,请注意,您还必须执行:

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

其他的答案在重新创建默认的头视图方面做得很好,但是实际上并没有回答你的主要问题:

有没有什么方法可以得到默认的部分标题?

有一种方法——只需在委托中实现 tableView:willDisplayHeaderView:forSection:。默认的头视图将被传递到第二个参数中,从那里您可以将其强制转换为 UITableViewHeaderFooterView,然后根据需要添加/更改子视图。

Obj-C

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView *)view;


// Do whatever with the header view... e.g.
// headerView.textLabel.textColor = [UIColor whiteColor]
}

斯威夫特

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)
{
let headerView = view as! UITableViewHeaderFooterView


// Do whatever with the header view... e.g.
// headerView.textLabel?.textColor = UIColor.white
}
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
if([view isKindOfClass:[UITableViewHeaderFooterView class]]){


UITableViewHeaderFooterView *headerView = view;


[[headerView textLabel] setTextColor:[UIColor colorWithHexString:@"666666"]];
[[headerView textLabel] setFont:[UIFont fontWithName:@"fontname" size:10]];
}
}

如果你想在你的部分标题中改变 textLabel 的字体,你需要在 will DisplayHeaderView 中进行。要设置文本,可以在 viewForHeaderInSection 或 titleForHeaderInSection 中进行。祝你好运!

调用此委托方法

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{


return @"Some Title";
}

这将提供一个机会,自动添加一个动态标题的默认标题。

您可以使用可重用和可定制的页眉/页脚。

Https://github.com/sourov2008/uitableviewcustomheaderfootersection

使用 tableView: willDisplayHeaderView:自定义将要显示的视图。

这使您能够获取已经为头视图创建的视图并对其进行扩展,而不必自己重新创建整个头视图。

下面的示例基于 BOOL 为标题部分着色,并向标题添加一个详细的文本元素。

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
//    view.tintColor = [UIColor colorWithWhite:0.825 alpha:1.0]; // gray
//    view.tintColor = [UIColor colorWithRed:0.825 green:0.725 blue:0.725 alpha:1.0]; // reddish
//    view.tintColor = [UIColor colorWithRed:0.925 green:0.725 blue:0.725 alpha:1.0]; // pink


// Conditionally tint the header view
BOOL isMyThingOnOrOff = [self isMyThingOnOrOff];


if (isMyThingOnOrOff) {
view.tintColor = [UIColor colorWithRed:0.725 green:0.925 blue:0.725 alpha:1.0];
} else {
view.tintColor = [UIColor colorWithRed:0.925 green:0.725 blue:0.725 alpha:1.0];
}


/* Add a detail text label (which has its own view to the section header… */
CGFloat xOrigin = 100; // arbitrary
CGFloat hInset = 20;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(xOrigin + hInset, 5, tableView.frame.size.width - xOrigin - (hInset * 2), 22)];


label.textAlignment = NSTextAlignmentRight;


[label setFont:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]
label.text = @"Hi.  I'm the detail text";


[view addSubview:label];
}

Swif 4.2

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
guard let header = view as? UITableViewHeaderFooterView else { return }


header.textLabel?.textAlignment = .center // for all sections


switch section {
case 1:  //only section No.1
header.textLabel?.textColor = .black
case 3:  //only section No.3
header.textLabel?.textColor = .red
default: //
header.textLabel?.textColor = .yellow
}
}

完整的2019示例复制和粘贴

第一次在故事板上设置“分组”: 它必须发生在初始时间,你不能真的设置它以后,所以更容易记住在故事板上这样做:

enter image description here

接下来,

由于 Apple bug,必须实现 页眉高度

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

如果你没有 heightForHeaderInSection调用的话,苹果公司十年来一直存在一个漏洞,那就是它不会显示第一个头文件(也就是索引0)。

所以,tableView.sectionHeaderHeight = 70根本不起作用,坏了

设定一个框架没有任何意义:

viewForHeaderInSection中,只需创建一个 UIView ()。

如果您使用 UIView (frame...),那么/一事无成是没有意义的,因为 iOS 只是根据表来设置视图的大小。

所以 viewForHeaderInSection的第一行就是简单的 let view = UIView(),这就是返回的视图。

func tableView(_ tableView: UITableView,
viewForHeaderInSection section: Int) -> UIView? {
let view = UIView()
    

let l = UILabel()
view.addSubview(l)
l.bindEdgesToSuperview()
l.backgroundColor = .systemOrange
l.font = UIFont.systemFont(ofSize: 15)
l.textColor = .yourClientsFavoriteColor
    

switch section {
case 0:
l.text =  "First section on screen"
case 1:
l.text =  "Here's the second section"
default:
l.text =  ""
}
    

return view
}

就是这样,其他的都是浪费时间。

又一个“挑剔”的苹果问题。


上面使用的方便扩展是:

extension UIView {
    

// incredibly useful:
    

func bindEdgesToSuperview() {
        

guard let s = superview else {
preconditionFailure("`superview` nil in bindEdgesToSuperview")
}
        

translatesAutoresizingMaskIntoConstraints = false
leadingAnchor.constraint(equalTo: s.leadingAnchor).isActive = true
trailingAnchor.constraint(equalTo: s.trailingAnchor).isActive = true
topAnchor.constraint(equalTo: s.topAnchor).isActive = true
bottomAnchor.constraint(equalTo: s.bottomAnchor).isActive = true
}
}

Swift 4.2

在 Swift 4.2中,表的名称略有更改。

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 18))
let label = UILabel(frame: CGRect(x: 10, y: 5, width: tableView.frame.size.width, height: 18))
label.font = UIFont.systemFont(ofSize: 14)
label.text = list.objectAtIndex(section) as! String
view.addSubview(label)
view.backgroundColor = UIColor.gray // Set your background color


return view
}

代号 Swift 5

我们可以通过使用两个 tableView 委托函数来实现这一点:

我们可以为这一部分定制高度:

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

然后我们可以创建自定义头文件:

 func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let sectionV = UIView.init(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 48) )
let titleLbl = UILabel.init(frame: CGRect(x: 25, y: 24, width: tableView.frame.width-150, height: 20) )
let viewAllBtn = UIButton.init(frame: CGRect(x: tableView.frame.width-150, y: 15, width: self.view.frame.width - titleLbl.frame.width, height: 45))
viewAllBtn.titleLabel?.font = UIFont.systemFont(ofSize: 15)
viewAllBtn.setTitle("View All", for: .normal)
viewAllBtn.setTitleColor(.systemBlue, for: .normal)
viewAllBtn.tag = section
titleLbl.text = dashboardTempData.data?[section].title
titleLbl.font = UIFont.systemFont(ofSize: 21, weight: UIFont.Weight.medium)
sectionV.backgroundColor = .systemBackground
sectionV.addSubview(titleLbl)
sectionV.addSubview(viewAllBtn)
sectionV.bringSubviewToFront(viewAllBtn)
return sectionV
}

它将创建一个 Label 和 Button,其节头高度为49