web-dev-qa-db-ja.com

UITableViewヘッダセクションをカスタマイズする

セクションごとにUITableViewヘッダーをカスタマイズしたいです。これまでのところ、私は実装しました

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

このUITabelViewDelegateメソッド。私がやりたいのは、各セクションの現在のヘッダを取得し、UILabelをサブビューとして追加することです。

これまでのところ、私はそれを達成することはできません。なぜなら、デフォルトのセクションヘッダを取得するためのものが見つからなかったからです。最初の質問、デフォルトのセクションヘッダを取得する方法はありますか？

それが不可能な場合、私はUIViewであるコンテナビューを作成する必要がありますが、今回はデフォルトの背景色、影の色などを設定する必要があります。

各セクションヘッダーに対してこれらのデフォルト値を取得する方法を教えてください。

皆さん、ありがとうございました。

iosobjective-cswiftuitableview
137
limon

これを試すことができます：

 -(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;
}
278
Lochana Ragupathy

tableView :viewForHeaderInSection:を使用して選択された答えは正しいです。

ここでヒントを共有するだけです。

Storyboard/xibを使用している場合は、別のプロトタイプセルを作成してそれを "section cell"に使用できます。ヘッダを設定するためのコードは、行セルに対して設定する方法と似ています。

- (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;
}
45
samwize

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
}
29
estemendoza

デフォルトのヘッダビューを使用している場合は、その上に表示されているテキストのみを変更できます。

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

Swiftの場合：

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

ビューをカスタマイズしたい場合は、新しいビューを自分で作成する必要があります。

17
Mert

なぜ UITableViewHeaderFooterView を使わないのですか？

11
user836773

HeaderInSectionが表示されない場合は、これを試すことができます。

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

これは与えられたセクションのヘッダの高さを返します。

8
Kathen

これを試して......

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
}
5
Gigi

LochanaとestemendozaのSwift 3版は答えます：

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;
}
5
Adam
-(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;
}
4
Boris Nikolić

これが最も簡単な解決策です。次のコードは、カスタムセクションヘッダーを作成するために直接使用できます。

 -(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です。

4
Anish Kumar

他の答えはデフォルトのヘッダビューを作り直すのに良い仕事をします、しかし実際にあなたの主な質問に答えないでください：

デフォルトのセクションヘッダを取得する方法はありますか？

方法があります - ちょうどあなたのデリゲートに tableView:willDisplayHeaderView:forSection: を実装するだけです。デフォルトのヘッダービューは2番目のパラメータに渡され、そこからそれを 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
}
4
Craig Brown

私があなただったら、含むNSStringを与えられたUIViewを返すメソッドを作るでしょう。例えば

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

このメソッドの実装では、UIViewを作成し、設定したいプロパティを含むUILiewをそれに追加し、そしてもちろんそのタイトルを与えられたものに設定します。

2
cpprulez
- (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のフォントを変更したい場合は、willDisplayHeaderViewで変更します。テキストを設定するには、viewForHeaderInSectionまたはtitleForHeaderInSectionで設定できます。がんばろう！

2
John Ottenlips

SwiftにTable View Headerを魔法のように追加します

最近私はこれを試しました。

私は全体のUITableViewの中でたった一つのヘッダを必要としていました。

私がTableViewの上にUIImageViewを欲しがったように。だから私はUITableViewCellの上にUIImageViewを追加し、自動的にそれはtableViewHeaderとして追加されました。これで、ImageViewをViewControllerに接続してImageを追加しました。

私が初めてこのようなことをしたので私は混乱しました。だから私の混乱を明確にするためにMainStoryBoardのxmlフォーマットを開き、Image Viewがヘッダとして追加されているのを見つけた。

それは私のために働きました。 xCodeとSwiftに感謝します。

1
Somir Saikia

swift 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
    }
}
1
flowGlen

Swiftでの@ samwizeの解決策（だから彼を支持しなさい！）ヘッダー/フッターセクションにも同じリサイクルメカニズムを使用しています。

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

    return settingsHeaderSectionCell
}
1
Javier Calatrava Llavería

このデリゲートメソッドを呼び出す

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

return @"Some Title";
}

これは動的なタイトルを持つデフォルトのヘッダを自動的に追加する機会を与えます。

再利用可能でカスタマイズ可能なヘッダー/フッターを使用することができます。

https://github.com/sourov2008/UITableViewCustomHeaderFooterSection

1
Shourob Datta

元の質問（4年後）に戻ると、独自のセクションヘッダーを再構築するのではなく、iOSはデフォルトのものを作成した直後に（willDisplayHeaderView：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];
}
0
mackworth

表示されようとしているときにビューをカスタマイズするには、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];
}
0
Alex Zavatone

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
}

ヘッダのタイトルを取得するための配列を実装することができます。

0
abhishek chakrabartti

titleForHeaderInSection以外に、ヘッダー、フッターの表示を単純に変更できます。ここで私のコメントをチェックしてください： セクションタイトルを失うことなくUITableセクションのbackgroundColorを変更します

0
dimpiax