Aquesta és la segona part d'un cicle d'articles sobre com millorar el rendiment de les aplicacions iOS.
Per què AutoLayout podria estar alentint la teva app i com solucionar-ho
AutoLayout és l'eina estàndard per posicionar i dimensionar elements UI en aplicacions iOS. És flexible i potent, però no sempre és l'opció més eficient. Quan la interfície requereix ajustos dinàmics, com etiquetes que canvien de mida segons el seu contingut, AutoLayout pot generar problemes de rendiment, especialment en dispositius més antics.
Al principi, la diferència en el rendiment pot ser mínima. Però a mesura que la UI es torna més complexa, els efectes es fan notoris: desplaçaments entrecortats, animacions amb retard i una experiència visual menys fluida.
L'alternativa és usar layouts manuals amb frames. En lloc de dependre d'AutoLayout, es calcula i estableix manualment la posició i la mida dels elements de la interfície. Això requereix més línies de codi, però millora considerablement la velocitat i la responsivitat de l'aplicació.
Per exemple, en una cel·la de pronòstic del temps, en lloc de definir múltiples restriccions d'AutoLayout, es posicionen els elements manualment utilitzant la propietat frame. Això elimina el temps de processament addicional causat per la resolució de restriccions, fent que les actualitzacions de UI siguin molt més ràpides.
No obstant això, els layouts manuals són rígids. Si canvien la mida de la cel·la o la font del text, els valors s'han d'ajustar manualment, cosa que afegeix manteniment addicional.
Un mètode efectiu per gestionar això és deshabilitar la creació automàtica de restriccions en tots els elements abans de definir la seva posició manualment.
Per controlar com s'ajusten les etiquetes dins d'una cel·la, es pot calcular la seva mida abans de posicionar-les:
func getLabelSize(text: String, font: UIFont) -> CGSize {
let maxWidth = bounds.width - insets * 2
let textBlock = CGSize(width: maxWidth, height: CGFloat.greatestFiniteMagnitude)
let rect = text.boundingRect(with: textBlock, options: .usesLineFragmentOrigin,
attributes: [.font: font], context: nil)
return CGSize(width: ceil(rect.width), height: ceil(rect.height))
}
Aquest mètode permet que l'etiqueta s'adapti dinàmicament sense malgastar espai o causar retalls en el text.
Després, es defineixen els marcs dels elements dins de la cel·la:
func messageLabelFrame() {
guard let text = messageLabel.text, !text.isEmpty else { return }
let messageLabelSize = getLabelSize(text: text, font: messageLabel.font)
let messageLabelX = avatarImageView.frame.maxX + insets
messageLabel.frame = CGRect(x: messageLabelX, y: insets, width: messageLabelSize.width, height: messageLabelSize.height)
}
Aquest principi es pot aplicar a la resta d'elements de la cel·la, garantint un posicionament òptim sense dependre de restriccions dinàmiques d'AutoLayout.
Un cop definits aquests mètodes, s'invoquen dins de layoutSubviews per actualitzar els frames quan canvien les dades:
override func layoutSubviews() {
super.layoutSubviews()
messageLabelFrame()
timestampLabelFrame()
avatarImageFrame()
}
A més, es poden crear setters per actualitzar el contingut correctament:
func setMessage(text: String) {
messageLabel.text = text
messageLabelFrame()
}
func setTimestamp(text: String) {
timestampLabel.text = text
timestampLabelFrame()
}
Això garanteix que cada vegada que s'actualitzi el contingut, la UI reflecteixi els canvis correctament sense generar càlculs innecessaris.
Conclusió
En prescindir d'AutoLayout i adoptar layouts manuals amb frames, eliminem la sobrecàrrega generada pels càlculs automàtics de restriccions. Això optimitza la fluïdesa de la interfície, millora el rendiment i redueix els retards en aplicacions amb contingut dinàmic.
Tot i que aquesta tècnica implica escriure més codi i prestar atenció a possibles canvis visuals, el benefici en termes de velocitat i experiència d'usuari el converteix en una estratègia valuosa per a aplicacions que requereixen màxima eficiència.
A Q2BSTUDIO, ens especialitzem en el desenvolupament de solucions tecnològiques d'alt rendiment. Apliquem metodologies optimitzades per garantir aplicacions ràpides, fluides i escalables, assegurant que cada projecte lliuri la millor experiència a l'usuari sense comprometre l'eficiència.
