Рисование пунктирной линии между ячейками UICollectionView

Я должен достичь чего-то подобного(пожалуйста, проверьте прилагаемый скриншот). Наилучшее решение, которое пришло мне на ум-это UICollectionView. Я создал закругленную границу вдоль ячейки и поставил кнопку на ячейку. Теперь для пунктирной прямой линии я использовал CAShapeLayer С BezierPath и добавил слой к моему collectionview background with background color set to clear color. Вот в чем проблема, я не вижу никакой пунктирной линии. Вот что я попробовал. Теперь у меня есть пара вопросов. Отвечая, пожалуйста, рассматривайте меня как начинающий.

1) Почему мои строки не отображаются.
2) Как рассчитать ширину между двумя ячейками, прямо сейчас я устанавливаю случайное число.
3) Есть ли другой подход, который может решить в этом случае более эффективно.

required

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UIBezierPath *borderPath;
CGFloat borderWidth;

KKCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"testCell" forIndexPath:indexPath];
borderPath = [UIBezierPath bezierPath];

[borderPath moveToPoint:CGPointMake(cell.frame.origin.x + cell.frame.size.width -1 , cell.frame.origin.y + 2)];
[borderPath addLineToPoint:CGPointMake(cell.frame.origin.x + cell.frame.size.width + 50,  cell.frame.origin.y +2)];
borderWidth = 1.0;
[self dottedLineWithPath:borderPath withborderWidth:borderWidth];
return cell; 
}

/** creating dotted line **/

- (void)dottedLineWithPath:(UIBezierPath *)path withborderWidth:(CGFloat)lineWidth
{
CAShapeLayer *shapelayer = [CAShapeLayer layer];
shapelayer.strokeStart = 0.0;
shapelayer.strokeColor = [UIColor blackColor].CGColor;
shapelayer.lineWidth = borderWidth;
shapelayer.lineJoin = kCALineJoinRound;
shapelayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:1],[NSNumber numberWithInt:2 ], nil];
shapelayer.path = path.CGPath;

[self.milestoneCollection.backgroundView.layer addSublayer:shapelayer];
  }

вот чего я достиг до сих пор.enter image description here

13
core-graphics ios objective-c uicollectionview

2 ответов

Привет, сделал это с помощью UICollectionViewLayout и функции рисования.

screenshot

код загружен в path https://github.com/arunpkumar92/OrderStatusCollectionView

- (void)reloadConnections{

    for (CAShapeLayer *shapelayer in self.connectionLines) {
        [shapelayer removeFromSuperlayer];
    }

    self.connectionLines = [NSMutableArray array];

    for (int i = 0; i <= (self.total-2); i++){
        NSArray *paths = [self pathForconnectionLineForIndexPath:i];
        for (UIBezierPath *path in paths) {
            UIColor *color = (self.currentLevel > i) ? [UIColor colorWithRed:0.078 green:0.557 blue:0.067 alpha:1.00] : [UIColor colorWithRed:0.957 green:0.659 blue:0.024 alpha:1.00];
            CAShapeLayer *shapelayer = [self drawdottedLineWithPath:path withborderWidth:1.0f withColor:color];
            [self.collectionView.layer addSublayer:shapelayer];
            [self.connectionLines addObject:shapelayer];
        }
    }

}

- (NSArray *)pathForconnectionLineForIndexPath:(int)index{
    NSMutableArray *paths = [NSMutableArray array];

    int row = index%self.noOfItems;
    int column = index/self.noOfItems;
    CGFloat cellWidth = self.view.frame.size.width/self.noOfItems;
    CGFloat cellHeight = self.view.frame.size.width/self.noOfItems;
    CGFloat connectionLength = cellHeight/2;

    CGFloat leftPadding;
    CGFloat topPadding;

    if (row != (self.noOfItems-1)) {
        leftPadding = cellWidth/4;
        topPadding = cellHeight/2;

        UIBezierPath *borderPath = [UIBezierPath bezierPath];
        CGFloat startX = (3*leftPadding)+(row*cellWidth);
        CGFloat startY = topPadding+(column*cellHeight);
        CGFloat endX = startX + connectionLength;
        CGFloat endY = startY;
        [borderPath moveToPoint:CGPointMake(startX , startY)];
        [borderPath addLineToPoint:CGPointMake(endX,  endY)];
        [self drawDirectionAt:CGPointMake((startX+(connectionLength/2)) , startY) isEnabled:(self.currentLevel > index) isRight:YES];
        [paths addObject:borderPath];

    }

    if ( (row == (self.noOfItems-1)) && (column%2 == 0) ) {
        leftPadding = cellWidth/2;
        topPadding = cellHeight/8;

        UIBezierPath *borderPath = [UIBezierPath bezierPath];
        CGFloat startX = leftPadding+(row*cellWidth);
        CGFloat startY = (7*topPadding)+(column*cellHeight);
        CGFloat endX = startX;
        CGFloat endY = startY + (2*topPadding);
        [borderPath moveToPoint:CGPointMake(startX , startY)];
        [borderPath addLineToPoint:CGPointMake(endX,  endY)];
        [self drawDirectionAt:CGPointMake(startX , (startY+topPadding)) isEnabled:(self.currentLevel > index) isRight:NO];
        [paths addObject:borderPath];

    }

    if ( (row == 0) && (column%2 != 0) ) {
        leftPadding = cellWidth/2;
        topPadding = cellHeight/8;

        UIBezierPath *borderPath = [UIBezierPath bezierPath];
        CGFloat startX = leftPadding+(row*cellWidth);
        CGFloat startY = (7*topPadding)+(column*cellHeight);
        CGFloat endX = startX;
        CGFloat endY = startY + (2*topPadding);
        [borderPath moveToPoint:CGPointMake(startX , startY)];
        [borderPath addLineToPoint:CGPointMake(endX,  endY)];
        [self drawDirectionAt:CGPointMake(startX , (startY+topPadding)) isEnabled:(self.currentLevel > index) isRight:NO];
        [paths addObject:borderPath];

    }

    return paths;
}

