Skip to content


Content-Card-Feed anpassen

Sie können Ihre eigene Content-Cards-Schnittstelle erstellen, indem Sie ABKContentCardsTableViewController erweitern, um alle UI-Elemente und das Verhalten der Content Cards anzupassen. Die Content-Card-Zellen können auch unterklassifiziert und dann programmatisch oder mithilfe eines angepassten Storyboards, das die neuen Klassen registriert, verwendet werden. Ein vollständiges Beispiel finden Sie in der Content Cards Beispiel-App.

Es ist auch wichtig zu überlegen, ob Sie eine Strategie der Unterklassifizierung oder einen vollständig angepassten View Controller verwenden und Daten-Updates abonnieren möchten. Wenn Sie zum Beispiel ABKContentCardsTableViewController unterklassifizieren, können Sie die populateContentCards-Methode zum Filtern und Ordnen von Karten verwenden (empfohlen). Wenn Sie jedoch einen vollständig angepassten View Controller verwenden, haben Sie mehr Kontrolle über das Kartenverhalten – wie z. B. die Anzeige in einem Karussell oder das Hinzufügen interaktiver Elemente –, müssen sich dann aber auf einen Beobachter verlassen, um die Sortier- und Filterlogik zu implementieren. Sie müssen außerdem die entsprechenden Analytics-Methoden implementieren, um Impressionen, Abbrüche und Klicks ordnungsgemäß zu protokollieren.

UI anpassen

Die folgenden Code-Snippets zeigen, wie Sie Content Cards mit den vom SDK bereitgestellten Methoden gestalten und an Ihre UI-Anforderungen anpassen können. Diese Methoden erlauben es Ihnen, alle Aspekte der Content-Card-UI anzupassen, einschließlich angepasster Schriftarten, angepasster Farbkomponenten, angepasster Texte und mehr.

Es gibt zwei verschiedene Möglichkeiten, die Content-Card-UI anzupassen:

  • Dynamische Methode: Update der UI pro Karte
  • Statische Methode: Update der UI über alle Karten hinweg

Dynamische UI

Die Content-Card-Methode applyCard kann das Kartenobjekt referenzieren und ihm Schlüssel-Wert-Paare übergeben, die für das Update der UI verwendet werden:

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
  }
}

Statische UI

Die Methode setUpUI kann den statischen Content-Card-Komponenten über alle Karten hinweg Werte zuweisen:

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)
}

Angepasste Schnittstellen bereitstellen

Angepasste Schnittstellen können durch die Registrierung von angepassten Klassen für jeden gewünschten Kartentyp bereitgestellt werden.

Eine Banner-Content-Card. Eine Banner-Content-Card zeigt rechts neben dem Banner ein Bild mit dem Text „Thanks for downloading Braze Demo!“. Eine hervorgehobene Content-Card. Eine hervorgehobene Content-Card zeigt ein Braze-Bild mit der Beschriftung „Thanks for downloading Braze Demo!“ am unteren Rand. Eine klassische Content-Card. Eine klassische Content-Card zeigt ein Bild in der Mitte der Karte mit dem Text „Thanks for downloading Braze Demo“ darunter.

Braze bietet drei Content-Card-Templates (Banner, hervorgehobenes Bild und klassisch). Wenn Sie eigene angepasste Schnittstellen bereitstellen möchten, referenzieren Sie die folgenden Code-Snippets:

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")
}

Ausgefüllte Content Cards überschreiben

Content Cards können programmatisch mit der Methode populateContentCards geändert werden:

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
}
New Stuff!