UITextView: ano ito, multi-line input at prinsipyo ng paggana

Ano ang UITextView

UITextView ay isang component ng UIKit na dinisenyo para sa pagpapakita at pag-edit ng multi-line na teksto. Hindi tulad ng UILabel, ang UITextView ay sumusuporta sa pagpili ng teksto, pag-edit, pag-scroll kapag lumagpas sa laki at attribute na teksto. Bilang tagapagmana ng UIScrollView, awtomatikong pina-aktibo ng UITextView ang vertical at horizontal na pag-scroll kapag lumagpas ang nilalaman — ito ay na-configure sa pamamagitan ng isScrollEnabled. Sinusuportahan ng klase ang pag-edit sa pamamagitan ng property na isEditable: itakda ang false para sa read-only mode. Ang UITextView ay gumagana sa NSLayoutManager sa pamamagitan ng TextKit system: NSTextStorage (pag-iimbak ng attribute na teksto) → NSLayoutManager (layout ng mga linya) → NSTextContainer (geometry ng lugar ng teksto). Ang arkitekturang ito ay nagbibigay-daan sa paglikha ng custom na layout na may text na bumabalot sa mga larawan, multi-column na teksto at kumplikadong text layout. Ang UITextView ay ginagamit para sa pagpapakita ng mga artikulo, paglalarawan, log, komento at anumang multi-line na teksto sa iOS.

UITextView vs UITextField: mga pangunahing pagkakaiba

Ang pagkakaiba sa pagitan ng UITextView at UITextField ay lampas sa bilang ng mga linya. Ang UITextField ay isang single-line na UIControl na may suporta sa placeholder, left/right view at clear button. Ang UITextView ay isang multi-line na UIScrollView na may buong TextKit system para sa attribute na teksto. Hindi sinusuportahan ng UITextField ang NSAttributedString sa antas ng pagpapakita (sa pamamagitan lang ng attributedText na may limitasyon), ganap na pinoproseso ng UITextView ang NSAttributedString na may iba't ibang font, estilo ng talata at naka-embed na mga larawan. Ang UITextField ay may built-in na clear button (clearButtonMode), wala ang UITextView nito — nangangailangan ng custom na implementasyon. Awtomatikong binabago ng UITextField ang laki nito ayon sa nilalaman (intrinsicContentSize), ang UITextView ay nangangailangan ng manual na pamamahala ng taas sa pamamagitan ng contentSize observation o Auto Layout constraints. Sinusuportahan ng UITextView ang dataDetectorTypes (awtomatikong pagtuklas ng link), sinusuportahan ito ng UITextField mula iOS 16+. Para sa pag-input ng multi-line na teksto (komento, tala, mensahe) piliin ang UITextView. Para sa mga field ng form (pangalan, email, password) gamitin ang UITextField.

NSAttributedString at pag-format ng teksto

NSAttributedString ay isang pangunahing kakayahan ng UITextView na nagpapaiba nito mula sa UITextField at UILabel. Ang attribute na string ay nagbibigay-daan sa pagtatakda ng iba't ibang font, kulay, spacing ng linya, pagkakahanay at mga link sa loob ng isang teksto. Mga property: textView.attributedText = attributedString. Mga pangunahing atributo ng NSAttributedString.Key: font (.systemFont, .boldSystemFont, custom na UIFont), foregroundColor, backgroundColor, paragraphStyle (NSMutableParagraphStyle na may lineSpacing, alignment, lineBreakMode), link (URL para sa interactive na link), underlineStyle, strikethroughStyle, shadow, baselineOffset, kern (spacing ng titik). Para gumawa ng attributedString gamitin ang init(string:, attributes:) o NSMutableAttributedString para magdagdag ng mga atributo sa iba't ibang range. Awtomatikong ipinapakita ng UITextView ang mga link (link attribute) bilang interactive — kapag pinindot, tatawagin ang delegado na pamamaraang shouldInteractWithURL. Para i-reset ang mga atributo para sa bagong input gamitin ang typingAttributes.

import UIKit

let textView = UITextView()
textView.isEditable = false
textView.isScrollEnabled = true
textView.dataDetectorTypes = [.link, .phoneNumber]

