Jak dostosować kolory tła/obramowania zgrupowanej komórki widoku tabeli?

Wiem, że odpowiedzi dotyczą zmiany zgrupowanych komórek tabeli, ale na wypadek, gdyby ktoś chciał również zmienić kolor tła tableview:

Nie tylko musisz ustawić:

tableview.backgroundColor = color;

Musisz również zmienić lub pozbyć się widoku tła:

tableview.backgroundView = nil;  

Po pierwsze dzięki za ten kod. Zrobiłem kilka zmian rysowania w tej funkcji, aby usunąć problem z rysowaniem narożników.

-(void)drawRect:(CGRect)rect 
{
    // Drawing code

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(c, [fillColor CGColor]);
    CGContextSetStrokeColorWithColor(c, [borderColor CGColor]);
    CGContextSetLineWidth(c, 2);

    if (position == CustomCellBackgroundViewPositionTop) {

        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, maxy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, maxy, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, maxy);

        // Close the path
        CGContextClosePath(c);
        // Fill & stroke the path
        CGContextDrawPath(c, kCGPathFillStroke);        
        return;
    } else if (position == CustomCellBackgroundViewPositionBottom) {

        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny ;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddArcToPoint(c, minx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, maxx, miny, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, miny);
        // Close the path
        CGContextClosePath(c);
        // Fill & stroke the path
        CGContextDrawPath(c, kCGPathFillStroke);    
        return;
    } else if (position == CustomCellBackgroundViewPositionMiddle) {
        CGFloat minx = CGRectGetMinX(rect) , maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny ;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddLineToPoint(c, maxx, miny);
        CGContextAddLineToPoint(c, maxx, maxy);
        CGContextAddLineToPoint(c, minx, maxy);

        CGContextClosePath(c);
        // Fill & stroke the path
        CGContextDrawPath(c, kCGPathFillStroke);    
        return;
    }
}

Dziękuję za Kod, właśnie tego szukałem. Dodałem również następujący kod do kodu Vimala, aby zaimplementować przypadek CustomCellBackgroundViewPositionsingle cell. (Wszystkie cztery rogi są zaokrąglone.)

else if (position == CustomCellBackgroundViewPositionSingle)
{
        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , midy = CGRectGetMidY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, midy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, midy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, minx, maxy, minx, midy, ROUND_SIZE);

        // Close the path
        CGContextClosePath(c);
        // Fill & stroke the path
        CGContextDrawPath(c, kCGPathFillStroke);                
        return;     
}

Jedna rzecz, na którą natknąłem się z powyższym kodem CustomCellBackgroundView od Mike ' a Akersa, który może być przydatny dla innych:

cell.backgroundView nie jest automatycznie przerysowywane, gdy komórki są ponownie używane, a zmiany pozycji var w widoku tła nie wpływają na ponownie użyte komórki. Oznacza to, że długie tabele będą nieprawidłowo rysowane cell.backgroundViews ze względu na ich pozycje.

Aby to naprawić bez konieczności tworzenia nowego widoku tła za każdym razem, gdy wyświetlany jest wiersz, wywołaj [cell.backgroundView setNeedsDisplay] na końcu -[UITableViewController tableView:cellForRowAtIndexPath:]. Lub dla więcej rozwiązań wielokrotnego użytku, nadpisuje Ustawiacz pozycji CustomCellBackgroundView, aby zawierał [self setNeedsDisplay].

Dzięki za ten bardzo pomocny post. Na wypadek, gdyby ktoś tam (jak ja!) chce mieć całkowicie puste tło komórki zamiast dostosowywania go za pomocą obrazów / tekstu/innych treści w IB i nie może dowiedzieć się, jak do cholery pozbyć się głupiego obramowania/wypełnienia/tła, mimo że ustawiłeś go na wyczyszczenie w IB... oto kod, który zadziałał!

- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {

    static NSString *cellId = @"cellId";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellId];
    if (cell == nil) {
        [[NSBundle mainBundle] loadNibNamed:@"EditTableViewCell" owner:self options:nil];
        cell = cellIBOutlet;
        self.cellIBOutlet = nil;
    }

    cell.backgroundView = [[[UIView alloc] initWithFrame: CGRectZero] autorelease];
    [cell.backgroundView setNeedsDisplay];

    ... any other cell customizations ...

    return cell;
}

Mam nadzieję, że to pomoże komuś innemu! Wygląda na to, że działa jak urok.

Wielkie podziękowania dla wszystkich, którzy opublikowali swój kod. Jest to bardzo przydatne.

Uzyskałem podobne rozwiązanie, aby zmienić kolor podświetlenia dla zgrupowanych komórek widoku tabeli. Zasadniczo selectedBackgroundView UITableViewCell ' s selectedBackgroundView (nie backgroundView). Który nawet na iPhone OS 3.0 nadal potrzebuje tego rozwiązania PITA, o ile mogę powiedzieć...

Poniższy kod zawiera zmiany dotyczące renderowania podświetlenia gradientem zamiast jednego jednolitego koloru. Również renderowanie obramowania jest usuwane. Smacznego.

//
//  CSCustomCellBackgroundView.h
//

#import <UIKit/UIKit.h>

typedef enum  
{
    CustomCellBackgroundViewPositionTop, 
    CustomCellBackgroundViewPositionMiddle, 
    CustomCellBackgroundViewPositionBottom,
    CustomCellBackgroundViewPositionSingle,
    CustomCellBackgroundViewPositionPlain
} CustomCellBackgroundViewPosition;

@interface CSCustomCellBackgroundView : UIView 
{
    CustomCellBackgroundViewPosition position;
 CGGradientRef gradient;
}

@property(nonatomic) CustomCellBackgroundViewPosition position;

@end



//
//  CSCustomCellBackgroundView.m
//

#import "CSCustomCellBackgroundView.h"



#define ROUND_SIZE 10


static void addRoundedRectToPath(CGContextRef context, CGRect rect,
         float ovalWidth,float ovalHeight);


@implementation CSCustomCellBackgroundView


@synthesize position;

- (BOOL) isOpaque 
{
    return NO;
}

- (id)initWithFrame:(CGRect)frame 
{
    if (self = [super initWithFrame:frame]) 
 {
        // Initialization code
  const float* topCol = CGColorGetComponents([[UIColor redColor] CGColor]);
  const float* bottomCol = CGColorGetComponents([[UIColor blueColor] CGColor]);

  CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
  /*
  CGFloat colors[] =
  {
   5.0 / 255.0, 140.0 / 255.0, 245.0 / 255.0, 1.00,
   1.0 / 255.0,  93.0 / 255.0, 230.0 / 255.0, 1.00,
  };*/
  CGFloat colors[]=
  {
   topCol[0], topCol[1], topCol[2], topCol[3],
   bottomCol[0], bottomCol[1], bottomCol[2], bottomCol[3]
  };
  gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
  CGColorSpaceRelease(rgb);
    }
    return self;
}


-(void)drawRect:(CGRect)rect 
{
    // Drawing code

    CGContextRef c = UIGraphicsGetCurrentContext();

    if (position == CustomCellBackgroundViewPositionTop) 
 {

        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, maxy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, maxy, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, maxy);

        // Close the path
        CGContextClosePath(c);

  CGContextSaveGState(c);
  CGContextClip(c);
  CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
  CGContextRestoreGState(c);

        return;
    } 
 else if (position == CustomCellBackgroundViewPositionBottom) 
 {

        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddArcToPoint(c, minx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, maxx, miny, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, miny);
        // Close the path
        CGContextClosePath(c);

  CGContextSaveGState(c);
  CGContextClip(c);
  CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
  CGContextRestoreGState(c);

        return;
    } 
 else if (position == CustomCellBackgroundViewPositionMiddle) 
 {
        CGFloat minx = CGRectGetMinX(rect) , maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddLineToPoint(c, maxx, miny);
        CGContextAddLineToPoint(c, maxx, maxy);
        CGContextAddLineToPoint(c, minx, maxy);
  // Close the path
        CGContextClosePath(c);

  CGContextSaveGState(c);
  CGContextClip(c);
  CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
  CGContextRestoreGState(c);

        return;
    }
 else if (position == CustomCellBackgroundViewPositionSingle)
 {
        CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
        CGFloat miny = CGRectGetMinY(rect) , midy = CGRectGetMidY(rect) , maxy = CGRectGetMaxY(rect) ;
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, midy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, midy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, minx, maxy, minx, midy, ROUND_SIZE);
        // Close the path
        CGContextClosePath(c);              

  CGContextSaveGState(c);
  CGContextClip(c);
  CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
  CGContextRestoreGState(c);

        return;         
 } 
 else if (position == CustomCellBackgroundViewPositionPlain) {
    CGFloat minx = CGRectGetMinX(rect);
    CGFloat miny = CGRectGetMinY(rect), maxy = CGRectGetMaxY(rect) ;
    CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    return;
}

}

