[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 3탄- MediaNativeAdsFactory로 레이아웃(UI, xml) 연결하기
2탄에서 만든 xml파일로 네이티브 광고의 UI를 구현했고 이것을 안드로이드 코드와 연결(?)하는 기능을 하는 MediaNativeAdsFactory 클래스를 구현해보겠습니다. 저는 이 부분을 앞서 만든 네이티브 광고 UI와 안드로이드 시스템을 연결하고 UI에 보여줄 데이터를 입력하는 과정이라 이해했습니다.
저는 자바로 구현했지만 코틀린으로 구현도 가능합니다. 해당 파일은 MainActivity.kt파일이 있는 곳에 만듭니다.
MediaNativeAdsFactory 만들기
NativeAdFactory를 구현하는 MediaNativeAdsFactory 클래스를 만들고 NativeAdView를 리턴하는 createNativeAd() 메소드를 구현합니다. 아래 코드를 하나하나 살펴보면 일단 xml로 만든 UI를 인스턴스화 해서 접근할수 있도록 하기 위해 layoutInflater.inflate를 사용했습니다.
xml로 만든 UI를 인스턴스화
NativeAdView nativeAdView = (NativeAdView)layoutInflater.inflate(R.layout.media_native_ads, null);
id로 각각의 UI 요소 연결하기
xml에 보면 각각의 요소 별로 id가 있는데 이 아이디로 nativeAdView.findViewById(R.id.ad_media) 이렇게 연결하고 nativeAdView.setMediaView로 연결된 UI에 set을 합니다.
네이티브 광고 데이터 연결하기
UI와 네이티브 코드를 연결한뒤에는 네이티브광고의 컨텐츠를 주입하는 과정이 필요합니다. 이것이 아래 코드입니다.
nativeAdView.getMediaView().setMediaContent(nativeAd.getMediaContent());
package 패키지명;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import java.util.Map;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
public class MediaNativeAdsFactory implements NativeAdFactory {
private final LayoutInflater layoutInflater;
MediaNativeAdsFactory(LayoutInflater layoutInflater) {
this.layoutInflater = layoutInflater;
}
@Override
public NativeAdView createNativeAd(NativeAd nativeAd, Map<String, Object> customOptions) {
NativeAdView nativeAdView = (NativeAdView) layoutInflater.inflate(R.layout.media_native_ads, null);
nativeAdView.setMediaView(nativeAdView.findViewById(R.id.ad_media));
nativeAdView.getMediaView().setMediaContent(nativeAd.getMediaContent());
nativeAdView.setHeadlineView(nativeAdView.findViewById(R.id.headline));
((TextView) nativeAdView.getHeadlineView()).setText(nativeAd.getHeadline());
nativeAdView.setIconView(nativeAdView.findViewById(R.id.ad_icon));
if (nativeAd.getIcon() == null) {
nativeAdView.getIconView().setVisibility(View.GONE);
} else {
((ImageView) nativeAdView.getIconView()).setImageDrawable(nativeAd.getIcon().getDrawable());
nativeAdView.getIconView().setVisibility(View.VISIBLE);
}
nativeAdView.setBodyView(nativeAdView.findViewById(R.id.list_body));
if (nativeAd.getBody() == null) {
nativeAdView.getBodyView().setVisibility(View.INVISIBLE);
} else {
nativeAdView.getBodyView().setVisibility(View.VISIBLE);
((TextView) nativeAdView.getBodyView()).setText(nativeAd.getBody());
}
nativeAdView.setNativeAd(nativeAd);
return nativeAdView;
}
}
이처럼 xml파일에 설정한 id값으로 이용해서 연결하고 광고 데이터를 주입하는 기능을 수행하는 클래스를 만들었습니다.
마지막으로 nativeAdView.setNativeAd(nativeAd); 최종 세팅을 마지고 리턴해주면 끝입니다.
'플러터관련 정보 > 플러터-안드로이드 개발' 카테고리의 다른 글
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 4탄-네이티브와 플러터 연결하고, 플러터로 네이티브 광고 구현하기 (0) | 2024.01.06 |
---|---|
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 2탄- 네이티브 광고 레이아웃 설정하기 (2) | 2024.01.06 |
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 1탄- 애드몹 기본설정하기 (0) | 2024.01.05 |
[플러터] 다른 앱에서 플러터 앱으로 텍스트 공유 받기-앱 중복 실행 해결법 포함 (0) | 2023.12.09 |
[플러터, 애드몹] 테스트 기기에서 네이티브 광고 검사기(admob native ad validator)가 나올때 (0) | 2023.11.26 |
댓글