วิธีปรับแต่งสีพื้นหลัง / เส้นขอบของเซลล์มุมมองตารางที่จัดกลุ่ม


114

ฉันต้องการปรับแต่งทั้งพื้นหลังและสีขอบของ UITableView แบบจัดกลุ่ม

ฉันสามารถปรับแต่งสีพื้นหลังได้โดยใช้สิ่งต่อไปนี้:

tableView.contentView.backgroundColor = [UIColor greenColor];

แต่สีเส้นขอบยังคงเป็นสิ่งที่ฉันไม่รู้ว่าจะเปลี่ยนอย่างไร

ฉันจะปรับแต่งมุมมองตารางแบบจัดกลุ่มทั้งสองลักษณะนี้ได้อย่างไร


เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าได้ตั้งค่ามุมมอง IBOutlet ของ UITableViewController ของคุณไม่เช่นนั้นความโปร่งใสจะไม่ทำงาน!
Casebash

1
ไม่แน่ใจว่าคุณมีสายรหัสในการทำงานอย่างไร tableView ดูเหมือนจะไม่มีคุณสมบัติ contentView
Greg Maletic

5
เธรดนี้เกี่ยวกับพื้นหลังของ UITableViewCellและไม่เกี่ยวกับ UITableView (เหมือนคำถามที่แนะนำ) คำตอบที่แท้จริงคือคำตอบของ @ dizy
nacho4d

คำตอบ:


100

อัปเดต:ใน iPhone OS 3.0 และใหม่กว่าUITableViewCellมีbackgroundColorคุณสมบัติที่ทำให้สิ่งนี้ง่ายมาก (โดยเฉพาะเมื่อใช้ร่วมกับโปรแกรม[UIColor colorWithPatternImage:]เริ่มต้น) แต่ฉันจะทิ้งคำตอบเวอร์ชัน 2.0 ไว้ที่นี่สำหรับทุกคนที่ต้องการ ...


มันยากกว่าที่ควรจะเป็นจริงๆ นี่คือวิธีที่ฉันทำเมื่อต้องทำ:

คุณต้องตั้งค่าคุณสมบัติ backgroundView ของ UITableViewCell เป็น UIView ที่กำหนดเองซึ่งวาดเส้นขอบและพื้นหลังด้วยสีที่เหมาะสม มุมมองนี้ต้องสามารถวาดเส้นขอบใน 4 โหมดที่แตกต่างกันโดยปัดที่ด้านบนสำหรับเซลล์แรกในส่วนหนึ่งโดยปัดที่ด้านล่างสำหรับเซลล์สุดท้ายในส่วนโดยไม่มีมุมโค้งมนสำหรับเซลล์ที่อยู่ตรงกลางส่วน และปัดเศษทั้ง 4 มุมสำหรับส่วนที่มีเซลล์เดียว

น่าเสียดายที่ฉันไม่สามารถหาวิธีตั้งค่าโหมดนี้โดยอัตโนมัติได้ดังนั้นฉันจึงต้องตั้งค่าในเมธอด -cellForRowAtIndexPath ของ UITableViewDataSource

เป็น PITA จริง แต่ฉันได้ยืนยันกับวิศวกรของ Apple แล้วว่าตอนนี้เป็นวิธีเดียว

อัปเดตนี่คือรหัสสำหรับมุมมอง bg ที่กำหนดเองนั้น มีจุดบกพร่องในการวาดภาพที่ทำให้มุมโค้งมนดูตลกเล็กน้อย แต่เราย้ายไปใช้การออกแบบที่แตกต่างออกไปและทิ้งพื้นหลังที่กำหนดเองก่อนที่ฉันจะมีโอกาสแก้ไข สิ่งนี้อาจมีประโยชน์มากสำหรับคุณ:

//
//  CustomCellBackgroundView.h
//
//  Created by Mike Akers on 11/21/08.
//  Copyright 2008 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>

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

