디자인 커스터마이징

여기에서는 BuzzAd iOS용 SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 안내합니다.

인터스티셜 지면에서는 광고 제목과 설명 문구의 색상(textColor), CTA 버튼 디자인(CTA), 지면의 배경 색상(backgroundColor)을 변경할 수 있습니다.

텍스트 색상 변경하기

인터스티셜 지면의 광고 타이틀과 설명 문구의 색상을 변경하려면 아래의 순서에 따라 구현하세요.

1. 인터스티셜 광고의 디자인을 커스터마이징할 수 있는 BZVBuzzAdInterstitialTheme 객체를 생성하세요.
2. BZVBuzzAdInterstitialTheme.textColor에 광고 타이틀과 설명 문구의 색상을 설정하세요.
3. 위에서 생성한 BZVBuzzAdInterstitialTheme 객체를 BZVBuzzAdInterstitial.theme에 설정하세요.

Swift

let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
  builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
  builder.type = .dialog
  builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
    builder.textColor = UIColor.YOUR_TEXT_COLOR // 광고 타이틀과 설명 문구 색상
  }
}

Objective-C

BZVBuzzAdInterstitial *buzzAdInterstitial = [BZVBuzzAdInterstitial interstitialWithBlock:^(BZVBuzzAdInterstitialBuilder * _Nonnull builder) {
  builder.unitId = @"YOUR_INTERSTITIAL_UNIT_ID";
  builder.type = BZVBuzzAdInterstitialDialog;
  builder.theme = [BZVBuzzAdInterstitialTheme themeWithBlock:^(BZVBuzzAdInterstitialThemeBuilder * _Nonnull builder) {
    builder.textColor = UIColor.YOUR_TEXT_COLOR; // 광고 타이틀과 설명 문구 색상
  }];
}];

배경 색상 변경하기

인터스티셜 지면의 배경 색상을 변경하려면 아래의 순서에 따라 구현하세요.

1. 인터스티셜 광고의 디자인을 커스터마이징할 수 있는 BZVBuzzAdInterstitialTheme 객체를 생성하세요.
2. BZVBuzzAdInterstitialTheme.backgroundColor에 지면의 배경 색상을 설정하세요.
3. 위에서 생성한 BZVBuzzAdInterstitialTheme 객체를 BZVBuzzAdInterstitial.theme에 설정하세요.

Swift

let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
  builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
  builder.type = .dialog
  builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
    builder.backgroundColor = UIColor.YOUR_BACKGROUND_COLOR // 지면 배경 색상
  }
}

Objective-C

BZVBuzzAdInterstitial *buzzAdInterstitial = [BZVBuzzAdInterstitial interstitialWithBlock:^(BZVBuzzAdInterstitialBuilder * _Nonnull builder) {
  builder.unitId = @"YOUR_INTERSTITIAL_UNIT_ID";
  builder.type = BZVBuzzAdInterstitialDialog;
  builder.theme = [BZVBuzzAdInterstitialTheme themeWithBlock:^(BZVBuzzAdInterstitialThemeBuilder * _Nonnull builder) {
    builder.backgroundColor = UIColor.YOUR_BACKGROUND_COLOR; // 지면 배경 색상
  }];
}];

CTA 버튼 디자인 변경하기

BuzzAd iOS용 SDK에서 제공하는 CTA 버튼의 디자인을 변경할 수 있습니다.

다음은 BZVBuzzAdInterstitialTheme에서 구성 요소를 설정해 인터스티셜 지면의 CTA 버튼 디자인을 변경하는 예시입니다.

Swift

let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
  builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
  builder.type = .dialog
  builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
    ...생략...
    builder.rewardIcon = UIImage(named: "YOUR_REWARD_ICON")!
    builder.participatedIcon = UIImage(named: "YOUR_PARTICIPATED_ICON")!
    builder.ctaTextColor = BZVControlStateResource { builder in
      builder.setValue(UIColor.YOUR_CTA_TEXT_NORMAL_COLOR, for: .normal)
    }
    builder.ctaBackgroundColor = BZVControlStateResource { builder in
      builder.setValue(UIColor.YOUR_CTA_BACKGROUND_NORMAL_COLOR, for: .normal)
    }
  }
}

Objective-C

BZVBuzzAdInterstitial *buzzAdInterstitial = [BZVBuzzAdInterstitial interstitialWithBlock:^(BZVBuzzAdInterstitialBuilder * _Nonnull builder) {
  builder.unitId = @"YOUR_INTERSTITIAL_UNIT_ID";
  builder.type = BZVBuzzAdInterstitialDialog;
  builder.theme = [BZVBuzzAdInterstitialTheme themeWithBlock:^(BZVBuzzAdInterstitialThemeBuilder * _Nonnull builder) {
    ...생략...
    builder.rewardIcon = [UIImage imageNamed:@"YOUR_REWARD_ICON"];
    builder.participatedIcon = [UIImage imageNamed:@"YOUR_PARTICIPATED_ICON"];
    builder.ctaTextColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
      [builder setValue:UIColor.YOUR_CTA_TEXT_NORMAL_COLOR forState:BZVControlStateNormal];
    }];
    builder.ctaBackgroundColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
      [builder setValue:UIColor.YOUR_CTA_BACKGROUND_NORMAL_COLOR forState:BZVControlStateNormal];
    }];
  }];
}];