- (void)dealloc 
{
    CGGradientRelease(gradient);
    [super dealloc];
}


- (void) setPosition:(CustomCellBackgroundViewPosition)inPosition
{
 if(position != inPosition)
 {
  position = inPosition;
  [self setNeedsDisplay];
 }
}

@end


static void addRoundedRectToPath(CGContextRef context, CGRect rect,
         float ovalWidth,float ovalHeight)

{
    float fw, fh;

    if (ovalWidth == 0 || ovalHeight == 0) {// 1
        CGContextAddRect(context, rect);
        return;
    }

    CGContextSaveGState(context);// 2

    CGContextTranslateCTM (context, CGRectGetMinX(rect),// 3
         CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);// 4
    fw = CGRectGetWidth (rect) / ovalWidth;// 5
    fh = CGRectGetHeight (rect) / ovalHeight;// 6

    CGContextMoveToPoint(context, fw, fh/2); // 7
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);// 8
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);// 9
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);// 10
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); // 11
    CGContextClosePath(context);// 12

    CGContextRestoreGState(context);// 13
}

Możesz dostosować kolor obramowania, ustawiając

tableView.separatorColor

Aby zmienić kolor obramowania widoku tabeli:

W.h:

#import <QuartzCore/QuartzCore.h>

W .m:

tableView.layer.masksToBounds=YES;
tableView.layer.borderWidth = 1.0f;
tableView.layer.borderColor = [UIColor whiteColor].CGColor;

To zadanie można łatwo wykonać używając PrettyKit dodając około 5 linii kodu. Jeśli używasz nib plików lub storyboard, również nie zapomnij zastosować Ten mały hack . Kiedy używasz tego podejścia, powinieneś podklasować swoją komórkę z PrettyTableViewCell:

#import <PrettyKit/PrettyKit.h>

@class RRSearchHistoryItem;

@interface RRSearchHistoryCell : PrettyTableViewCell

Oto przykład mojego cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  static NSString *cellIdentifier = @"RRSearchHistoryCell";

  RRSearchHistoryCell *cell = (RRSearchHistoryCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

  if ( cell == nil ) {

    NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"RRSearchHistoryCell" owner:self options:nil];
    cell = topLevelObjects[0];
    cell.gradientStartColor = RGB(0xffffff);
    cell.gradientEndColor = RGB(0xf3f3f3);

  }

  RRSearchHistoryItem *item = _historyTableData[indexPath.row];
  [cell setHistoryItem:item];


  [cell prepareForTableView:tableView indexPath:indexPath];

  return cell;
}

Miałem z tym problemy i próbowałem wielu kombinacji rzeczy, ponieważ zauważyłem, że dla niektórych komórek działa dobrze, ale nie dla innych.

O dziwo dowiedziałem się, że można ustawić komórkę.backgroundColor do lightGrayColor i wszystko działa idealnie - ale blueColor sprawiał mi problemy z nie aktualizowaniem zewnętrznych krawędzi.

Chyba, że jest to naprawdę ważne, aby używać zielonego-być może warto spróbować tego. Może być tak, że jest to funkcja, dzięki której ludzie mogą korzystać zaznaczone są tylko kolory szare przy wskazywaniu komórki.