UITextView: wat is het, meerdere regels invoeren en werkingsprincipe

Wat is UITextView

UITextView is een UIKit-component voor het weergeven en bewerken van meerregelige tekst. In tegenstelling tot UILabel ondersteunt UITextView tekstselectie, bewerken, scrollen bij overschrijding van afmetingen en attribuuttekst. Als overerving van UIScrollView schakelt UITextView automatisch verticaal en horizontaal scrollen in bij overschrijding van de inhoud — dit wordt geconfigureerd via isScrollEnabled. De klasse ondersteunt bewerken via de eigenschap isEditable: stel false in voor de alleen-lezen modus. UITextView werkt met NSLayoutManager via het TextKit-systeem: NSTextStorage (opslag van attribuuttekst) → NSLayoutManager (regellay-out) → NSTextContainer (geometrie van het tekstgebied). Deze architectuur maakt het mogelijk om aangepaste lay-outs te maken met tekst die om afbeeldingen vloeit, meerkolomstekst en complexe tekstlay-outs. UITextView wordt gebruikt voor het weergeven van artikelen, beschrijvingen, logs, opmerkingen en elke meerregelige tekst in iOS.

UITextView vs UITextField: belangrijkste verschillen

Het verschil tussen UITextView en UITextField gaat veel verder dan het aantal regels. UITextField is een eenregelige UIControl met ondersteuning voor placeholder, left/right view en een wisknop. UITextView is een meerregelige UIScrollView met een volledig TextKit-systeem voor attribuuttekst. UITextField ondersteunt NSAttributedString niet op weergaveniveau (alleen via attributedText met beperkingen), UITextView verwerkt NSAttributedString volledig met verschillende lettertypen, alineastijlen en ingebedde afbeeldingen. UITextField heeft een ingebouwde wisknop (clearButtonMode), UITextView heeft die niet — vereist een aangepaste implementatie. UITextField past automatisch zijn grootte aan de inhoud aan (intrinsicContentSize), UITextView vereist handmatig hoogtebeheer via contentSize-bewaking of Auto Layout-beperkingen. UITextView ondersteunt dataDetectorTypes (automatische linkdetectie), UITextField ondersteunt ze vanaf iOS 16+. Kies UITextView voor het invoeren van meerregelige tekst (opmerkingen, notities, berichten). Gebruik UITextField voor formuliervelden (naam, e-mail, wachtwoord).

NSAttributedString en tekst opmaken

NSAttributedString is een fundamentele mogelijkheid van UITextView die het onderscheidt van UITextField en UILabel. Een attribuutreeks maakt het mogelijk om verschillende lettertypen, kleuren, regelafstanden, uitlijning en links binnen één tekst in te stellen. Eigenschappen: textView.attributedText = attributedString. Belangrijkste NSAttributedString.Key-attributen: font (.systemFont, .boldSystemFont, aangepaste UIFont), foregroundColor, backgroundColor, paragraphStyle (NSMutableParagraphStyle met lineSpacing, alignment, lineBreakMode), link (URL voor interactieve links), underlineStyle, strikethroughStyle, shadow, baselineOffset, kern (letterafstand). Gebruik init(string:, attributes:) of NSMutableAttributedString om attributen aan verschillende bereiken toe te voegen. UITextView geeft links (link attribute) automatisch interactief weer — bij indrukken wordt de gedelegeerde methode shouldInteractWithURL aangeroepen. Gebruik typingAttributes om attributen voor nieuwe invoer te resetten.

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 en linkafhandeling

UITextViewDelegate is een protocol dat bewerken en interactie met tekst beheert. Belangrijkste methoden: textViewDidBeginEditing(textView) — wordt aangeroepen bij start van bewerken; textViewDidEndEditing — bij beëindigen; textViewDidChange — bij elke tekstwijziging; textViewDidChangeSelection — bij wijziging van selectie; textViewShouldInteractWithURL — bij klikken op een link (retourneert Bool, of navigatie is toegestaan); textViewShouldInteractWithTextAttachment — bij klikken op ingebedde afbeelding. Overschrijf shouldInteractWithURL om links binnen UITextView af te handelen — hierin kunt u: URL openen in SFSafariViewController, UIAlertController voor bevestiging tonen, aangepaste URL-schema's verwerken. Belangrijk: als textView.isEditable = true is, worden links pas na dubbeltikken klikbaar — gebruik voor interactieve links bij bewerken gesture recognizers.

Linkafhandeling via SFSafariViewController

SFSafariViewController is de standaardmanier om links in iOS-apps te openen. Maak in de methode shouldInteractWithURL een SFSafariViewController met de URL en presenteer deze modaal of via navigationController. Gebruik voor universele links UIApplication.shared.open(url, options) — maar dit verlaat de app. Om het openen van links te voorkomen, retourneer false in shouldInteractWithURL en verwerk de URL zelf.