let attributedString = NSMutableAttributedString(
    string: "Visit our website or call +1-800-555-0199"
)
attributedString.addAttributes([
    .font: UIFont.systemFont(ofSize: 16),
    .foregroundColor: UIColor.label,
], range: NSRange(location: 0, length: 11))

let linkRange = (attributedString.string as NSString)
    .range(of: "website")
attributedString.addAttributes([
    .link: URL(string: "https://example.com")!,
    .foregroundColor: UIColor.systemBlue,
], range: linkRange)

textView.attributedText = attributedString

Delegate UITextViewDelegate at paghawak ng link

UITextViewDelegate ay isang protocol na namamahala sa pag-edit at interaksyon sa teksto. Mga pangunahing pamamaraan: textViewDidBeginEditing(textView) — tatawagin kapag nagsimula ang pag-edit; textViewDidEndEditing — kapag natapos; textViewDidChange — sa bawat pagbabago ng teksto; textViewDidChangeSelection — kapag nagbago ang seleksyon; textViewShouldInteractWithURL — kapag pinindot ang link (nagbabalik ng Bool, kung pinapayagan ang nabigasyon); textViewShouldInteractWithTextAttachment — kapag pinindot ang naka-embed na larawan. Para hawakan ang mga link sa loob ng UITextView i-override ang shouldInteractWithURL — dito maaari mong: buksan ang URL sa SFSafariViewController, magpakita ng UIAlertController para sa kumpirmasyon, hawakan ang custom na URL schemes. Mahalaga: kung ang textView.isEditable = true, ang mga link ay hindi maaaring pindutin hanggang sa double tap — para sa interactive na link habang nag-e-edit gamitin ang gesture recognizers.

Paghawak ng link sa pamamagitan ng SFSafariViewController

SFSafariViewController ay ang karaniwang paraan ng pagbubukas ng mga link sa iOS app. Sa pamamaraang shouldInteractWithURL gumawa ng SFSafariViewController na may URL at i-present ito nang modal o sa pamamagitan ng navigationController. Para sa mga universal na link gamitin ang UIApplication.shared.open(url, options) — ngunit ito ay lalabas sa app. Para pigilan ang pagbubukas ng mga link magbalik ng false sa shouldInteractWithURL at hawakan ang URL mismo.

Sistema ng Text Container: margin at exclusionPaths

NSTextContainer — bahagi ng arkitektura ng TextKit, na tumutukoy sa geometric na lugar kung saan ipinapakita ang teksto ng UITextView. Bawat UITextView ay may karaniwang textContainer, na-configure sa pamamagitan ng: textView.textContainerInset — margin ng teksto mula sa hangganan ng textView (UIEdgeInsets); textView.textContainer.lineFragmentPadding — horizontal na margin sa loob ng bawat linya; textView.textContainer.maximumNumberOfLines — limitasyon ng bilang ng mga linya (0 = walang limitasyon); textView.textContainer.exclusionPaths — array ng UIBezierPath para sa mga lugar na dapat iwasan ng teksto (mga larawan, custom na hugis). Ang exclusionPaths ay nagbibigay-daan sa paglikha ng kumplikadong layout: bumabalot ang teksto sa bilog na larawan ng profile, icon o anumang arbitrary na contour. Para sa dynamic na laki ng UITextView obserbahan ang contentSize sa pamamagitan ng KVO o delegado at i-update ang mga constraint.

// Dynamic na taas ng UITextView sa pamamagitan ng contentSize
func textViewDidChange(textView: UITextView) {
    let fixedWidth = textView.frame.size.width
    let newSize = textView.sizeThatFits(
        CGSize(width: fixedWidth, height: CGFloat.greatestFiniteMagnitude)
    )
    heightConstraint.constant = newSize.height
    UIView.animate(withDuration: 0.1) {
        self.view.layoutIfNeeded()
    }
}

// ExclusionPath para sa pagbalot ng larawan
let imageFrame = CGRect(x: 16, y: 100, width: 80, height: 80)
let exclusionPath = UIBezierPath(rect: imageFrame)
textView.textContainer.exclusionPaths = [exclusionPath]

Data Detector Types: awtomatikong pagtuklas ng data

