NSTextAttachment: ano ito at paano magdagdag ng larawan sa teksto sa iOS
Ang NSTextAttachment ay isang klase mula sa UIKit framework na nagbibigay-daan sa pag-embed ng mga larawan at iba pang media object sa naka-format na teksto sa pamamagitan ng NSAttributedString. Gumagana ito sa antas ng TextKit at Core Text, na nagbibigay sa mga developer ng kontrol sa laki, posisyon, at pag-uugali ng mga attachment sa loob ng daloy ng teksto. Ayon sa Apple Documentation (2025), sinusuportahan ng NSTextAttachment ang mga larawan, PDF, at custom na view container, na nagsasama sa UITextView at UILabel. Ang pag-unawa sa API na ito ay kinakailangan para sa paglikha ng Rich Text sa mga iOS application, mula sa mga chat at editor hanggang sa mga news feed na may mga icon sa mga caption.
Mga Pangunahing Punto
- NSTextAttachment — UIKit class para sa pag-embed ng media sa naka-format na iOS text.
- Ang larawan ay idinaragdag sa pamamagitan ng NSAttributedString na may key na NSAttachmentAttributeName.
- Ang property na bounds ay kumokontrol sa laki at vertical na paglipat ng attachment.
- Sinusuportahan ng NSTextAttachment ang mga larawan, PDF at custom na file sa pamamagitan ng data container.
- Ang API ay nagsasama sa UITextView, UILabel at TextKit para sa flexible na layout ng teksto.
Ano ang NSTextAttachment?
NSTextAttachment ay isang klase mula sa UIKit framework na nagpapahintulot sa pag-embed ng mga media object nang direkta sa nilalaman ng teksto ng NSAttributedString. Hindi tulad ng isang hiwalay na UIImageView na inilagay sa tabi ng teksto, ginagawa ng NSTextAttachment ang larawan na bahagi ng daloy ng teksto: ang larawan ay gumagalaw kasama ng mga linya, nakikilahok sa pagkakahanay, at sumasakop ng espasyo tulad ng isang ordinaryong character.
Ang klase ay bahagi ng arkitektura ng TextKit na namamahala sa pag-render ng teksto sa iOS at macOS. Hinahati ng TextKit ang teksto sa mga glyph, isinasaalang-alang ang kerning, ligature, at interline — at ang NSTextAttachment ay sumasali sa pipeline na ito bilang isang espesyal na character na nire-render hindi bilang isang titik, kundi bilang isang graphic object.
Ang bawat instance ng NSTextAttachment ay naglalaman ng mga property na contents (data ng file), fileType (UTI type ng nilalaman), at bounds (rectangle sa points na tumutukoy sa laki at posisyon). Ayon sa Apple Human Interface Guidelines, ang bounds ay default na katumbas ng laki ng larawan, ngunit maaaring baguhin para sa tumpak na pagkakasya sa font.
Gamitin ang NSTextAttachment sa halip na hiwalay na UIImageView kapag ang larawan ay dapat kumilos bilang bahagi ng teksto, sa mga chat, news feed, text editor, at form na may mga icon sa mga input field.
Paano magdagdag ng larawan sa teksto sa pamamagitan ng NSTextAttachment
Ang pangunahing senaryo ng pagtatrabaho sa NSTextAttachment ay binubuo ng tatlong hakbang: lumikha ng instance, itakda ang larawan, at ikabit sa NSAttributedString. Tingnan natin ang proseso gamit ang halimbawa ng Swift.
swift
let attachment = NSTextAttachment()
attachment.image = UIImage(named: "icon-star")
let attachmentString = NSAttributedString(attachment: attachment)
let text = NSMutableAttributedString(string: "Rating: ")
text.append(attachmentString)
let label = UILabel()
label.attributedText = textPagkatapos tawagan ang NSAttributedString(attachment:), ang NSTextAttachment object ay nagiging attribute na NSAttachmentAttributeName na ikinakabit sa isang espesyal na replacement character (object replacement character, code 0xFFFC). Ang character na ito ay hindi ipinapakita bilang isang titik — sa halip, ang larawan mula sa property na image ay iginuguhit.
Kung ang larawan ay dapat na nasa gitna ng linya ng teksto (halimbawa, icon pagkatapos ng salita), ipasok lamang ang attachmentString sa nais na posisyon sa NSMutableAttributedString. Awtomatikong isasaalang-alang ng TextKit ang taas ng linya at iaayon ang larawan sa baseline.
Mahalaga: ang property na image ay available lamang sa iOS (simula sa iOS 7). Sa macOS gamitin ang property na contents na may NSImage. Para sa backward compatibility, palaging itakda ang image nang direkta, huwag umasa sa data container.
Pag-configure ng bounds at posisyon ng attachment
Bilang default, ipinapakita ng NSTextAttachment ang larawan sa orihinal na laki nito sa points. Sa pagsasagawa, halos palaging kinakailangan ang pagsasaayos ng laki at vertical na posisyon — para dito ginagamit ang property na bounds.
Ang istraktura ng CGRect bounds ay may kasamang origin (paglipat sa X at Y) at size (lapad at taas). Ang paglipat sa Y ay lalong mahalaga: ang negatibong halaga ay nagbababa ng larawan sa ibaba ng baseline, ang positibong halaga ay nagtataas nito. Isang tipikal na senaryo — ihanay ang icon sa gitna ng linya ng teksto.
swift
let attachment = NSTextAttachment()
attachment.image = UIImage(named: "icon-star")
let font = UIFont.systemFont(ofSize: 16)
let fontCapHeight = font.capHeight
let imageSize = CGSize(width: 18, height: 18)
attachment.bounds = CGRect(
x: 0,
y: (fontCapHeight - imageSize.height) / 2,
width: imageSize.width,
height: imageSize.height
)Ang pagkalkula ng pagkakahanay ay gumagamit ng capHeight ng font — taas ng malaking titik, hindi ang buong taas ng linya. Tinitiyak nito na ang icon ay biswal na tumutugma sa itaas na hangganan ng teksto, hindi lumulutang sa pagitan ng baseline at ascender. Ang laki ng larawan sa halimbawa ay 18×18 pt, tipikal para sa mga icon sa UI text.
Kung ang larawan ay dapat na mas malaki kaysa sa linya ng teksto (halimbawa, preview ng larawan sa chat), awtomatikong tataasin ng TextKit ang line spacing para sa kasalukuyang linya. Sa kasong ito, ang bounds ay nakatakda sa natural na laki, at ang paglipat sa Y ay zero.
PDF at custom na mga attachment
Sinusuportahan ng NSTextAttachment hindi lamang ang PNG at JPEG, kundi pati na rin ang mga dokumentong PDF at arbitraryong file sa pamamagitan ng property na contents. Ginagawa nitong isang unibersal na tool para sa Rich Text sa mga iOS application.
Kapag nagtatakda ng PDF na larawan sa attachment.image, awtomatikong nire-render ng system ang unang pahina ng dokumento. Gayunpaman, para sa tumpak na pagpapakita, gamitin ang data nang direkta sa pamamagitan ng initializer na may data at UTI type:
swift
guard let pdfData = Bundle.main.url(forResource: "document",
withExtension: "pdf") else { return }
let fileData = Data(contentsOf: pdfData)
let attachment = NSTextAttachment(data: fileData,
ofType: "com.adobe.pdf")
attachment.bounds = CGRect(x: 0, y: -4,
width: 24, height: 24)
let pdfString = NSAttributedString(attachment: attachment)Ang parameter na ofType ay tumatanggap ng UTI string (Uniform Type Identifier). Mga karaniwang type: public.image (anumang larawan), public.jpeg, public.png, com.adobe.pdf. Kapag tinukoy ang tamang UTI, pinipili ng system ang tamang paraan ng pag-render — para sa PDF ito ay CGPDFDocument, para sa mga larawan — CGImageSource.
Para sa custom na mga type ng file (halimbawa, vector graphics sa SVG format) kakailanganin ang subclass ng NSTextAttachment na nag-o-override sa method na image(forBounds:textContainer:characterIndex:). Kung hindi angkop ang standard na pag-render, ibalik ang nil at ipatupad ang pagguhit sa pamamagitan ng Core Graphics sa method na draw.
NSTextAttachment sa UITextView at delegasyon
Gumagana nang tama ang NSTextAttachment pareho sa UILabel at sa UITextView. Gayunpaman, ang UITextView ay nagbibigay ng higit pang mga kakayahan: pakikipag-ugnayan sa mga attachment (pag-tap sa icon), pag-edit ng teksto kasama ng mga larawan, at suporta para sa NSAttachmentBehavior.
Para sa paghawak ng tap sa NSTextAttachment sa UITextView, ginagamit ang delegate na UITextViewDelegate at method na textView(_:shouldInteractWith:in:interaction:). Ang method na ito ay tinatawag kapag hinawakan ng user ang attachment at nagbibigay-daan sa pag-navigate sa isang screen, pagbubukas ng popup, o pag-play ng animation.
swift
func textView(_ textView: UITextView,
shouldInteractWith attachment: NSTextAttachment,
in characterRange: NSRange,
interaction: UITextItemInteraction) -> Bool {
if interaction == .preview {
return false
}
// Buksan ang screen ng detalye
showImageDetail(attachment.image)
return false
}Ang method ay nag-iiba ng mga type ng interaksyon sa pamamagitan ng parameter na interaction: .preview (3D Touch / Haptic Touch), .default (ordinaryong tap), at .presentActions (context menu). Para sa bawat type maaari mong itakda ang sariling pag-uugali o ipagbawal ito sa pamamagitan ng pagbabalik ng false.
Kapag nag-eedit ng UITextView na may NSTextAttachment, mahalagang tandaan: ang pagtanggal ng replacement character (0xFFFC) ay nagtatanggal din ng attachment. Nakikita ng user ang larawan bilang isang solong elemento, ito ay pinipili nang buo, hindi pixel sa pixel. Para sa suporta ng pag-drag ng mga attachment sa iOS 15+, gamitin ang NSTextAttachmentViewProvider.
Mga karaniwang pagkakamali sa pagtatrabaho sa NSTextAttachment
Ang unang karaniwang pagkakamali — pagbalewala sa bounds. Ang mga developer ay madalas na umaasa sa orihinal na laki ng larawan, na nagreresulta sa mga higanteng icon sa teksto o, sa kabaligtaran, sa mga larawan na halos hindi nakikita. Palaging itakda ang bounds nang tahasan na isinasaalang-alang ang font at konteksto.
Ang pangalawang pagkakamali — maling paglipat sa Y. Ang positibong halaga sa bounds.origin.y ay nagbababa ng larawan (sa UIKit coordinate system ang Y axis ay nakaturo pababa — tila hindi lohikal, ngunit ganito gumagana ang Core Graphics). Para sa pagkakahanay sa gitna ng linya, gamitin ang formula na may capHeight ng font, tulad ng ipinakita sa seksyon 3.
Ang ikatlong problema — pagkawala ng larawan sa pagbabago ng traitCollection. Kapag nagpalit ang user ng Dark Mode o Dynamic Type, maaaring magbago ang laki ng font habang ang bounds ay nananatiling pareho. Solusyon — kalkulahin ang bounds nang dynamic sa method na layoutSubviews o sa pamamagitan ng KVO sa font.
Ang ikaapat na karaniwang pagkakamali — paggamit ng NSTextAttachment sa UILabel na may numberOfLines > 1. Sa multi-line mode at limitadong lapad, tama ang paglipat ng TextKit ng mga linya kasama ng larawan. Ang problema ay lumitaw kapag ang taas ng attachment ay lumampas sa taas ng linya, ang mga kalapit na linya ay nagsasapawan. Solusyon — dagdagan ang lineSpacing sa pamamagitan ng NSMutableParagraphStyle.
Mga Madalas Itanong
Paano naiiba ang NSTextAttachment sa UIImageView sa teksto?
NSTextAttachment ginagawa ang larawan na bahagi ng daloy ng teksto: ito ay gumagalaw, nakaayon, at naka-scale kasama ng teksto. Ang UIImageView ay nakatali sa mga coordinate ng superview at hindi nakikilahok sa layout ng teksto.
Maaari bang idagdag ang NSTextAttachment sa UILabel?
Oo, kung itatakda mo ang property na attributedText sa halip na text. Tamang ipinapakita ng UILabel ang NSTextAttachment, ngunit hindi nito sinusuportahan ang interaktiviti. Para sa pag-tap sa attachment, gamitin ang UITextView.
Paano baguhin ang laki ng larawan pagkatapos gumawa ng attachment?
Baguhin ang property na bounds ng umiiral na instance ng NSTextAttachment. Awtomatikong magre-render muli ang teksto gamit ang mga bagong sukat nang hindi na kailangang lumikha ng bagong NSAttributedString.
Sinusuportahan ba ng NSTextAttachment ang mga animated na larawan?
NSTextAttachment ay sumusuporta sa mga static na larawan. Para sa GIF at animated na mga format, kakailanganin ang custom na implementasyon sa pamamagitan ng NSTextAttachmentViewProvider sa iOS 15+ o sa pamamagitan ng CADisplayLink.
Paano magdagdag ng NSTextAttachment sa teksto nang programmatically?
Lumikha ng instance ng NSTextAttachment, itakda ang image o data, itakda ang bounds, balutin sa NSAttributedString(attachment:) at ipasok sa NSMutableAttributedString sa pamamagitan ng method na insert(_:at:).
Buod
- NSTextAttachment — UIKit class para sa pag-embed ng mga larawan, PDF, at iba pang media sa naka-format na teksto.
- Ang larawan ay idinaragdag sa pamamagitan ng NSAttributedString(attachment:) at nagiging bahagi ng daloy ng teksto.
- Ang property na bounds ay kumokontrol sa laki at posisyon: palaging itakda ito nang tahasan na isinasaalang-alang ang font.
- Para sa pagkakahanay ng icon sa gitna ng linya, gamitin ang formula na may capHeight ng kasalukuyang font.
- Ang mga PDF attachment ay sinusuportahan sa pamamagitan ng initializer na may data at tamang UTI type.
- Para sa paghawak ng tap sa attachment, gamitin ang UITextViewDelegate at method na shouldInteractWith.
- Sa pagbabago ng Dynamic Type, muling kalkulahin ang bounds nang dynamic upang maiwasan ang pagsasapawan ng mga linya.
Gagawa kami ng mobile application na turnkey
Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.
Basahin din