UITableView-セクションヘッダーの色を変更する


回答:


393

うまくいけば、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ます。


17
また、self.tableView.sectionHeaderHeightを使用してセクションヘッダーのサイズを調整することもできます。そうしないと、セクションタイトルとして表示するテキストが見づらくなる場合があります。
Tony Lenzi、2010年

[UIColor xxxColor]フォトショップから入手できるようなカスタムカラーを試してみたところ、問題なく動作します(したがって、を使用するとUIColor red:green:blue:alpha:、色は白になります。何か問題があるのでしょうか?
Matej

別の質問を投稿してください。お手伝いします。ソースコードを含めます。
Alex Reynolds

12
この答えは(正しい間は)、コンテンツのないUIViewを返すだけです。
Greg M. Krsak 2013年

7
これはかなり時代遅れの情報であり、単に別のビューを作成することは最良の答えではありません。アイデアは、適切なビューを取得し、その色または色合いを変更することです。willDisplayHeaderViewを使用した以下の答えは、はるかに優れたアプローチです。
Alex Zavatone 2015年

741

これは古い質問ですが、答えを更新する必要があると思います。

この方法では、独自のカスタムビューを定義および作成する必要はありません。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
}

2
これがSDKに追加されたことさえ知りませんでした。鮮やかさ!絶対に正しい答えです。
JRod

1
OP-これに対する承認済みの回答を更新してください。古いアプローチよりもはるかにクリーンです。
カイルクレッグ2014年

10
これは私にはうまくいかないようです。テキストの色は機能しますが、ヘッダーの背景の色合いは機能しません。私はiOS
7.0.4を使用してい

10
user1639164、header.backgroundView.backgroundColor = [UIColor blackColor];を使用できます。ヘッダーの背景の色合いを設定します。
慭慭流觞

2
@ケント明らかに久しぶりですが、将来の人々のためにheader.contentView.backgroundColor = [UIColor blackColor];オプションは不透明なヘッダーを提供します
SparkyRobinson

98

テキストの色を変更する方法は次のとおりです。

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

18
ありがとうございましたDoctorG-これは役に立ちました。ところで、dataSourceによって提供される既存のラベルを維持するために、2行目を次のように変更しました。label.text = [tableView.dataSource tableView:tableView titleForHeaderInSection:section]; 悪い形かもしれませんが、私にとってはうまくいきました。多分これは誰かを助けることができます。
JJ Rohrer、2011年

1
@JJテーブルのセクションヘッダーを定義するために最初に使用するのと同じメソッドを呼び出すので、このフォームは実際には問題ありません。
Tim

3
自動リリースを削除して、明示的なリリースに変更しました。UITableViewフォーマットメソッドは何度も呼び出されます。可能な場合は自動解放の使用を避けます。
memmons 2011年

@ハルコニアンは、提出された回答を変更するのではなく、回答へのコメントの変更を推奨してください。他の人のコードを編集して変更することは悪い形だと考えられています。スペルミス、不適切な書式設定と文法は公平なゲームです。
ティンマン

1
addSubview:UILabelの代わりに、viewForHeaderInSectionでUILabelを返すだけです。UILable is-a UIView already :)
Nas Banov

52

カスタム色のヘッダーが必要な場合、これを行うことができます。

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

このソリューションはiOS 6.0以降でうまく機能します。


1
うーん...それは私にはうまくいきません。iOS 6シミュレーターとiOS 7デバイスを試しました。この方法でテストしましたか?どこに配置すればよいですか?
Maxim Kholyavkin、2014年

アプリケーションデリゲートのapplication:didFinishLaunchingWithOptions:メソッドで実行できます。
Leszek Zarna 2014年

私のせい:私はところでUITableViewStyleGroupedながら、この方法を使用しようとしました:この方法を使用すべき変更テキストの色にstackoverflow.com/a/20778406/751932
マキシムKholyavkin

