จัดรูปแบบ UILabel ด้วยสัญลักษณ์แสดงหัวข้อย่อยหรือไม่


89

เป็นไปได้ไหมที่จะจัดรูปแบบtextใน a UILabelเพื่อแสดงสัญลักษณ์แสดงหัวข้อย่อย ?

ถ้าเป็นเช่นนั้นฉันจะทำได้อย่างไร?


@Hoque: UILabels ไม่ถือว่าข้อความของพวกเขาเป็น HTML
Ben Zotto

2
นี่คือคลาสสำหรับสิ่งนี้! codeload.github.com/eyalc/ECListView/zip/master
Hemang

20
เหตุใดจึงปิดเป็นนอกประเด็น นี่เป็นคำถามที่ถูกต้องพร้อมคำตอบที่ถูกต้อง
len

2
เหตุใดสิ่งนี้บนโลกจึงถูกทำเครื่องหมายเป็นนอกหัวข้อโดยstackoverflow.com/users/237838/andrew-barberอาจซ้ำกัน แต่ไม่ได้หมายความว่านอกหัวข้อ ...
AppHandwerker

2
ปุ่มลัดALT+8 = •
TheTiger

คำตอบ:


164

อาจใช้จุดรหัส Unicode สำหรับอักขระสัญลักษณ์แสดงหัวข้อย่อยในสตริงของคุณ?

วัตถุประสงค์ -c

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

สวิฟต์ 4

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

4
ยกโทษให้กับความไม่รู้ของฉัน แต่ฉันใช้ UILabels ตลอดเวลาและฉันสงสัยว่าคุณสามารถระบุ "ตัวอย่างเช่น" ได้หรือไม่
daveMac

1
myLabel.numberOfLines = 0ทำให้คุณมีป้ายกำกับหลายบรรทัดซึ่งจะเคารพอักขระตัวแบ่งบรรทัด โดยทั่วไปแม้ว่าฉันจะชอบใช้UITextFieldเพราะมันยืดหยุ่นกว่า ตัวอย่างเช่นคุณสามารถตรวจจับได้อย่างง่ายดายว่าผู้ใช้แตะอักขระใดเมื่อทำงานกับ a UITextFieldฉันไม่คิดว่าคุณจะทำเช่นนั้นกับไฟล์UILabel. มุมมองข้อความยังมีคุณสมบัติที่เป็นระเบียบอื่น ๆ อีกมากมาย
John Erck

7
อีกวิธีหนึ่งคือการใช้option+8
atulkhatri

3
อย่าลืมใช้ตัวพิมพ์ใหญ่ "u" หากคุณใช้สตริงที่แปลได้: \ U2022
Nikolaj Nielsen

1
สวิฟท์แตกต่างกันเล็กน้อย, "\ U {2022}"
Anders

80

เพียงแค่เพิ่ม " • "

แม้แต่ฉันก็กำลังมองหาบางอย่างเช่นนี้สำหรับtextView. สิ่งที่ฉันทำเพียงแค่ต่อท้ายสตริงด้วยสตริงของฉันแล้วส่งต่อไปยังของฉันtextViewก็สามารถทำได้labelsเช่นกัน

ฉันตอบสิ่งนี้สำหรับผู้ดูในอนาคต


•ทำงานให้ฉัน ฉันมี * ใน Xcode ฉันเพิ่งคัดลอก / เปลี่ยนโดยใช้•และใช้ได้ดีกับฉลากของฉันฉันแทนที่ "ป้ายกำกับ" ด้วย•
Brian

55

นี่คือทางออกที่ดีสำหรับ 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)

เพิ่มแอตทริบิวต์ bullet

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
}

นี่คือผลลัพธ์:

ป้อนคำอธิบายภาพที่นี่


นี่เป็นวิธีการแก้ปัญหาที่สง่างามมาก
Jeroen

10

ในSwift 4ฉันใช้ "•" กับ Line ใหม่

 @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"
  }

เอาท์พุต:

ป้อนคำอธิบายภาพที่นี่


9
ทำไมต้องเลี่ยงปลา
rd_

แค่คัดลอกและวาง -> •
Vijay Patidar


3

ลองดูลิงค์นี้ฉันสร้างมุมมองแบบกำหนดเองเพื่อจัดรูปแบบข้อความด้วยสัญลักษณ์แสดงหัวข้อย่อย / สัญลักษณ์อื่น ๆ / รูปภาพ (โดยใช้คุณสมบัติ attributeText ของ UILabel) เป็นสัญลักษณ์รายการ (Swift 3.0) https://github.com/akshaykumarboth/SymbolTextLabel-iOS- รวดเร็ว

 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

หากคุณต้องการจัดแนวการเยื้องข้อความสำหรับสัญลักษณ์แสดงหัวข้อย่อยเช่นกันคุณสามารถใช้วิธีการต่อไปนี้ที่สร้างNSAttributedStringด้วยคุณสมบัติการเยื้องและระยะห่างที่เหมาะสม:

- (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;
}

และคุณสามารถใช้วิธีการดังต่อไปนี้โดยส่งNSArrayข้อความและระบุว่าคุณมี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

ใช่. คัดลอกและวางสัญลักษณ์แสดงหัวข้อย่อยต่อไปนี้: คอมไพเลอร์ของ Swift สามารถตีความและแสดงสัญลักษณ์แสดงหัวข้อย่อยตามที่ต้องการภายใน Xcode โดยไม่จำเป็นต้องใช้อะไรอีก

ใช้ซ้ำ

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


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

เอาท์พุท

• Buy apples
• Buy oranges

อาร์เรย์ที่ใช้ซ้ำได้

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)

เอาท์พุท

get apples
• get oranges
• get a bannana

1
หากคุณลงคะแนน อย่างน้อยก็มีมารยาทที่จะพูดว่าทำไม
ScottyBlades

ฉันคิดว่าสาเหตุเกิดจากการแก้ปัญหาของคุณไม่เหมาะสม การใช้จุดรหัสยูนิโคดจะดีที่สุด
Robert

ขอบคุณสำหรับการตอบกลับที่รอบคอบ ทำไมจุด Unicode ถึงดีกว่า?
ScottyBlades

เนื่องจากหากนักพัฒนาจำเป็นต้องทำสิ่งนี้หลาย ๆ ครั้งในหน้าจอหรือโครงการต่างๆ (ไม่ใช่ในช่วงเวลาเดียวกัน) จะเป็นประโยชน์ต่อพวกเขามากขึ้นโดยการรู้ว่าค่าคะแนนของรหัสคืออะไร ดังนั้นไม่จำเป็นต้องไปและปรับคำตอบข้างต้นหรือสถานที่ที่คล้ายกันเพื่อคัดลอกจาก นั่นคือความคิดของฉันอยู่แล้ว
Robert

1
@ RobertJ.Clegg ฉันเพิ่งอัปเดตคำตอบเพื่อให้เป็นตัวเลือกที่ใช้ซ้ำได้ คุณช่วยยกตัวอย่างได้ไหมว่าเมื่อสตริงพอยต์รหัสทำให้สัญลักษณ์แสดงหัวข้อย่อยสามารถนำมาใช้ซ้ำได้มากกว่าสตริงสัญลักษณ์แสดงหัวข้อย่อยโดยตรง
ScottyBlades

0

หากใครที่กำลังมองหา textview text ที่มีสัญลักษณ์แสดงหัวข้อย่อยเหมือนผมด้านล่างนี้คือคำตอบ โดยวิธีนี้ใช้ได้กับข้อความคงที่เท่านั้น

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

ฉันได้กำหนดข้อความด้านบนให้กับ textview มันได้ผลตามที่ตั้งใจไว้สำหรับฉัน


0

นี่คือวิธีแก้ปัญหาจาก@krunal refactored เป็นNSAttributedStringส่วนขยาย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
    }
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.