Text Container-systeem: marges en exclusionPaths

NSTextContainer — onderdeel van de TextKit-architectuur, definieert het geometrische gebied waarin de UITextView-tekst wordt weergegeven. Elke UITextView heeft een standaard textContainer, configureerbaar via: textView.textContainerInset — marges van tekst tot grenzen van textView (UIEdgeInsets); textView.textContainer.lineFragmentPadding — horizontale marge binnen elke regel; textView.textContainer.maximumNumberOfLines — beperking van het aantal regels (0 = onbeperkt); textView.textContainer.exclusionPaths — een array van UIBezierPath voor gebieden die tekst moet omzeilen (afbeeldingen, aangepaste vormen). ExclusionPaths maken complexe lay-outs mogelijk: tekst vloeit om een ronde profielfoto, pictogram of elke willekeurige contour. Bewaak contentSize via KVO of de gedelegeerde voor dynamische grootte van UITextView en werk de beperkingen bij.

// Dynamische UITextView-hoogte via 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 voor het omvloeien van afbeeldingen
let imageFrame = CGRect(x: 16, y: 100, width: 80, height: 80)
let exclusionPath = UIBezierPath(rect: imageFrame)
textView.textContainer.exclusionPaths = [exclusionPath]

Data Detector Types: automatische gegevensdetectie

dataDetectorTypes — eigenschap van UITextView die automatisch bepaalde gegevenstypen in tekst herkent en interactief maakt: .link (URL, e-mail), .phoneNumber (telefoonnummers), .address (adressen), .calendarEvent (datums en gebeurtenissen), .flightNumber (vluchtnummers), .lookupSuggestion (zoek suggesties), .trackingNumber (trackingnummers), .money (bedragen), .shipmentTrackingNumber, .all (alle typen). Data Detector werkt met NSDataDetector en URL en markeert automatisch gedetecteerde gegevens. Stel dataDetectorTypes in en overschrijf shouldInteractWithURL in de gedelegeerde voor aanpassing van de afhandeling. Belangrijk: dataDetectorTypes werkt alleen voor URL en phoneNumber zonder extra configuratie — andere typen vereisen mogelijk iOS 16+. Data Detector conflicteert niet met link attribute in NSAttributedString — beide mechanismen werken parallel. Stel voor alleen-lezen UITextView met inhoud (nieuws, artikelen) dataDetectorTypes = [.link, .phoneNumber] in.

• .link — URL, e-mailadressen; worden als blauwe links weergegeven
• .phoneNumber — telefoonnummers; klik toont Call-actie
• .address — postadressen; klik opent Maps
• .calendarEvent — datums en tijden; klik maakt een agenda-afspraak
• .flightNumber — vluchtnummers (iOS 16+); snelle vluchtcontrole

Codevoorbeelden met UITextView

Laten we twee praktische voorbeelden van het gebruik van UITextView in iOS-apps bekijken. De eerste — alleen-lezen text view met attribuuttekst en data detector voor het weergeven van inhoud. De tweede — bewerkbare text view met luie placeholder en dynamische hoogte voor een opmerkingenformulier. Beide voorbeelden gebruiken best practices van UIKit: het gedelegeerde protocol, Auto Layout en TextKit.

Alleen-lezen UITextView met inhoud en links

Alleen-lezen modus wordt ingeschakeld door isEditable = false en isSelectable = true in te stellen. Dit stelt de gebruiker in staat tekst te selecteren en op links te klikken, maar niet te bewerken. Stel dataDetectorTypes in voor automatische linkdetectie, backgroundColor = .clear voor transparante achtergrond. Gebruik voor lange inhoud attributedText met NSMutableParagraphStyle lineSpacing voor leesbaarheid. Voeg link attributes toe voor belangrijke links in de tekst.

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 }
        // Inhoud laden van URL en attributedText instellen
    }
}

Bewerkbare UITextView met placeholder

Placeholder voor UITextView is niet ingebouwd — implementeer het via een UILabel boven de textView of via attributedText met isEmpty-controle. Eenvoudige aanpak: een UILabel met grijze tekst die verborgen wordt bij het begin van bewerken. Controleer in textViewDidChange de aanwezigheid van tekst en verberg/toon de placeholder. Gebruik voor een elegantere oplossing de eigenschap typingAttributes om de kleur van ingevoerde tekst in te stellen. Dynamische hoogte van textView wordt bereikt door contentSize-bewaking en het bijwerken van beperkingen — dit is het standaardpatroon voor chats en opmerkingenformulieren.