Help us understand the problem. What is going on with this article?

Xamarin.Formsでカスタムレンダラーを使って、AdMobのバナー広告を表示する(iOS/Android)

More than 1 year has passed since last update.

概要

Xamarin.Formsで、AdMobのバナー広告を表示してみます。
ここではカスタムレンダラーを使って、iOSとAndroidに表示してみます。(`・ω・´)
下記のサンプルをベースに説明します。

サンプル

GitHubに置いておきました。
AddAdMobBannerSample

こんな感じで、バナー広告が表示されます。(実機でも表示できました(∩´∀`)∩)
バナー広告の表示

制作環境 (動作確認環境)

  • macOS Sierra 10.2
  • Xamarin Studio 6.1.1(Build15)
    • Xamarin.iOS 10.0.1.10
    • Xamarin.Android 7.0.1.3

流れ

  1. AdMobの広告ユニットIDの取得
  2. PCL(共通プロジェクト)での作業
  3. iOSプロジェクトでの作業
  4. Androidプロジェクトでの作業

1. AdMobの広告ユニットIDの取得

詳細は割愛しますが、AdMobの広告ユニットIDをiOS用とAndroid用の2つ用意してください。
※iOSでは、下記にチェックを入れておいてください。
広告リクエストの HTTPS 対応 アプリからの広告リクエストのセキュリティを高める

2. PCL(共通プロジェクト)での作業

ここでは、カスタム元のビューを作成したり、UI(Xaml)に広告を追加したりします。

AdMobBanner.cs

中身が空で心配になりますが、これで大丈夫です。

using System;
using Xamarin.Forms;

namespace AddAdMobBannerSample
{
    public class AdMobBanner : ContentView
    {
        public AdMobBanner()
        {
        }
    }
}

MainPage.xaml

AdMobのバナーサイズが320x50なので、このサイズが収まるようにしてください。
(marginやpaddingで表示領域が狭くなってしまったりしても、広告が表示されなくなります。)

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:controls="clr-namespace:AddAdMobBannerSample;assembly=AddAdMobBannerSample" 
             x:Class="AddAdMobBannerSample.MainPage">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <controls:AdMobBanner WidthRequest="320" HeightRequest="50" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

3. iOSプロジェクトでの作業

iOS用のパッケージを追加したり、カスタムレンダラーを作成したりします。

パッケージ追加

下記のパッケージを追加してください。
「 Xamarin.Google.iOS.MobileAds 」

AdMobBannerRenderer.cs

iOS用のカスタムレンダラーです。
ここにiOS用の広告ユニットIDを記載してください。

using System;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Google.MobileAds;
using UIKit;
using CoreGraphics;
using AddAdMobBannerSample;
using AddAdMobBannerSample.iOS.Renderers;

[assembly: ExportRenderer(typeof(AdMobBanner), typeof(AdMobBannerRenderer))]
namespace AddAdMobBannerSample.iOS.Renderers
{
    public class AdMobBannerRenderer : ViewRenderer
    {
        const string adUnitID = "Insert Your AdUnitID(for iOS)";

        BannerView adMobBanner;
        bool viewOnScreen;

        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null)
                return;

            if (e.OldElement == null)
            {
                adMobBanner = new BannerView(AdSizeCons.Banner, new CGPoint(-10, 0))
                {
                    AdUnitID = adUnitID,
                    RootViewController = UIApplication.SharedApplication.Windows[0].RootViewController
                };
                adMobBanner.AdReceived += (sender, args) =>
                {
                    if (!viewOnScreen) AddSubview(adMobBanner);
                    viewOnScreen = true;
                };
                adMobBanner.LoadRequest(Request.GetDefaultRequest());
                SetNativeControl(adMobBanner);
            }
        }
    }
}

AppDelegate.cs

[Export("window")]以下を追加します。
これを追加しないとアプリの起動時にクラッシュしてしまいます。
参考

using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;

namespace AddAdMobBannerSample.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }

        [Export("window")]
        public UIWindow GetWindow()
        {
            return UIApplication.SharedApplication.Windows[0];
        }
    }
}

4. Androidプロジェクトでの作業

Android用のパッケージを追加したり、カスタムレンダラーを作成したりします。

パッケージ追加

下記のパッケージを追加してください。
「 Xamarin.GooglePlayServices.Ads 」
「 Xamarin.GooglePlayServices.Basement 」(.Adsを入れると自動で入ります)

AdMobBannerRenderer.cs

Android用のカスタムレンダラーです。
ここにAndroid用の広告ユニットIDを記載してください。

using AddAdMobBannerSample;
using AddAdMobBannerSample.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AdMobBanner), typeof(AdMobBannerRenderer))]
namespace AddAdMobBannerSample.Droid.Renderers
{
    public class AdMobBannerRenderer:ViewRenderer<AdMobBanner, Android.Gms.Ads.AdView>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<AdMobBanner> e)
        {
            const string adUnitID = "Insert Your AdUnitID(for Android)";

            base.OnElementChanged(e);

            if (Control == null)
            {
                var adMobBanner = new Android.Gms.Ads.AdView(Forms.Context);
                adMobBanner.AdSize = Android.Gms.Ads.AdSize.Banner;
                adMobBanner.AdUnitId = adUnitID;

                var requestbuilder = new Android.Gms.Ads.AdRequest.Builder();
                adMobBanner.LoadAd(requestbuilder.Build());

                SetNativeControl(adMobBanner);
            }
        }
    }
}

AndroidManifest.xml

INTERNETとACCESS_NETWORK_STATEのパーミッションが必要なので追加します。
また、<activity android:name="com.google.android.gms.ads.AdActivity" から始まる一行も必須です。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="jp.co.noraneko.addadmobbannersample">
    <uses-sdk android:minSdkVersion="15" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:label="AddAdMobBannerSample">
        <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
    </application>
</manifest>

おわりに

これで、Xamarin.Formsで作ったアプリにAdMobのバナー広告を表示することができました(∩´∀`)∩
カスタムレンダラーといってもそこまで複雑なものでもないので、
気軽に広告を入れることができるかなーと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした