NSAttributedString和html样式(子弹对齐)
在我的iOS应用程序中,我使用NSAttributedString生成项目符号列表。 不幸的是,我正在努力让子弹看起来很可爱。 我的第一个尝试是使用常规文本和unicode字符作为子弹,基本上使用这样的字符串:
var attributedString = NSMutableAttributedString(
string: "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple linesn" +
"• This is the first bulletn" +
"• Here is a second bulletn" +
"• And here is a third bullet with a lot of text such that it overflows to the next line"
)
结果是这样的:
我喜欢子弹的外观,但是最后一颗子弹中的溢出文本应该与之前的行对齐,我无法弄清楚如何用纯文本实现这一点(不在上面的段落中应用相同的对齐方式)。
我的第二次尝试是通过NSHTMLTextDocumentType在NSAttributedString中使用html,并使用<ul>
和<li>
元素来生成项目符号。
let content = "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple lines" +
"<ul>" +
"<li>This is the first bullet</li>" +
"<li>Here is a second bullet</li>" +
"<li>And here is a third bullet with a lot of text such that it overflows to the next line</li>" +
"</ul>"
var attributedString = try! NSMutableAttributedString(
data: content,
options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
documentAttributes: nil
)
这解决了第一个问题,但引入了一个新问题:
子弹现在距离太远(从左边缘和右边的文字)。 我试图使用典型的html / css技巧来修复对齐( <li style="text-indent: -10px;">
),但这些样式似乎被NSAttributedString忽略。
我试图用一个额外的NSMutableParagraphStyle来解决这个问题,但它看起来好处不大。 这是我试过的:
var paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.firstLineHeadIndent = 0
paragraphStyle.headIndent = 20
attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: attributedStringRange)
这就是我得到的:
正如你所看到的,它只会让事情变得更糟,这是我的问题:
我真正想要的是我的子弹间距与第一个屏幕截图类似,而第二行的溢出缩进看起来像第二行,而不必硬编码精确的像素位置。 你们能帮我吗?
谢谢
我不得不将自定义样式添加到列表中,并且这是我最终为NSAttributedString
每个项目符号使用的段落样式
headIndent
和firstLineHeadIndent
可以更改,但NSTextTab
位置应该与headIndent
相同
NSMutableParagraphStyle *const bulletParagraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
bulletParagraphStyle.headIndent = 60;
bulletParagraphStyle.firstLineHeadIndent = 30;
NSTextTab *listTab = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentNatural location:60 options:@{}];
bulletParagraphStyle.tabStops = @[listTab];
这个工作假设你的子弹点有一个t
后面(然后是文本)