Formatar UILabel com marcadores?


89

É possível formatar o textem UILabelpara mostrar um ponto de bala ?

Se sim, como posso fazer isso?


@Hoque: UILabels não tratam seu texto como HTML.
Ben Zotto,

2
Aqui está uma aula para isso! codeload.github.com/eyalc/ECListView/zip/master
Hemang

20
Por que isso está fechado como fora do tópico? Esta é uma pergunta legítima com uma resposta legítima.
len

2
Por que diabos isso está marcado como fora do tópico por stackoverflow.com/users/237838/andrew-barber é possivelmente uma duplicata, mas de forma alguma fora do tópico ...
AppHandwerker

2
Tecla de atalhoALT+8 = •
TheTiger de

Respostas:


162

Talvez use o ponto de código Unicode para o caractere de marcador em sua string?

Objective-c

myLabel.text = @"\u2022 This is a list item!";

Swift 4

myLabel.text = "\u{2022} This is a list item!"

4
Perdoe minha ignorância, mas eu uso UILabels o tempo todo e gostaria de saber se você poderia apontar um "por exemplo".
daveMac

1
myLabel.numberOfLines = 0oferece um rótulo de várias linhas que respeitará os caracteres de quebra de linha. No geral, gosto de usar UITextFieldporque é mais flexível. Por exemplo, você pode detectar facilmente em qual caractere um usuário tocou ao trabalhar com um UITextField, não acho que você possa fazer isso com um UILabel. As visualizações de texto também possuem muitos outros recursos interessantes.
John Erck

7
Outra maneira é usaroption+8
atulkhatri

3
Lembre-se de usar 'u' maiúsculo se você usar strings localizáveis: \ U2022
Nikolaj Nielsen

1
Swift é ligeiramente diferente, "\ u {2022}"
anders

80

apenas adicione " • "

Até eu estava procurando algo assim para mim textView. O que eu fiz, apenas anexar a string acima com a minha string e passá-la para o meu textView, o mesmo pode ser feito labelstambém.

Eu respondi isso para o futuro Viewer.


• Funcionou para mim. Eu tinha * no Xcode, acabei de copiar / substituir usando • e funcionou bem para o meu Label. Substituí "Label" por •
Brian

46

Aqui está uma boa solução com Swift

let label = UILabel()
label.frame = CGRect(x: 40, y: 100, width: 280, height: 600)
label.textColor = UIColor.lightGray
label.numberOfLines = 0

let arrayString = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]

label.attributedText = add(stringList: arrayString, font: label.font, bullet: "")

self.view.addSubview(label)

Adicionar atributos de marcadores

func add(stringList: [String],
         font: UIFont,
         bullet: String = "\u{2022}",
         indentation: CGFloat = 20,
         lineSpacing: CGFloat = 2,
         paragraphSpacing: CGFloat = 12,
         textColor: UIColor = .gray,
         bulletColor: UIColor = .red) -> NSAttributedString {

    let textAttributes: [NSAttributedStringKey: Any] = [NSAttributedStringKey.font: font, NSAttributedStringKey.foregroundColor: textColor]
    let bulletAttributes: [NSAttributedStringKey: Any] = [NSAttributedStringKey.font: font, NSAttributedStringKey.foregroundColor: bulletColor]

    let paragraphStyle = NSMutableParagraphStyle()
    let nonOptions = [NSTextTab.OptionKey: Any]()
    paragraphStyle.tabStops = [
        NSTextTab(textAlignment: .left, location: indentation, options: nonOptions)]
    paragraphStyle.defaultTabInterval = indentation
    //paragraphStyle.firstLineHeadIndent = 0
    //paragraphStyle.headIndent = 20
    //paragraphStyle.tailIndent = 1
    paragraphStyle.lineSpacing = lineSpacing
    paragraphStyle.paragraphSpacing = paragraphSpacing
    paragraphStyle.headIndent = indentation

    let bulletList = NSMutableAttributedString()
    for string in stringList {
        let formattedString = "\(bullet)\t\(string)\n"
        let attributedString = NSMutableAttributedString(string: formattedString)

        attributedString.addAttributes(
            [NSAttributedStringKey.paragraphStyle : paragraphStyle],
            range: NSMakeRange(0, attributedString.length))

        attributedString.addAttributes(
            textAttributes,
            range: NSMakeRange(0, attributedString.length))

        let string:NSString = NSString(string: formattedString)
        let rangeForBullet:NSRange = string.range(of: bullet)
        attributedString.addAttributes(bulletAttributes, range: rangeForBullet)
        bulletList.append(attributedString)
    }

    return bulletList
}

