相对于父UIView的子视图的来源

时间:2014-04-14 07:34:30

标签: ios uiview subview

我有一段时间在父视图中定位两个子视图。它们旨在构成一个基本的动画条形图,动画部分似乎运作良好。同样,相应的条似乎准确反映了数据。

但是,我试图将两个视图的原点基于父视图的下边缘(屏幕截图中的灰色区域),结果似乎是随机的。我希望它不是随机的,但我无法确定它。

以下是代码:

-(void) makeBarChart
{
RiserBar *thisRiser;

for(int i=0; i<2; i++)
{
    thisRiser = [[RiserBar alloc] initWithFrame:CGRectZero];
    thisRiser.tag = i+1;
    [self.chartView addSubview:thisRiser];
//    [self placeAndAnimateThisBar];
}

int barWidth = self.chartView.bounds.size.width /((2 * 2) -1);
int focusBarEndHeight = (self.chartView.bounds.size.height-20) * (focusActivityPercent / 100);
int benchmarkBarEndHeight = (self.chartView.bounds.size.height-20) * (benchmarkActivityPercent / 100);

for (thisRiser in self.chartView.subviews)
{
    switch (thisRiser.tag)
    {
        case 1:
        { [UIView animateWithDuration:1
                                  delay:.2
                                options: UIViewAnimationCurveEaseOut
                             animations:^
             {
                 thisRiser.frame = CGRectMake(20, self.chartView.frame.origin.y, barWidth, 0);
                 thisRiser.backgroundColor = [UIColor blackColor];
                 thisRiser.frame = CGRectMake(20, self.chartView.frame.origin.y, barWidth, -focusBarEndHeight);
                 thisRiser.backgroundColor = [UIColor redColor];
             }
                             completion:^(BOOL finished)
             {
                 NSLog(@"Done!");
             }];
        }
            break;
        case 2:
        {
            [UIView animateWithDuration:1
                                  delay:.2
                                options: UIViewAnimationCurveEaseOut
                             animations:^
             {
                 thisRiser.frame = CGRectMake(barWidth + 40, self.chartView.frame.origin.y, barWidth, 0);//load frame from data
                 thisRiser.backgroundColor = [UIColor blackColor];
                 thisRiser.frame = CGRectMake(barWidth + 40, self.chartView.frame.origin.y, barWidth, -benchmarkBarEndHeight);
                 thisRiser.backgroundColor = [UIColor blueColor];
             }
                             completion:^(BOOL finished)
             {
                 NSLog(@"Done!");
             }];
        }
            break;
        case 3:
            //do something to the view
            break;
            //and so on...
        default:
            break;
    }
}

}

以及生成的屏幕截图:

enter image description here

我应该提一下,意图是红色和蓝色条都来自灰色父视图的底部并且上升。我不清楚为什么我必须扭转.height属性的极性来实现这一点。在给定此代码的情况下,为什么原点位于父视图中间附近?

有人可以指出我的错误吗?

谢谢!

编辑,根据@Rob在答案2中的温和指导:

以下是对我的代码相关部分的更改,也受到this slideshow中信息的影响,我强烈建议任何像我一样喜欢图片详细解释的人:

switch (thisRiser.tag)
{
    case 1:
    { [UIView animateWithDuration:1
                              delay:.2
                            options: UIViewAnimationCurveEaseOut
                         animations:^
         {
             thisRiser.frame = CGRectMake(20, self.chartView.frame.size.height, barWidth, 0);
             thisRiser.backgroundColor = [UIColor blackColor];
             thisRiser.frame = CGRectMake(20, self.chartView.frame.size.height, barWidth, -focusBarEndHeight);
             thisRiser.backgroundColor = [UIColor redColor];
         }
                         completion:^(BOOL finished)
         {
             NSLog(@"Done!");
         }];
    }
        break;
    case 2:
    {
        [UIView animateWithDuration:1
                              delay:.2
                            options: UIViewAnimationCurveEaseOut
                         animations:^
         {
             thisRiser.frame = CGRectMake(barWidth + 40, self.chartView.frame.size.height, barWidth, 0);//load frame from data
             thisRiser.backgroundColor = [UIColor blackColor];
             thisRiser.frame = CGRectMake(barWidth + 40, self.chartView.frame.size.height, barWidth, -benchmarkBarEndHeight);
             thisRiser.backgroundColor = [UIColor blueColor];
         }
                         completion:^(BOOL finished)
         {
             NSLog(@"Done!");
         }];
    }
        break;
    case 3:
        //do something to the view
        break;
        //and so on...
    default:
        break;
}

这就是现在的样子(图中条形高度的差异是由于不同的数据):

enter image description here

再次感谢,Rob!

2 个答案:

答案 0 :(得分:1)

您有几行类似于以下内容:

thisRiser.frame = CGRectMake(20, self.chartView.frame.origin.y, barWidth, -focusBarEndHeight);

在为其子视图设置框架的上下文中使用frame.origin.y的{​​{1}}没有意义。一个与另一个无关。提升者的chartView相对于frame,与[{1}}的{​​{1}}无关。

如果您希望chartView位于origin的底部,其高度为chartView,我可能会执行以下操作:

thisRiser

答案 1 :(得分:0)

子视图的实际位置也取决于父级的自动调整掩码。 在定位子视图时你需要考虑同样的事情,或者你可以