@interface CustomCellBackgroundView : UIView {
    UIColor *borderColor;
    UIColor *fillColor;
    CustomCellBackgroundViewPosition position;
}

    @property(nonatomic, retain) UIColor *borderColor, *fillColor;
    @property(nonatomic) CustomCellBackgroundViewPosition position;
@end

//
//  CustomCellBackgroundView.m
//
//  Created by Mike Akers on 11/21/08.
//  Copyright 2008 __MyCompanyName__. All rights reserved.
//

#import "CustomCellBackgroundView.h"

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

@implementation CustomCellBackgroundView
@synthesize borderColor, fillColor, position;

- (BOOL) isOpaque {
    return NO;
}

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(c, [fillColor CGColor]);
    CGContextSetStrokeColorWithColor(c, [borderColor CGColor]);

    if (position == CustomCellBackgroundViewPositionTop) {
        CGContextFillRect(c, CGRectMake(0.0f, rect.size.height - 10.0f, rect.size.width, 10.0f));
        CGContextBeginPath(c);
        CGContextMoveToPoint(c, 0.0f, rect.size.height - 10.0f);
        CGContextAddLineToPoint(c, 0.0f, rect.size.height);
        CGContextAddLineToPoint(c, rect.size.width, rect.size.height);
        CGContextAddLineToPoint(c, rect.size.width, rect.size.height - 10.0f);
        CGContextStrokePath(c);
        CGContextClipToRect(c, CGRectMake(0.0f, 0.0f, rect.size.width, rect.size.height - 10.0f));
    } else if (position == CustomCellBackgroundViewPositionBottom) {
        CGContextFillRect(c, CGRectMake(0.0f, 0.0f, rect.size.width, 10.0f));
        CGContextBeginPath(c);
        CGContextMoveToPoint(c, 0.0f, 10.0f);
        CGContextAddLineToPoint(c, 0.0f, 0.0f);
        CGContextStrokePath(c);
        CGContextBeginPath(c);
        CGContextMoveToPoint(c, rect.size.width, 0.0f);
        CGContextAddLineToPoint(c, rect.size.width, 10.0f);
        CGContextStrokePath(c);
        CGContextClipToRect(c, CGRectMake(0.0f, 10.0f, rect.size.width, rect.size.height));
    } else if (position == CustomCellBackgroundViewPositionMiddle) {
        CGContextFillRect(c, rect);
        CGContextBeginPath(c);
        CGContextMoveToPoint(c, 0.0f, 0.0f);
        CGContextAddLineToPoint(c, 0.0f, rect.size.height);
        CGContextAddLineToPoint(c, rect.size.width, rect.size.height);
        CGContextAddLineToPoint(c, rect.size.width, 0.0f);
        CGContextStrokePath(c);
        return; // no need to bother drawing rounded corners, so we return
    }

    // At this point the clip rect is set to only draw the appropriate
    // corners, so we fill and stroke a rounded rect taking the entire rect

    CGContextBeginPath(c);
    addRoundedRectToPath(c, rect, 10.0f, 10.0f);
    CGContextFillPath(c);  

    CGContextSetLineWidth(c, 1);  
    CGContextBeginPath(c);
    addRoundedRectToPath(c, rect, 10.0f, 10.0f);  
    CGContextStrokePath(c); 
}


- (void)dealloc {
    [borderColor release];
    [fillColor release];
    [super dealloc];
}


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

คุณช่วยฉันใช้รหัสของคุณได้ไหม => stackoverflow.com/questions/7309580/…
Nielsou Hacken-Bergen

2
ทำไมไม่ใช้ seperatorColor สำหรับฉันแล้วมันให้สีทั้งเส้นคั่นระหว่างเซลล์และเส้นขอบ
Fernando Redondo

