0

I'm having some issues with a bullet point list on an attributed string. I need to have a custom icon and it needs to be a bit bigger than the rest of the text. However, when I change its font size the line's height get bigger than the rest which leads to a pretty messed up layout.

Formatted List Layout

I already tried tinkering the NSMutableParagraphStyle but didn't have much luck. Any leads on what should I try next? Thanks.

do {
    let attrStr = try NSMutableAttributedString(data:d, options:o, documentAttributes:nil)
    let stringToUpdate = attrStr.mutableString.replacingOccurrences(of: "•", with: "☞")
    attrStr.mutableString.setString(stringToUpdate)


    let regex = try! NSRegularExpression(pattern: "☞", options: [])
    let range = NSMakeRange(0, stringToUpdate.characters.count)
    let fontIcon = UIFont(name: fontName, size: fontSize + 16)! //TODO: change 

    regex.enumerateMatches(in: stringToUpdate, options: [], range: range, using: { (result, flags, stop) in

        if let subStringRange = result?.rangeAt(0) {
            attrStr.addAttribute(NSFontAttributeName, value: fontIcon , range: subStringRange)
            attrStr.addAttribute(NSBaselineOffsetAttributeName, value: -8, range: subStringRange)
        }

    })

    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.addTabStop(NSTextTab(textAlignment: .left, location: 1.0, options: [:]))
    paragraphStyle.firstLineHeadIndent = 0
    paragraphStyle.headIndent = 56;
    paragraphStyle.defaultTabInterval = 2.0
    paragraphStyle.minimumLineHeight = 1
    paragraphStyle.maximumLineHeight = 1
    paragraphStyle.lineHeightMultiple = 1
    paragraphStyle.lineSpacing = 10
    paragraphStyle.paragraphSpacing = 40
    paragraphStyle.paragraphSpacingBefore = 10
    attrStr.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, stringToUpdate.characters.count))
    return attrStr
}
Luis Machado
  • 21
  • 2

1 Answers1

0

As far as I know, you won't be able to do this with NSAttributedString on its own, so... couple options:

1 - Based on your image, it looks like you either are using a Table View, or you could use a Table View. If you go that route, pretty simple to layout your cells with the "bullet point" in an image view, and the text in a label.

2 - Take a look at this post: https://stackoverflow.com/a/14639864/6257435 - similar to what you want to do, except it's using a "drop-cap" where you'd want to use an image. Same idea though, and likely very similar code to implement the image bullet-points.

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • Thank you for your input. Right now I'm not using a tableview. All of the text comes from an HTML string (which specifies this bullet points list) and all I do is convert that html string into a mutable string (on the first line of code that data:d is the html). If I was certain that the html only contained the bullets point I would turn this into a table but I'm not so I won't be able to do that. Nevertheless I will look into your 2nd suggestion! Thanks again. – Luis Machado Aug 23 '17 at 06:53