Aqui está o resultado:

insira a descrição da imagem aqui


Esta é uma solução muito elegante.
JeroenJK

9

No Swift 4 , usei "•" com a nova linha

 @IBOutlet weak var bulletLabel: UILabel!
 let arrayOfLines = ["Eat egg for protein","You should Eat Ghee","Wheat is with high fiber","Avoid to eat Fish "]
 for value in arrayOfLines {
     bulletLabel.text = bulletLabel.text!  + " • " + value + "\n"
  }

Resultado:

insira a descrição da imagem aqui


9
por que evitar peixes
rd_


3

Confira este link, fiz uma visualização personalizada para formatar texto com marcadores / outros símbolos / imagem (usando a propriedade attributeText de UILabel) como símbolo de item de lista (Swift 3.0) https://github.com/akshaykumarboth/SymbolTextLabel-iOS- Rápido

 import UIKit

    class ViewController: UIViewController {

    @IBOutlet var symbolView: SymbolTextLabel!

    var testString = "Understanding the concept of sales"

    var bulletSymbol = "\u{2022}" 
    var fontsize: CGFloat= 18
    override func viewDidLoad() {

        super.viewDidLoad()
         //First way // Dynamically creating SymbolTextLabel object

        let symbolTextLabel = SymbolTextLabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))

        symbolTextLabel.setText(text: testString, symbolCode: bulletSymbol) //setting text and symbol of text item

        symbolTextLabel.setFontSize(textSize: fontsize) // setting font size

        //symbolTextLabel.setSpacing(spacing: 5) // setting space between symbol and text

        self.view.addSubview(symbolTextLabel) 
//second way // from storyboard or interface builder

     symbolView.setText(text: testString, symbolCode: bulletSymbol)
 //setting text and symbol of text item 

    symbolView.setFontSize(textSize: fontsize) // setting font size

        //symbolView.setSpacing(spacing: 5) // setting space between symbol and text

         } 
    }

2

Se você deseja alinhar o recuo do texto para os marcadores também, pode usar o seguinte método que cria um NSAttributedStringcom as propriedades de recuo e espaçamento adequados:

- (NSAttributedString *)attributedStringForBulletTexts:(NSArray *)stringList
                                              withFont:(UIFont *)font
                                          bulletString:(NSString *)bullet
                                           indentation:(CGFloat)indentation
                                           lineSpacing:(CGFloat)lineSpacing
                                      paragraphSpacing:(CGFloat)paragraphSpacing
                                             textColor:(UIColor *)textColor
                                           bulletColor:(UIColor *)bulletColor {

    NSDictionary *textAttributes = @{NSFontAttributeName: font,
                                 NSForegroundColorAttributeName: textColor};
    NSDictionary *bulletAttributes = @{NSFontAttributeName: font, NSForegroundColorAttributeName: bulletColor};

    NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
    paragraphStyle.tabStops = @[[[NSTextTab alloc] initWithTextAlignment: NSTextAlignmentLeft location:indentation options:@{}]];
    paragraphStyle.defaultTabInterval = indentation;
    paragraphStyle.lineSpacing = lineSpacing;
    paragraphStyle.paragraphSpacing = paragraphSpacing;
    paragraphStyle.headIndent = indentation;

    NSMutableAttributedString *bulletList = [NSMutableAttributedString new];

    for (NSString *string in stringList) {
        NSString *formattedString = [NSString stringWithFormat:@"%@\t%@\n", bullet, string];
        NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:formattedString];
        if (string == stringList.lastObject) {
            paragraphStyle = [paragraphStyle mutableCopy];
            paragraphStyle.paragraphSpacing = 0;
        }
        [attributedString addAttributes:@{NSParagraphStyleAttributeName: paragraphStyle} range:NSMakeRange(0, attributedString.length)];
        [attributedString addAttributes:textAttributes range:NSMakeRange(0, attributedString.length)];

        NSRange rangeForBullet = [formattedString rangeOfString:bullet];
        [attributedString addAttributes:bulletAttributes range:rangeForBullet];
        [bulletList appendAttributedString:attributedString];
    }

    return bulletList;
}

