Pusatkan gambar NSTextAttachment di sebelah baris UILabel

Saya ingin menambahkan NSTextAttachmentgambar ke string atribut saya dan membuatnya berada di tengah secara vertikal.

Saya telah menggunakan kode berikut untuk membuat string saya:

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:DDLocalizedString(@"title.upcomingHotspots") attributes:attrs];
NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [[UIImage imageNamed:@"help.png"] imageScaledToFitSize:CGSizeMake(14.f, 14.f)];
cell.textLabel.attributedText = [str copy];

Namun, gambar tampak sejajar dengan bagian atas sel textLabel.

Bagaimana saya bisa mengubah persegi di mana lampiran digambar?

Anda dapat mengubah rect dengan subclassing NSTextAttachmentdan overriding attachmentBoundsForTextContainer:proposedLineFragment:glyphPosition:characterIndex:. Contoh:

- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
    CGRect bounds;
    bounds.origin = CGPointMake(0, -5);
    bounds.size = self.image.size;
    return bounds;
}

Ini bukanlah solusi yang sempurna. Anda harus mencari tahu asal Y "dengan mata" dan jika Anda mengubah font atau ukuran ikon, Anda mungkin ingin mengubah Y-origin. Tetapi saya tidak dapat menemukan cara yang lebih baik, kecuali dengan meletakkan ikon dalam tampilan gambar terpisah (yang memiliki kekurangan).

Anda dapat menggunakan capHeight font.

Objective-C

NSTextAttachment *icon = [[NSTextAttachment alloc] init];
UIImage *iconImage = [UIImage imageNamed:@"icon.png"];
[icon setBounds:CGRectMake(0, roundf(titleFont.capHeight - iconImage.size.height)/2.f, iconImage.size.width, iconImage.size.height)];
[icon setImage:iconImage];
NSAttributedString *iconString = [NSAttributedString attributedStringWithAttachment:icon];
[titleText appendAttributedString:iconString];

Cepat

let iconImage = UIImage(named: "icon.png")!
var icon = NSTextAttachment()
icon.bounds = CGRect(x: 0, y: (titleFont.capHeight - iconImage.size.height).rounded() / 2, width: iconImage.size.width, height: iconImage.size.height)
icon.image = iconImage
let iconString = NSAttributedString(attachment: icon)
titleText.append(iconString)

Gambar lampiran dirender pada garis dasar teks. Dan sumbu y dibalik seperti sistem koordinat grafik inti. Jika Anda ingin memindahkan gambar ke atas, setel bounds.origin.yke positif.

Gambar harus diratakan secara vertikal di tengah dengan capHeight teks. Jadi kita perlu menyetel bounds.origin.yke (capHeight - imageHeight)/2.

Untuk menghindari beberapa efek bergerigi pada gambar, kita harus membulatkan bagian pecahan dari y. Tapi font dan gambar biasanya kecil, bahkan perbedaan 1px membuat gambar terlihat tidak sejajar. Jadi saya menerapkan fungsi bulat sebelum membagi. Itu membuat bagian pecahan dari nilai y menjadi 0,0 atau 0,5

Dalam kasus Anda, tinggi gambar lebih besar dari capHeight font. Tapi Anda bisa menggunakan cara yang sama. Nilai offset y akan menjadi negatif. Dan itu akan ditata dari bawah garis dasar.

Coba - [NSTextAttachment bounds]. Tidak diperlukan subclass.

Untuk konteks, saya merender a UILabeluntuk digunakan sebagai gambar lampiran, kemudian mengatur batas seperti ini: attachment.bounds = CGRectMake(0, self.font.descender, attachment.image.size.width, attachment.image.size.height)dan garis dasar teks dalam gambar label dan teks dalam baris atribut yang diatribusikan sesuai keinginan.

Saya menemukan solusi sempurna untuk ini, berfungsi seperti pesona bagi saya, namun Anda harus mencobanya sendiri (mungkin konstanta tergantung pada resolusi perangkat dan mungkin apa pun;)

func textAttachment(fontSize: CGFloat) -> NSTextAttachment {
    let font = UIFont.systemFontOfSize(fontSize) //set accordingly to your font, you might pass it in the function
    let textAttachment = NSTextAttachment()
    let image = //some image
    textAttachment.image = image
    let mid = font.descender + font.capHeight
    textAttachment.bounds = CGRectIntegral(CGRect(x: 0, y: font.descender - image.size.height / 2 + mid + 2, width: image.size.width, height: image.size.height))
    return textAttachment
}

Harus berfungsi dan tidak boleh buram dengan cara apa pun (terima kasih CGRectIntegral)

Bagaimana dengan:

CGFloat offsetY = -10.0;

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.image = image;
attachment.bounds = CGRectMake(0.0, 
                               offsetY, 
                               attachment.image.size.width, 
                               attachment.image.size.height);

