Advertencia

AppboyKit (también conocido como SDK Objective-C) ya no recibe soporte y ha sido sustituido por Swift SDK. Ya no recibirá nuevas características, correcciones de errores, actualizaciones de seguridad ni soporte técnico; sin embargo, la mensajería y los análisis seguirán funcionando con normalidad. Para obtener más información, consulta Presentación del nuevo SDK Swift de Braze.

Personalizar la fuente de Content Cards

Puedes crear tu propia interfaz de Content Cards extendiendo ABKContentCardsTableViewController para personalizar todos los elementos de la interfaz de usuario y el comportamiento de Content Cards. Las celdas de las tarjetas de contenido también pueden subclasificarse y luego utilizarse mediante programación o introduciendo un storyboard personalizado que registre las nuevas clases. Consulta la aplicación de muestra de Content Cards para ver un ejemplo completo.

También es importante considerar si debes utilizar una estrategia de subclase frente a un controlador de vista completamente personalizado y suscribirte a las actualizaciones de datos. Por ejemplo, si subclasificas ABKContentCardsTableViewController, puedes utilizar el método populateContentCards para filtrar y ordenar las tarjetas (recomendado). Sin embargo, si utilizas una personalización completa del controlador de vista, tendrás más control sobre el comportamiento de la tarjeta —como mostrarla en un carrusel o añadir elementos interactivos—, pero entonces tendrás que depender de un observador para implementar la lógica de ordenación y filtrado. También debes implementar los métodos de análisis respectivos para registrar correctamente las impresiones, los eventos de descarte y los clics.

Personalización de la interfaz de usuario

Los siguientes fragmentos de código muestran cómo dar estilo y modificar Content Cards para adaptarlas a tus necesidades de interfaz de usuario utilizando los métodos proporcionados por el SDK. Estos métodos te permiten personalizar todos los aspectos de la interfaz de usuario de Content Cards, incluyendo fuentes personalizadas, componentes de color personalizados, texto personalizado y mucho más.

Existen dos formas distintas de personalizar la interfaz de usuario de Content Cards:

• Método dinámico: actualizar la interfaz de usuario de la tarjeta por tarjeta
• Método estático: actualizar la interfaz de usuario en todas las tarjetas

Interfaz de usuario dinámica

El método applyCard de Content Cards puede hacer referencia al objeto tarjeta y pasarle pares clave-valor que se utilizarán para actualizar la interfaz de usuario:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (void)applyCard:(ABKCaptionedImageContentCard *)captionedImageCard {
  [super applyCard:captionedImageCard];

  if ([card.extras objectForKey:ContentCardKeyBackgroundColorValue]) {
    NSString *backgroundColor = [card.extras objectForKey:ContentCardKeyBackgroundColor];
    if ([backgroundColor colorValue]) {
      self.rootView.backgroundColor = [backgroundColor colorValue];
    } else {
      self.rootView.backgroundColor = [UIColor lightGray];
    }
  } else {
    self.rootView.backgroundColor = [UIColor lightGray];
  }
}

1
2
3
4
5
6
7
8
9
10
override func apply(_ captionedImageCard: ABKCaptionedImageContentCard!) {
  super.apply(captionedImageCard)

  if let backgroundColor = card.extras?[ContentCardKey.backgroundColor.rawValue] as? String,
     let backgroundColorValue = backgroundColor.colorValue() {
    rootView.backgroundColor = backgroundColorValue
  } else {
    rootView.backgroundColor = .lightGray
  }
}

Interfaz de usuario estática

El método setUpUI puede asignar valores a los componentes estáticos de Content Cards en todas las tarjetas:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
11
#import "CustomClassicContentCardCell.h"

@implementation CustomClassicContentCardCell

- (void)setUpUI {
  [super setUpUI];
  self.rootView.backgroundColor = [UIColor lightGrayColor];
  self.rootView.layer.borderColor = [UIColor purpleColor].CGColor;
  self.unviewedLineView.backgroundColor = [UIColor redColor];
  self.titleLabel.font = [UIFont italicSystemFontOfSize:20];
}

1
2
3
4
5
6
7
8
override func setUpUI() {
  super.setUpUI()

  rootView.backgroundColor = .lightGray
  rootView.layer.borderColor = UIColor.purple.cgColor
  unviewedLineViewColor = .red
  titleLabel.font = .italicSystemFont(ofSize: 20)
}

Proporcionar interfaces personalizadas

Se pueden proporcionar interfaces personalizadas registrando clases personalizadas para cada tipo de tarjeta deseado.

Braze proporciona tres plantillas de Content Cards (banner, imagen subtitulada y clásica). Alternativamente, si quieres proporcionar tus propias interfaces personalizadas, consulta los siguientes fragmentos de código:

• objective-c
• swift

1
2
3
4
5
6
7
- (void)registerTableViewCellClasses {
  [super registerTableViewCellClasses];

  // Replace the default class registrations with custom classes for these two types of cards
  [self.tableView registerClass:[CustomCaptionedImageContentCardCell class] forCellReuseIdentifier:@"ABKCaptionedImageContentCardCell"];
  [self.tableView registerClass:[CustomClassicContentCardCell class] forCellReuseIdentifier:@"ABKClassicCardCell"];
}

1
2
3
4
5
6
7
8
9
override func registerTableViewCellClasses() {
  super.registerTableViewCellClasses()

  // Replace the default class registrations with custom classes
  tableView.register(CustomCaptionedImageContentCardCell.self, forCellReuseIdentifier: "ABKCaptionedImageContentCardCell")
  tableView.register(CustomBannerContentCardCell.self, forCellReuseIdentifier: "ABKBannerContentCardCell")
  tableView.register(CustomClassicImageContentCardCell.self, forCellReuseIdentifier: "ABKClassicImageCardCell")
  tableView.register(CustomClassicContentCardCell.self, forCellReuseIdentifier: "ABKClassicCardCell")
}

Sobrescribir Content Cards pobladas

Las Content Cards pueden modificarse mediante programación utilizando el método populateContentCards:

• objective-c
• swift

1
2
3
4
5
6
7
8
9
10
- (void)populateContentCards {
  NSMutableArray<ABKContentCard *> *cards = [NSMutableArray arrayWithArray:[Appboy.sharedInstance.contentCardsController getContentCards]];
  for (ABKContentCard *card in cards) {
    // Replaces the card description for all Classic Content Cards
    if ([card isKindOfClass:[ABKClassicContentCard class]]) {
      ((ABKClassicContentCard *)card).cardDescription = @"Custom Feed Override title [classic cards only]!";
    }
  }
  super.cards = cards;
}

1
2
3
4
5
6
7
8
9
10
override func populateContentCards() {
  guard let cards = Appboy.sharedInstance()?.contentCardsController.contentCards else { return }
  for card in cards {
    // Replaces the card description for all Classic Content Cards
    if let classicCard = card as? ABKClassicContentCard {
      classicCard.cardDescription = "Custom Feed Override title [classic cards only]!"
    }
  }
  super.cards = (cards as NSArray).mutableCopy() as? NSMutableArray
}