E você pode usar esse método da seguinte maneira, passando um NSArraycom os textos e desde que já tenha um UILabel:

NSArray *stringArray = @[@"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                         @"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                         @"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                         @"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                         ];

label.attributedText = [self attributedStringForBulletTexts:stringArray
                                                   withFont:label.font
                                               bulletString:@"•"
                                                indentation:15
                                                lineSpacing:2
                                           paragraphSpacing:10
                                                  textColor:UIColor.blackColor
                                                bulletColor:UIColor.grayColor];

1

Sim. Copie e cole o seguinte marcador: O compilador do Swift pode interpretar e exibir o marcador conforme desejado no Xcode, nada mais é necessário.

Reuso

extension String {
    static var bullet: String {
        return "• "
    }
}


print(String.bullet + "Buy apples")
let secondPoint: String = .bullet + "Buy oranges"
print(secondPoint)

resultado

 Buy apples
 Buy oranges

Matriz reutilizável

extension Array where Element == String {

    var bulletList: String {
        var po = ""
        for (index, item) in self.enumerated() {
            if index != 0 {
                po += "\n"
            }
            po += .bullet + item
        }
        return po
    }
}


print(["get apples", "get oranges", "get a bannana"].bulletList)

resultado

 get apples
 get oranges
 get a bannana

1
Se você votar negativamente. Ao menos tenha a cortesia de dizer o porquê.
ScottyBlades

Acho que o motivo é porque sua solução não é a ideal. Usar o ponto de código Unicode é o melhor.
Robert J. Clegg

Obrigado pela resposta atenciosa. Por que o ponto Unicode é melhor?
ScottyBlades

Porque, se o desenvolvedor precisasse fazer isso várias vezes, em diferentes telas ou projetos (não no mesmo período), isso os beneficiaria mais, sabendo qual é o valor do ponto de código. Assim, não sendo necessário ir e refinar a resposta acima ou local semelhante, para copiá-la. Bem, essa é a minha opinião sobre isso de qualquer maneira.
Robert J. Clegg

1
@ RobertJ.Clegg Acabei de atualizar minha resposta para fornecer uma opção reutilizável. Você pode me dar um exemplo de quando uma string de ponto de código torna o marcador mais reutilizável do que uma string de ponto de marcador direto?
ScottyBlades

0

Se alguém estiver procurando um texto textview com marcadores como eu, abaixo está a resposta. A propósito, funciona apenas para texto estático.

   Better experience - Refer a friend and How to Play \n Tournaments performance improvement\n UI/UX Improvements\n Critical bug fixes

Atribuí o texto acima para textview. Funcionou como planejado para mim.


0

Aqui está a solução de @krunal refatorada para a NSAttributedStringextensão Swift 5 :

import UIKit

public extension NSAttributedString {
    static func makeBulletList(from strings: [String],
                               bulletCharacter: String = "\u{2022}",
                               bulletAttributes: [NSAttributedString.Key: Any] = [:],
                               textAttributes: [NSAttributedString.Key: Any] = [:],
                               indentation: CGFloat = 20,
                               lineSpacing: CGFloat = 1,
                               paragraphSpacing: CGFloat = 10) -> NSAttributedString
    {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.defaultTabInterval = indentation
        paragraphStyle.tabStops = [
            NSTextTab(textAlignment: .left, location: indentation)
        ]
        paragraphStyle.lineSpacing = lineSpacing
        paragraphStyle.paragraphSpacing = paragraphSpacing
        paragraphStyle.headIndent = indentation

        let bulletList = NSMutableAttributedString()

        for string in strings {
            let bulletItem = "\(bulletCharacter)\t\(string)\n"

            var attributes = textAttributes
            attributes[.paragraphStyle] = paragraphStyle

            let attributedString = NSMutableAttributedString(
                string: bulletItem, attributes: attributes
            )

            if !bulletAttributes.isEmpty {
                let bulletRange = (bulletItem as NSString).range(of: bulletCharacter)
                attributedString.addAttributes(bulletAttributes, range: bulletRange)
            }

            bulletList.append(attributedString)
        }

        if bulletList.string.hasSuffix("\n") {
            bulletList.deleteCharacters(
                in: NSRange(location: bulletList.length - 1, length: 1)
            )
        }

        return bulletList
    }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.