如何使用百分比颜色填充UITableViewCell

时间:2013-10-18 15:46:35

标签: ios objective-c uitableview

需要一些提示。 我在tableview中有2个单元格。

第一个有label.text值,比方说2。 第二个的值为1.

总数为3(100%)

我想用一种颜色直观地显示单元格,该颜色代表以百分比表示的值。

所以第一个细胞应该是67%,第二个细胞应该是33%。

但是如何用颜色填充67%和33%的细胞?如果只有一个单元格具有值,则整个单元格将填充颜色。而另一个应该是空白的。

我希望它们看起来像条形图。

像这样:

enter image description here

3 个答案:

答案 0 :(得分:2)

你可以做的是添加一个UIView作为背景颜色。但是将视图的高度更改为单元格高度的百分比

CGRect frame = cell.frame;
frame.size.height = frame.size.height*0.66; //The 0.66 is the percentage as a decimal
frame.origin.y = cell.frame.size.height - frame.size.height; //adjust where it should start
UIView *bg = [[UIView alloc] initWithFrame:frame];
bg.backgroundColor = [UIColor redColor];
cell.backgroundView = bg;

这会将一个UIView添加到一个cell.backgroundView,其颜色稍微向下开始,以表示你的填充百分比。

希望这有帮助

答案 1 :(得分:1)

我假设您可以通过数学计算出您想要使用的颜色百分比。然后它就像:

一样简单
UIView *bg = [[UIView alloc] initWithFrame:frame];
bg.backgroundColor = [UIColor colorWithHue:hue 
                                saturation:percent
                                brightness:brightness
                                     alpha:1.0];
cell.backgroundView = bg;

根据您的确切目标,您可能希望使用饱和度和亮度的组合,但使用恒定的色调和alpha。

编辑:

如果您希望背景为条形图,就像您在链接中显示的那样,您将需要制作稍微复杂的背景视图。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * const CellIdentifier = @"MyCellIdentifier";
    static const NSInteger BarTag = 0xBEEF;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier
                                                            forIndexPath:indexPath];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                      reuseIdentifier:CellIdentifier];
        UIView *background = [[UIView alloc] initWithFrame:cell.bounds];
        background.autoresizeMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        UIView *bar = [[UIView alloc] initWithFrame:cell.bounds];
        bar.autoresizeMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin;
        bar.tag = BarTag;
        bar.backgroundColor = [UIColor redColor];
        [background addSubView:bar];
        cell.backgroundView = background;
    }

    CGFloat percent = .5; // Calculate this somehow
    UIView *backgroundBar = [cell.backgroundView viewWithTag:BarTag];
    CGFrame frame = backgroundBar.frame;
    frame.size.width = CGRectGetWidth(tableView.frame) * percent;
    backgroundBar.frame = frame;

    return cell;
}

答案 2 :(得分:0)

可悲的是,mashdup的回答是不正确的。它为全细胞着色(我使用的是Swift)。

编辑:

var frame: CGRect = cell.frame
        frame.size.width = frame.size.width*0.66 //The 0.66 is the percentage as a decimal
        frame.origin.y = cell.frame.size.height - frame.size.height //adjust where it should start
        var bg: UIView = UIView(frame: frame)
        bg.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.5)
        cell.addSubview(bg)

在Swift中回答。