Tidak perlu subclass

@Travis benar bahwa offsetnya adalah font descender. Jika Anda juga perlu menskalakan gambar, Anda perlu menggunakan subclass NSTextAttachment. Di bawah ini adalah kode yang terinspirasi dari artikel ini . Saya juga mempostingnya sebagai intinya .

import UIKit

class ImageAttachment: NSTextAttachment {
    var verticalOffset: CGFloat = 0.0

    // To vertically center the image, pass in the font descender as the vertical offset.
    // We cannot get this info from the text container since it is sometimes nil when `attachmentBoundsForTextContainer`
    // is called.

    convenience init(_ image: UIImage, verticalOffset: CGFloat = 0.0) {
        self.init()
        self.image = image
        self.verticalOffset = verticalOffset
    }

    override func attachmentBoundsForTextContainer(textContainer: NSTextContainer, proposedLineFragment lineFrag: CGRect, glyphPosition position: CGPoint, characterIndex charIndex: Int) -> CGRect {
        let height = lineFrag.size.height
        var scale: CGFloat = 1.0;
        let imageSize = image!.size

        if (height < imageSize.height) {
            scale = height / imageSize.height
        }

        return CGRect(x: 0, y: verticalOffset, width: imageSize.width * scale, height: imageSize.height * scale)
    }
}

Gunakan sebagai berikut:

var text = NSMutableAttributedString(string: "My Text")
let image = UIImage(named: "my-image")!
let imageAttachment = ImageAttachment(image, verticalOffset: myLabel.font.descender)
text.appendAttributedString(NSAttributedString(attachment: imageAttachment))
myLabel.attributedText = text

Jika Anda memiliki ascendent yang sangat besar dan ingin memusatkan gambar (pusat ketinggian topi) seperti saya coba ini

let attachment: NSTextAttachment = NSTextAttachment()
attachment.image = image
if let image = attachment.image{
    let y = -(font.ascender-font.capHeight/2-image.size.height/2)
    attachment.bounds = CGRect(x: 0, y: y, width: image.size.width, height: image.size.height).integral
}

Perhitungan y seperti gambar di bawah ini

Perhatikan bahwa nilai y adalah 0 karena kita ingin gambar bergeser ke bawah dari aslinya

Jika Anda ingin berada di tengah seluruh label. Gunakan nilai y ini:

let y = -((font.ascender-font.descender)/2-image.size.height/2)

Kita bisa membuat ekstensi di swift 4 yang menghasilkan lampiran dengan gambar di tengah seperti ini:

extension NSTextAttachment {
    static func getCenteredImageAttachment(with imageName: String, and 
    font: UIFont?) -> NSTextAttachment? {
        let imageAttachment = NSTextAttachment()
    guard let image = UIImage(named: imageName),
        let font = font else { return nil }

    imageAttachment.bounds = CGRect(x: 0, y: (font.capHeight - image.size.height).rounded() / 2, width: image.size.width, height: image.size.height)
    imageAttachment.image = image
    return imageAttachment
    }
}

Kemudian Anda dapat melakukan panggilan dengan mengirimkan nama gambar dan font:

let imageAttachment = NSTextAttachment.getCenteredImageAttachment(with: imageName,
                                                                   and: youLabel?.font)

Dan kemudian tambahkan imageAttachment ke atributedString

Dalam kasus saya, memanggil sizeToFit () membantu. Dalam 5.1 cepat

Di dalam label kustom Anda:

func updateUI(text: String?) {
    guard let text = text else {
        attributedText = nil
        return
    }

    let attributedString = NSMutableAttributedString(string:"")

    let textAttachment = NSTextAttachment ()
    textAttachment.image = image

    let sizeSide: CGFloat = 8
    let iconsSize = CGRect(x: CGFloat(0),
                           y: (font.capHeight - sizeSide) / 2,
                           width: sizeSide,
                           height: sizeSide)
    textAttachment.bounds = iconsSize

    attributedString.append(NSAttributedString(attachment: textAttachment))
    attributedString.append(NSMutableAttributedString(string: text))
    attributedText = attributedString

    sizeToFit()
}

Harap gunakan -lineFrag.size.height / 5.0 untuk tinggi batas. Ini persis memusatkan gambar dan sejajar dengan teks untuk semua ukuran font

override func attachmentBoundsForTextContainer(textContainer: NSTextContainer, proposedLineFragment lineFrag: CGRect, glyphPosition position: CGPoint, characterIndex charIndex: Int) -> CGRect
{
    var bounds:CGRect = CGRectZero

    bounds.size = self.image?.size as CGSize!
    bounds.origin = CGPointMake(0, -lineFrag.size.height/5.0);

    return bounds;
}