NSAttributedString с прикрепленным изображением и NSTextTab, текст не выровнен

Я пытаюсь создать UIlabel с изображением и заголовком слева и списком описаний с маркерами справа, для этого я использую NSAttributedString следующим образом:

        NSMutableParagraphStyle *pStyle = [[NSMutableParagraphStyle alloc] init];
    pStyle.tabStops =
        @[ [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft location:tabLocation options:[NSDictionary dictionary]] ];

    NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] init];
    NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
    textAttachment.image = [UIImage imageNamed:@"test_image"];
    textAttachment.bounds = CGRectMake(0, -3, 15, 15);//resize the image
    attString = [NSAttributedString attributedStringWithAttachment:textAttachment].mutableCopy;
    [attString appendAttributedString:[[NSAttributedString alloc]
                                          initWithString:[NSString stringWithFormat:@"title\t\u2022 %@",
                                                                                    [@[ @"description1", @"description2" ]
                                                                                        componentsJoinedByString:@"\n\t\u2022 "]]
                                              attributes:@{NSParagraphStyleAttributeName : pStyle}]];
    label.attributedText = attString;

Я ожидаю, что список справа будет выровнен по левому краю, но это не так, вот результат, который я получаю:

введите здесь описание изображения

Я ожидаю, что список будет выровнен следующим образом: введите здесь описание изображения


person Mosbah    schedule 05.08.2016    source источник


Ответы (2)


Проблема связана с параметром location в NSTextTab

  • Согласно описанию, параметр location помогает позиционировать текст от левого поля. Итак, это то, что нам нужно, просто замените строки ниже

    pStyle.tabStops =  @[ [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft location:tabLocation options:[NSDictionary dictionary]] ];
    

    с

    pStyle.tabStops = @[[[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft location:[self getTextLocationFor:@"test"]  options:[NSDictionary dictionary]] ];
    
  • Добавьте метод getTextLocationFor: для расчета местоположения следующим образом.

    -(CGFloat)getTextLocationFor:(NSString *)inputStr{
         CGSize maximuminputStringWidth = CGSizeMake(FLT_MAX, 30);
         CGRect textRect = [inputStr boundingRectWithSize:maximuminputStringWidth
                                            options:NSStringDrawingUsesLineFragmentOrigin
                                         attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}
                                            context:nil];
         UIImageView * testImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"close_red"]];//Change image name with yours
    
         return textRect.size.width + testImage.frame.size.width +2;
    }
    
  • Вот и все, мы готовы запустить ваш проект, теперь все будет хорошо.

РЕЗУЛЬТАТ:

введите здесь описание изображения

person Gokul G    schedule 10.08.2016

если я вас правильно понял, попробуйте этот код:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 460, 460)];
label.numberOfLines = 0;
[self.view addSubview:label];

NSMutableParagraphStyle *pStyle = [[NSMutableParagraphStyle alloc] init];
pStyle.tabStops = @[ [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft location:40 options:@{}] ];

NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
textAttachment.image = [UIImage imageNamed:@"img"];
textAttachment.bounds = CGRectMake(0, -3, 30, 30);


NSString *string = [NSString stringWithFormat:@"title\n\r\u2022 %@", [@[ @"description1", @"description2" ] componentsJoinedByString:@"\n\r\u2022 "]];

NSMutableAttributedString *attributedString = [[NSMutableAttributedString attributedStringWithAttachment:textAttachment] mutableCopy];
[attributedString appendAttributedString:[[NSMutableAttributedString alloc] initWithString:string attributes:@{NSParagraphStyleAttributeName : pStyle}]];

label.attributedText = attributedString;

Вот результат

введите здесь описание изображения

ОБНОВЛЕНИЕ

Вы можете добиться этого только с помощью TextKit (NSTextLayoutManager) и указать область, которая должна использоваться для рисования текста, или использовать простое решение и подкласс из UIView.

Вот решение с видом

ListView.h

@interface ListView : UIView

@property(nonatomic,strong) UIImage *image;
@property(nonatomic,strong) NSString *title;
@property(nonatomic,strong) NSArray *list;

@end

ListView.m

static const CGFloat ImageWidth = 13.f;

@interface ListView()
@property (nonatomic,weak) UIImageView *imageView;
@property (nonatomic,weak) UILabel *titleLabel;
@property (nonatomic,weak) UILabel *listLabel;
@end

@implementation ListView
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    [self setup];
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    [self setup];
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    [self setup];
}

- (void)setup {
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addSubview:imageView];
    self.imageView = imageView;

    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
    titleLabel.numberOfLines = 0;
    [titleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [titleLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [self addSubview:titleLabel];
    self.titleLabel = titleLabel;

    UILabel *listLabel = [[UILabel alloc] init];
    listLabel.translatesAutoresizingMaskIntoConstraints = NO;
    listLabel.numberOfLines = 0;
    [listLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    [listLabel setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    [self addSubview:listLabel];
    self.listLabel = listLabel;

    NSDictionary *views = NSDictionaryOfVariableBindings(imageView,titleLabel,listLabel);
    NSDictionary *metrics = @{ @"ImageHeight" : @(ImageWidth) };

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[imageView(ImageHeight)]-0-[titleLabel]-0-[listLabel]-0-|" options:0 metrics:metrics views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[imageView(ImageHeight)]" options:NSLayoutFormatAlignAllTop metrics:metrics views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[titleLabel]" options:NSLayoutFormatAlignAllTop metrics:metrics views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[listLabel]-0-|" options:NSLayoutFormatAlignAllTop metrics:metrics views:views]];
}

- (void)setImage:(UIImage *)image {
    _image = image;
    self.imageView.image = image;
    [self setNeedsLayout];
}

- (void)setTitle:(NSString *)title {
    _title = title;
    self.titleLabel.text = title;
    [self setNeedsLayout];
}

- (void)setList:(NSArray *)list {
    _list = list;

    NSMutableParagraphStyle *pStyle = [[NSMutableParagraphStyle alloc] init];
    pStyle.tabStops = @[ [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft location:40 options:@{}] ];

    NSString *string = [NSString stringWithFormat:@"\u2022 %@", [list componentsJoinedByString:@"\n\u2022 "]];
    self.listLabel.attributedText = [[NSAttributedString alloc] initWithString:string attributes:@{NSParagraphStyleAttributeName : pStyle}];

    [self setNeedsLayout];
}

@end
person Konstantin    schedule 08.08.2016
comment
Спасибо за ваш ответ, ваше решение не работает, и я не понимаю, зачем использовать \r? - person Mosbah; 08.08.2016
comment
Не могли бы вы показать, что вы ожидаете в результате, и я исправляю свой ответ. - person Konstantin; 08.08.2016
comment
Я обновил свой вопрос с ожидаемым результатом, спасибо! - person Mosbah; 08.08.2016
comment
Можно ли использовать две метки для вашего решения? - person Konstantin; 08.08.2016
comment
Я думал об этом, но это может быть сложно, так как у меня есть несколько подобных списков для отображения в зависимости от данных. - person Mosbah; 08.08.2016
comment
Я не могу добиться этого с помощью одной атрибутированной строки. Вы можете использовать подкласс из представления и использовать его в своем приложении или использовать TextKit от Apple (особенно LayoutManager). - person Konstantin; 08.08.2016