แทนที่จะใช้เส้นทางโค้ง CG drawRect นั้นฉันใช้มุมมองที่ถูกตัดโดยให้ทุกมุมโค้งมน ฉันให้ค่า Y เป็นลบสำหรับแถวที่ไม่ใช่แถวแรกและฉันทำให้มันเกินความสูงสำหรับแถวที่ไม่ใช่แถวสุดท้าย
Hafthor

34

ฉันรู้ว่าคำตอบเกี่ยวข้องกับการเปลี่ยนเซลล์ตารางที่จัดกลุ่ม แต่ในกรณีที่มีคนต้องการเปลี่ยนสีพื้นหลังของ tableview ด้วย:

คุณไม่เพียง แต่ต้องตั้งค่า:

tableview.backgroundColor = color;

คุณต้องเปลี่ยนหรือกำจัดมุมมองพื้นหลังด้วย:

tableview.backgroundView = nil;  

1
สวัสดีขอบคุณ คุณให้คำตอบที่ถูกต้องสำหรับคำถามนี้โดยเฉพาะ
GeneCode

24

ก่อนอื่นขอขอบคุณสำหรับรหัสนี้ ฉันได้ทำการเปลี่ยนแปลงรูปวาดบางส่วนในฟังก์ชันนี้เพื่อลบปัญหามุมของการวาด

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

ความกว้างของบรรทัดพร้อมโค้ดของคุณคือประมาณ 2 px เมื่อฉันพยายามตั้งค่า CGContextSetLineWidth เป็น 1 มันก็ยังหนาอยู่ ทำไมถึงเป็นแบบนี้?
Fernando Redondo

ฉันมีคำถามเดียวกัน? ทำไมมันหนากว่าระบบ
Bagusflyer

16

ขอบคุณสำหรับรหัสนี่คือสิ่งที่ฉันกำลังมองหา ฉันได้เพิ่มรหัสต่อไปนี้ลงในโค้ดของ Vimal เพื่อใช้ในกรณีของเซลล์ CustomCellBackgroundViewPositionSingle (มุมทั้งสี่โค้งมน)


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

13

สิ่งหนึ่งที่ฉันพบกับโค้ด CustomCellBackgroundView ด้านบนจาก Mike Akers ซึ่งอาจเป็นประโยชน์กับผู้อื่น:

cell.backgroundViewไม่ได้รับการวาดใหม่โดยอัตโนมัติเมื่อเซลล์ถูกนำมาใช้ซ้ำและการเปลี่ยนแปลงตำแหน่ง var ของ backgroundView จะไม่ส่งผลต่อเซลล์ที่นำมาใช้ใหม่ นั่นหมายความว่าตารางยาวจะมีการวาดcell.backgroundViewsตำแหน่งที่ไม่ถูกต้อง

ในการแก้ไขปัญหานี้โดยไม่ต้องสร้าง backgroundView ใหม่ทุกครั้งที่มีการแสดงแถวให้เรียก[cell.backgroundView setNeedsDisplay]ที่ส่วนท้ายของ-[UITableViewController tableView:cellForRowAtIndexPath:]ไฟล์. หรือสำหรับโซลูชันที่ใช้ซ้ำได้มากขึ้นให้แทนที่ตัวตั้งค่าตำแหน่งของ CustomCellBackgroundView เพื่อรวมไฟล์[self setNeedsDisplay].


ความคิดที่ดีเกี่ยวกับการแทนที่ -setPosition
Mike Akers

12

ขอบคุณสำหรับโพสต์ที่มีประโยชน์สุด ๆ นี้ ในกรณีที่ใครก็ตามที่อยู่ที่นั่น (เช่นฉัน!) ต้องการเพียงแค่มีพื้นหลังเซลล์ว่างเปล่าแทนการปรับแต่งผ่านรูปภาพ / ข้อความ / เนื้อหาอื่น ๆ ใน IB และไม่สามารถคิดได้ว่าจะกำจัดเส้นขอบใบ้ / ช่องว่าง / พื้นหลังแม้ว่าคุณจะตั้งค่าให้ชัดเจนใน IB ... นี่คือรหัสที่ฉันใช้นั่นเป็นเคล็ดลับ!


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