カスタムUIViewにある場合は、単に-initメソッドに配置します。
felixwcf 2016年

31

次のソリューションは、iOS 8以降のSwift 1.2で機能します

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()

}

22

UITableViewHeaderFooterViewの背景色の設定は廃止されました。contentView.backgroundColor代わりに使用してください。


21

デリゲートからこのコードを追加することを忘れないでください。そうしないと、ビュー/ラベルの高さに応じて、ビューが切り取られたり、テーブルの後ろに表示される場合があります。

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

あなたはDJのS.によってiOS6以降の回答に従うならばこれはもう必要ありません
Bjinse

21

main.storyboardで約2秒で実行できます。

  1. テーブルビューを選択
  2. 属性インスペクターに移動
  3. リストアイテム
  4. 下にスクロールして[小見出しを表示]を表示します。
  5. 「背景」を変更

こちらをご覧ください


18

カスタムビューを作成したくない場合は、次のように色を変更することもできます(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;
    }
}

13

セクション領域の背景とテキストの色を設定します:(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]];
    }
}

13

スウィフト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)
} 

これは完璧に機能しました。それもあなたを助けることを願っています!


UITableViewHeaderFooterViewの背景色の設定は廃止されました。代わりに、目的の背景色を使用してカスタムUIViewをbackgroundViewプロパティに設定する必要があります。
mojtaba al moussawi

10

ヘッダービューで画像を追加する方法は次のとおりです。

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

8

iOS8(Beta)と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

}

(プロジェクトで通常のUIViewControllerの代わりにUITableViewControllerを使用しているため、「オーバーライド」がありますが、セクションヘッダーの色を変更する必要はありません)

ヘッダーのテキストは引き続き表示されます。セクションヘッダーの高さを調整する必要があることに注意してください。

幸運を。


6

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

}

5

私はその答えを知っています、念のため、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
    }

4

iOS 8以降

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

4

Swift 3を使用した@Dj S回答に基づいています。これは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
}

3

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

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

3

このコードはそれほど悪くないと思います。

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
}

3

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
    }

1
これはiOS 13でもう機能していないようです
GarySabo '12

4
iOS 13では、「view.backgroundColor」を「view.tintColor」に置き換えます。
ボグダン・ラズバン

2

iOS 7.0.4では、独自のXIBを使用してカスタムヘッダーを作成しました。以前はここで言及したことは何もありませんでした。これはUITableViewHeaderFooterViewのサブクラスである必要があり、dequeueReusableHeaderFooterViewWithIdentifier:クラスは背景色に関して非常に頑固であるようです。最後に、customBackgroudViewという名前のUIView(コードでもIBでもかまいません)を追加し、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;
}

2

ヘッダービューのレイヤーの色を変更するだけ

-(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
}


2

誰かが迅速を必要とするならば、タイトルを保ちます:

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
}

2

Xcodeからコンソールログを介してメッセージを受け取りました

[TableView] UITableViewHeaderFooterViewの背景色の設定は廃止されました。代わりに、必要な背景色を使用してカスタムUIViewをbackgroundViewプロパティに設定してください。

次に、新しいUIViewを作成して、HeaderViewの背景として配置します。良い解決策ではありませんが、Xcodeが言ったように簡単です。


2

私の場合、それはこのように機能しました:

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

2

背景ビューの背景色を設定するだけです:

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

1

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

魅力的な作品!


1

Swift 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
}

これがお役に立てば幸いです:]


0

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)同様に動作しますが、あなたは別のデリゲートメソッドを実装せずにこれをacheiveすることができます。あなたのfunc tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?方法では、機能していないview.contentView.backgroundColor = UIColor.white代わりに使用できますview.backgroundView?.backgroundColor = UIColor.white。(私はそれbackgroundViewがオプションであることを知っていますが、それが存在する場合でも、これは実装せずに動作しませんwillDisplayHeaderView

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.