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

Мне нужно добиться чего-то подобного (пожалуйста, прикрепите ScreenShot). Наилучшее возможное решение, которое мне пришло, 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];
  }

Вот что я достиг до сих пор. введите описание изображения здесь

ОТВЕТЫ

Ответ 1

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

screenshot

Код, загруженный в путь 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];
}

Ответ 2

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

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

[self.milestoneCollection.layer addSublayer:shapelayer];

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

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.

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

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

  • Сделаем это.
  • Выполнение ВЕРНЕТЬ.

Конечно, ВПРАВО отличается в зависимости от ситуации и времени.

ХРАНИТЕ В РАЗУМ

  • Будьте осторожны при наличии 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

Это должно ответить на все ваши вопросы. Лучшая удача!