Cómo personalizar los tips de TipKit

Misael Cuevas

28 agosto, 20245min de lectura

TipKit es un framework muy flexible para personalizar tips y ofrece varias formas para lograrlo. Estas son:

1. Aplicando modificadores a las propiedades del protocolo Tip.
2. Utilizando los modificadores en las vistas TipView y popoverTip.

Este artículo asume que tienes conocimientos básicos de TipKit. Si no es así, te recomiendo leer el artículo sobre cómo usar TipKit. Se usará el siguiente tip de ejemplo:

import SwiftUI
import TipKit

struct MyTip: Tip {
  var title: Text {
    Text("non cupidatat incididunt")
  }

  var message: Text? {
    Text("Voluptate veniam minim aliqua commodo quis incididunt aute pariatur laboris elit anim ipsum elit ut laboris.")
  }

  var image: Image? {
    Image(systemName: "gamecontroller")
  }

  var actions: [Action] {
    [
      Action(title: "Action 1") {
        invalidate(reason: .actionPerformed)
      },
      Action(perform: {
        invalidate(reason: .actionPerformed)
      }, {
        Text("Action 2")
      })
    ]
  }
}

Además de la vista de SwiftUI que utiliza el Tip MyTip:

import SwiftUI
import TipKit

struct ContentView: View {
  var tip = MyTip()

  var body: some View {
    TipView(tip)
      .padding()
  }
}

Propiedades del protocolo Tip

La primera personalización se puede aplicar dentro de cada propiedad del Tip, en este caso MyTip. Puedes observar que las propiedades title, image, message y ciertos Action requieren retornar una vista de SwiftUI, lo que permite aplicar modificadores a cada uno de ellos según convenga. Ejemplo, reemplaza el código anterior dentro de MyTip con:

var title: Text {
  Text("non cupidatat incididunt")
    // 1
    .font(.title)
}

var message: Text? {
  Text("Voluptate veniam minim aliqua commodo quis incididunt aute pariatur laboris elit anim ipsum elit ut laboris.")
    // 2
    .fontWeight(.thin)
}

var image: Image? {
  Image(systemName: "gamecontroller")
    // 3
    .allowedDynamicRange(.high)
}

var actions: [Action] {
  [
    Action(title: "Action 1") {
      invalidate(reason: .actionPerformed)
    },
    Action(perform: {
      invalidate(reason: .actionPerformed)
    }, {
      Text("Action 2")
      // 4
      .foregroundStyle(.purple)
    })
  ]
}

1. Se aplica la fuente title a la propiedad title.
2. Se aplica el peso de la fuente thin a la propiedad message.
3. Se permite que el rango dinámico sea high para la propiedad image.
4. Se utiliza el color purple para la segunda acción de la propiedad actions.

Modificadores de TipView y popoverTip

Las vistas TipView y popoverTip cuentan con varios modificadores que puedes usar:

tipImageSize

Establece el tamaño de la imagen del tip:

TipView(tip)
  .tipImageSize(.init(width: 100, height: 100))

tipImageStyle

Establece el estilo de la imagen. Requiere Xcode 16 y iOS 18+.

TipView(tip)
    .tipImageStyle(.blue, .gray)

tipCornerRadius

Define el radio de las esquinas del tip.

TipView(tip)
  .tipCornerRadius(20)

tipBackground

Establece el fondo de un tip. Este modificador no aplica para los popoverTip.

TipView(tip)
  .tipBackground(
    LinearGradient(
      colors: [.yellow, .white],
      startPoint: .top,
      endPoint: .bottom
    )
  )

tipViewStyle

Aplica un estilo personalizado a todo el tip, incluyendo cada una de sus partes. Este modificador es muy útil cuando se requiere un diseño completamente diferente al que provee TipKit por defecto.

Para utilizar este modificador, primero debes crear una estructura que conforme el protocolo TipViewStyle. Ejemplo:

struct MyTipViewStyle: TipViewStyle {
  func makeBody(configuration: Configuration) -> some View {
      
  }
}

Dentro de la función makeBody se especifica la nueva vista que va a adoptar el tip. También, dentro de dicha función, cuentas con el parámetro configuration que contiene toda la información del tip a la cual se le aplica el estilo, como: title, image, message, actions, rules, entre otros.

Agrega el siguiente código dentro de la función makeBody:

// 1
VStack {
  // 2
  configuration.image?
    .resizable()
    .aspectRatio(contentMode: .fit)
    .symbolRenderingMode(.palette)
    .foregroundStyle(.green, .gray)
    .frame(maxHeight: 50)
  
  // 3
  configuration.title?
    .font(.title)
    .foregroundStyle(.green)
  
  // 4
  configuration.message?
    .foregroundStyle(.white)
    .multilineTextAlignment(.center)
    .padding(.bottom)
  
  // 5
  HStack(spacing: 15) {
    // 6
    ForEach(configuration.actions) { action in
      Button(action: action.handler) {
        action.label()
      }
    }
    .buttonStyle(.borderedProminent)
    .tint(.green)
    .foregroundStyle(.white)
    .controlSize(.mini)

    // 7
    Button("Close", role: .destructive) {
      configuration.tip.invalidate(reason: .tipClosed)
    }
  }
}
.padding()
.background(Color.black.opacity(0.8))

1. Un VStack como vista contenedora con padding y de fondo un color negro con opacidad de 0.8.
2. La imagen definida en el tip con una altura máxima de 50 y un estilo con los colores verde y gris.
3. El título definido en el tip con la fuente title y de color verde.
4. El mensaje definido en el tip centrado, en color blanco y con padding abajo.
5. Un HStack con espaciado de 15.
6. Se muestra un botón por cada action definida en el tip. A través de action.handler se obtiene la acción definida en el tip y action.label() del mismo.
7. Un Button para invalidar el tip cuando se presiona.

Para hacer uso del estilo, utiliza el modificador tipViewStyle en un TipView o popoverTip. Ejemplo:

TipView(tip)
  .tipViewStyle(MyTipViewStyle())

Conclusión

Personalizar los tips en TipKit te permite ofrecer una experiencia de usuario más rica y adaptada a las necesidades específicas de tu aplicación. A través de los modificadores de propiedades del protocolo Tip y los modificadores de vista de TipView y popoverTip, puedes ajustar cada aspecto de tus tips, desde el tamaño y estilo de las imágenes hasta el fondo y las acciones disponibles.

Al aplicar estos modificadores, puedes asegurarte de que tus tips no solo sean informativos, sino también estéticamente agradables y coherentes con el diseño general de tu aplicación. Aprovecha las capacidades de TipKit para crear interfaces más intuitivas y atractivas para tus usuarios.