หวังว่าจะช่วยคนอื่นได้! ดูเหมือนว่าจะทำงานได้อย่างมีเสน่ห์


มีหน่วยความจำรั่วในโซลูชันของคุณ คุณต้องปล่อยมุมมองที่คุณตั้งค่าไว้cell.backgroundViewโดยอัตโนมัติ
Cameron Spickert

7

ขอบคุณมากสำหรับทุกคนที่โพสต์รหัสของพวกเขา สิ่งนี้มีประโยชน์มาก

ฉันได้วิธีแก้ปัญหาที่คล้ายกันเพื่อเปลี่ยนสีไฮไลต์สำหรับเซลล์มุมมองตารางที่จัดกลุ่ม โดยพื้นฐานแล้ว UITableViewCell selectedBackgroundView (ไม่ใช่ backgroundView) ซึ่งแม้แต่บน iPhone OS 3.0 ก็ยังต้องการโซลูชัน PITA นี้เท่าที่ฉันบอกได้ ...

โค้ดด้านล่างนี้มีการเปลี่ยนแปลงสำหรับการแสดงผลไฮไลต์ด้วยการไล่ระดับสีแทนสีทึบสีเดียว นอกจากนี้การแสดงเส้นขอบจะถูกลบออก สนุก.

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

นี่เป็นสิ่งที่ยอดเยี่ยมจริงๆและสิ่งที่ฉันกำลังมองหา ฉันต้องการสองตัวเลือกแม้ว่า ตั้งค่า bg เป็นสีไล่ระดับหรือสีทึบ ฉันตั้งค่าสีทึบเพียงแค่ตั้งค่าสีไล่ระดับทั้งสองให้เป็นสีทึบเดียวกันกับที่ฉันต้องการ แม้ว่าจะมีการคำนวณที่ไม่สำเร็จก็ตาม คงจะดีไม่น้อยหากมีตัวเลือกเช่นนั้น
karim


2

ในการเปลี่ยนสีเส้นขอบมุมมองตาราง:

In.h:

#import <QuartzCore/QuartzCore.h>

ใน. m:

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

0

งานนี้สามารถทำได้อย่างง่ายดายโดยใช้PrettyKitโดยเพิ่มโค้ดประมาณ 5 บรรทัด หากคุณใช้nibไฟล์หรือstoryboardอย่าลืมใช้แฮ็คเล็ก ๆ นี้ด้วย เมื่อคุณใช้แนวทางนี้คุณควรย่อยเซลล์ของคุณจากPrettyTableViewCell:

#import <PrettyKit/PrettyKit.h>

@class RRSearchHistoryItem;

@interface RRSearchHistoryCell : PrettyTableViewCell

นี่คือตัวอย่างของฉัน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;
}

-5

ฉันมีปัญหากับสิ่งนี้และลองใช้หลาย ๆ อย่างร่วมกันเนื่องจากฉันสังเกตเห็นว่าสำหรับบางเซลล์มันทำงานได้ดี แต่ไม่ใช่สำหรับเซลล์อื่น

ฉันพบว่ามันเป็นไปได้ที่จะตั้งค่า cell.backgroundColor เป็น lightGrayColor และทั้งหมดทำงานได้อย่างสมบูรณ์ - แต่ blueColor ทำให้ฉันมีปัญหาในการไม่อัปเดตขอบด้านนอก

เว้นแต่ว่าการใช้สีเขียวจะสำคัญมาก - บางทีคุณอาจต้องการลองสิ่งนี้ อาจเป็นไปได้ว่านี่เป็นคุณลักษณะที่ช่วยให้ผู้ใช้ใช้เฉพาะสีเทาเมื่อระบุว่ามีการเลือกเซลล์

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.