dataDetectorTypes — property ng UITextView na awtomatikong kumikilala at gumagawang interactive ng mga tiyak na uri ng data sa teksto: .link (URL, email), .phoneNumber (mga numero ng telepono), .address (mga address), .calendarEvent (mga petsa at kaganapan), .flightNumber (mga numero ng flight), .lookupSuggestion (mga mungkahi sa paghahanap), .trackingNumber (mga numero ng pagsubaybay), .money (mga halaga), .shipmentTrackingNumber, .all (lahat ng uri). Ang Data Detector ay gumagana sa NSDataDetector at URL, awtomatikong nagha-highlight ng mga natuklasang data. Para i-customize ang paghawak, itakda ang dataDetectorTypes at i-override ang shouldInteractWithURL sa delegado. Mahalaga: ang dataDetectorTypes ay gumagana lamang para sa URL at phoneNumber nang walang karagdagang configuration — ang ibang uri ay maaaring mangailangan ng iOS 16+. Ang Data Detector ay hindi sumasalungat sa link attribute sa NSAttributedString — parehong mekanismo ay gumagana nang magkatulad. Para sa read-only na UITextView na may nilalaman (balita, artikulo) itakda ang dataDetectorTypes = [.link, .phoneNumber].

• .link — URL, mga address ng email; ipinapakita bilang mga asul na link
• .phoneNumber — mga numero ng telepono; pagpindot ay nagpapakita ng Call action
• .address — mga postal address; pagpindot ay nagbubukas ng Maps
• .calendarEvent — mga petsa at oras; pagpindot ay gumagawa ng kalendaryong kaganapan
• .flightNumber — mga numero ng flight (iOS 16+); mabilis na pagsusuri ng flight

Mga halimbawa ng code gamit ang UITextView

Tingnan natin ang dalawang praktikal na halimbawa ng paggamit ng UITextView sa mga iOS app. Una — read-only text view na may attribute na teksto at data detector para sa pagpapakita ng nilalaman. Ikalawa — editable text view na may lazy placeholder at dynamic na taas para sa form ng komento. Ang parehong halimbawa ay gumagamit ng best practices ng UIKit: delegadong protocol, Auto Layout at TextKit.

Read-only UITextView na may nilalaman at mga link

Read-only mode ay pina-aktibo sa pamamagitan ng pagtatakda ng isEditable = false at isSelectable = true. Ito ay nagpapahintulot sa gumagamit na pumili ng teksto at pindutin ang mga link, ngunit hindi mag-edit. Itakda ang dataDetectorTypes para sa awtomatikong pagtuklas ng link, backgroundColor = .clear para sa transparent na background. Para sa pagpapakita ng mahabang nilalaman gamitin ang attributedText na may NSMutableParagraphStyle lineSpacing para sa pagiging nababasa. Magdagdag ng link attributes para sa mga pangunahing link sa teksto.

import UIKit

class ArticleViewController: UIViewController {
    let contentView = UITextView()

    override func viewDidLoad() {
        super.viewDidLoad()
        contentView.isEditable = false
        contentView.isSelectable = true
        contentView.dataDetectorTypes = [.link, .phoneNumber]
        contentView.backgroundColor = .clear
        contentView.textContainerInset = UIEdgeInsets(
            top: 8, left: 16,
            bottom: 8, right: 16
        )
        contentView.delegate = self
        loadArticleContent()
    }

    func loadArticleContent() {
        guard let url = URL(string: "https://example.com/article")
        else { return }
        // I-load ang nilalaman mula sa URL at itakda ang attributedText
    }
}

Editable UITextView na may placeholder

Placeholder para sa UITextView ay hindi built-in — implement ito sa pamamagitan ng UILabel sa itaas ng textView o sa pamamagitan ng attributedText na may isEmpty check. Simpleng approach: UILabel na may gray na teksto na nakatago kapag nagsimula ang pag-edit. Sa textViewDidChange suriin ang presensya ng teksto at itago/ipakita ang placeholder. Para sa mas elegante na solusyon gamitin ang property na typingAttributes para itakda ang kulay ng in-input na teksto. Ang dynamic na taas ng textView ay nakakamit sa pamamagitan ng contentSize observation at pag-update ng mga constraint — ito ang karaniwang pattern para sa mga chat at form ng komento.