- (CAShapeLayer *)drawdottedLineWithPath:(UIBezierPath *)path withborderWidth:(CGFloat)lineWidth withColor: (UIColor *)color
{


    CAShapeLayer *shapelayer = [CAShapeLayer layer];
    shapelayer.strokeStart = 0.0;
    shapelayer.strokeColor = color.CGColor;
    shapelayer.lineWidth = lineWidth;
    shapelayer.lineJoin = kCALineJoinRound;
    shapelayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:15],[NSNumber numberWithInt:10 ], nil];
    shapelayer.path = path.CGPath;

    return shapelayer;

}

- (void)drawDirectionAt:(CGPoint)point isEnabled:(BOOL)enabled isRight:(BOOL)isRight{
    NSString *imageName;
    imageName = isRight ? @"right-arrow" : @"down-arrow";
    imageName = [NSString stringWithFormat:@"%@-%@",imageName,(enabled ? @"enabled" : @"disabled")];

    CAShapeLayer* direction = [CAShapeLayer layer];
    direction.opacity = 1.0;
    direction.frame = CGRectMake(0, 0, 16, 16);
    direction.position = point;
    [direction setContents:(id)[[UIImage imageNamed: imageName] CGImage]];
    [self.connectionLines addObject:direction];
    [self.collectionView.layer addSublayer: direction];
}
9

почему мои строки не отображаются.

чтобы сделать ваш рисунок видимым, вы должны добавить свой код чертежа непосредственно в UICollectionView экземпляр, а не к нему backgroundView собственность.

[self.milestoneCollection.layer addSublayer:shapelayer];

это работает на 100%. Используя backgroundView может показаться, что это правильно, но они могут использовать его для чего-то другого. Сомневаюсь!--4--> либо не отображается в это время (используя конфигурацию по умолчанию) , либо игнорирует наши запросы на изменение в целом.

Lines_Drawn_Center_To_Center

Как рассчитать ширину между двумя ячейками, прямо сейчас я устанавливаю случайное число.

-(void)getLineStartPoint:(CGPoint*)startPoint
             andEndPoint:(CGPoint*)endPoint
     fromCellAtIndexPath:(NSIndexPath*)fromIndexPath
       toCellAtIndexPath:(NSIndexPath*)toIndexPath
{
    UICollectionViewLayoutAttributes* fromAttributes =
    [self.milestoneCollection layoutAttributesForItemAtIndexPath:fromIndexPath];

    UICollectionViewLayoutAttributes* toAttributes =
    [self.milestoneCollection layoutAttributesForItemAtIndexPath:toIndexPath];

    *startPoint = fromAttributes.center;
    *endPoint = toAttributes.center;
}

UICollectionViewLayoutAttributes 100% функция богата геометрической информацией о cells, headers, footers, decorationViews в частности indexPath. Для простоты я теперь использую center. Я считаю, что вам нужно использовать свою логику с frame собственность.

есть ли другой подход, который может решить в этом случае более эффективно.

да, всегда есть два пути.

  • получать его Сделано.
  • Getting it done право.

конечно право отличается в зависимости от ситуации и времени.

ИМЕЙТЕ В ВИДУ

  • будьте осторожны с indexPath доступность или вы бы очень легко врезаться. Вот простейшая форма охраны за это -

    NSInteger numberOfItems = [self collectionView:collectionView numberOfItemsInSection:indexPath.section];

if(indexPath.item < numberOfItems-1)
{
    CGPoint startPoint, endPoint;
    NSIndexPath* toIndexPath =
    [NSIndexPath indexPathForItem:indexPath.item+1 inSection:indexPath.section];

    [self getLineStartPoint:&startPoint
                andEndPoint:&endPoint
        fromCellAtIndexPath:indexPath
          toCellAtIndexPath:toIndexPath];

    [borderPath moveToPoint:startPoint];
    [borderPath addLineToPoint:endPoint];
    borderWidth = 1.0;
    [self dottedLineWithPath:borderPath withborderWidth:borderWidth];
}

  • также при попытке прокрутить его (при необходимости) добавляются слои/пути каждый раз, когда вы создаете ячейку (это приводит к темным пунктирным линиям из-за несколько раз добавляя в иерархию слоев), вам нужно позаботиться этого при повторном использовании клеток. Взгляните на это :-

Line_Drawn_Multiple_Times.png

это должно ответить на все ваши вопросы. Удачи Вам!!

3