Xcode：类似 Facebook 的 UITableViewCell 自定义

Question

我正在研究这个 UITableViewCell 自定义，并且我已经尝试了很多东西。我使用过子视图，我使用过drawrect，我都使用过，但每次我都无法平滑滚动。让我补充一些其他内容：即使 Facebook 新闻源滚动也不是那么平滑，但我看到一些应用程序（如 GetGlue）具有自定义单元格（有些带有文本，有些带有图像）并且滚动非常平滑。

我只是想问有没有一种方法可以帮助我得到最好的结果

注意：图像是使用 SDWEBIMAGE 下载的。

这里是一些代码（这是 uitableviewcell 子视图的drawrect方法）：

- (void)drawRect:(CGRect)rect
{
    // Ottengo il contenuto grafico
    CGContextRef context = UIGraphicsGetCurrentContext();// Background
    CGContextSaveGState(context);
    CGPathRef path = CGPathCreateWithRect(CGRectMake(10, 10, 300, self.frame.size.height - 15), NULL);
    [[UIColor whiteColor] setFill];
    CGContextAddPath(context, path);
    CGContextSetShadowWithColor(context, CGSizeMake(0, 0), 3.5, [UIColor colorWithRed:0 green:0 blue:0 alpha:0.2].CGColor);
    CGContextSetBlendMode (context, kCGBlendModeNormal);
    CGContextDrawPath(context, kCGPathFill);
    CGPathRelease(path);
    CGContextRestoreGState(context);

    // Rettangolo per Social Button
    UIImage *socialRectImage = [UIImage imageNamed:@"activitySocialBarBackground"];
    CGRect socialRect = CGRectMake(10, self.frame.size.height - 35 - 5, 300, 35);
    CGPathRef socialBarPath = CGPathCreateWithRect(socialRect, NULL);
    CGContextAddPath(context, socialBarPath);
    [socialRectImage drawInRect:socialRect];
    CGPathRelease(socialBarPath);

    //###### Immagine

    // Actor Image
    CGRect imageRect = CGRectMake(18, 18, 40, 40);
    CGContextSaveGState(context);
    CGPathRef clippath = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:20].CGPath;
    CGContextAddPath(context, clippath);
    CGContextClip(context);
    [[activityArray objectForKey:@"actorImage"] drawInRect:imageRect];
    CGContextRestoreGState(context);

    // Actor DisplayName
    CGPoint point;
    NSDictionary *mainTextAttributes = @{ NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Bold" size:13.5f], NSForegroundColorAttributeName : [UIColor colorWithRed:130.0f/255.0f green:27.0f/255.0f blue:67.0f/255.0f alpha:1] };
    NSAttributedString *localeNameAttributedString = [[NSAttributedString alloc] initWithString:activity.actor.displayName attributes:mainTextAttributes];
    point = CGPointMake(66, 23);
    [localeNameAttributedString drawAtPoint:point];

    // Activity Time Type
    NSDictionary *TimeTypeTextAttributes = @{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f], NSForegroundColorAttributeName : [UIColor grayColor] };
    NSAttributedString *TimeTypeAttributedString = [[NSAttributedString alloc] initWithString:[activityArray objectForKey:@"activityTimeType"] attributes:TimeTypeTextAttributes];
    point = CGPointMake(66, 40);
    [TimeTypeAttributedString drawAtPoint:point];

    // Activity Message
    CGSize ActivityMessageTextSize = [activity.shortMessage sizeWithFont:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] constrainedToSize:CGSizeMake(280, 100) lineBreakMode:NSLineBreakByWordWrapping];
    CGRect newTextFrame = CGRectInset(CGRectMake(18, 68, 280, 100), 0, 0);
    [activity.shortMessage drawInRect:newTextFrame withFont:[UIFont fontWithName:@"HelveticaNeue" size:14.0f] lineBreakMode:NSLineBreakByWordWrapping alignment:NSTextAlignmentLeft];


    // Object Image
    if ( [imagesDownload objectForKey:@"objectImage"] != nil ) {
        CGRect objectImageRect = ( activity.object.image.url != nil ) ? CGRectMake(0, 68 + ActivityMessageTextSize.height, 300, 168) : CGRectMake(-5, 68 + ActivityMessageTextSize.height, 310, 310);
        CGContextSaveGState(context);
        clippath = [UIBezierPath bezierPathWithRoundedRect:objectImageRect cornerRadius:0].CGPath;
        CGContextAddPath(context, clippath);
        CGContextClip(context);
        //[[imagesDownload objectForKey:@"objectImage"] drawInRect:objectImageRect];
        CGContextRestoreGState(context);
    }


}

PS：抱歉我的英语不好。

截图：

Answer 1

我刚刚创建了一个名为 startMe 的社交网络。 在图形和组织方面，它与您的非常相似。 不同之处在于您正在绘制单元格代码，这绝对不好。

您必须使用已绘制的单元格创建文件，然后简单地管理内容和高度。特别是高度，您只需在委托表 heightForCellAtIndexPath 或类似方法中计算一次；）

我的项目正在出售，我必须说它运行得很顺利，你也可以在youtube上观看视频。

我还看到用图形核心设计很多东西，这会减慢整个事情的速度。 如果您根据图层图像的属性进行操作，则非常容易。在我班上的一个地方，我曾经像你一样把图像变成圆形：

.h

//
//  RoundCornerImage.h
//  startMe
//
//  Created by Matteo Gobbi on 24/08/13.
//  Copyright (c) 2013 Matteo Gobbi. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface RoundCornerImageView : UIImageView

-(void)setBorderWidth:(float)width;
-(void)setCornerRadius:(float)radius;
-(void)setBorderColor:(UIColor *)color;
-(void)setCircleMask;

@end

.m

//
//  RoundCornerImage.m
//  startMe
//
//  Created by Matteo Gobbi on 24/08/13.
//  Copyright (c) 2013 Matteo Gobbi. All rights reserved.
//

#import "RoundCornerImageView.h"

@implementation RoundCornerImageView

-(void)awakeFromNib {
    [super awakeFromNib];
    CALayer * l = [self layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:10.0];
    
    // You can even add a border
    [l setBorderWidth:self.frame.size.width/IMG_PROFILE_BORDER_SCALE];
    [l setBorderColor:[[UIColor grayColor] CGColor]];
}

-(void)setBorderWidth:(float)width {
    [[self layer] setBorderWidth:width];
}

-(void)setCornerRadius:(float)radius {
    [[self layer] setCornerRadius:radius];
}

-(void)setBorderColor:(UIColor *)color {
    [[self layer] setBorderColor:[color CGColor]];
}


-(void)setCircleMask {
    [[self layer] setCornerRadius:self.frame.size.width/2.0];
}

@end

这只是扩展了 UIImageView 类，您只需将其设置在 imageView 界面生成器上的对象上即可。从那时起，处理表格单元格的方法中的代码，您可以根据需要调用该类的方法来设置边框和颜色。或者您可以修改arti类以默认使用您感兴趣的功能。