Flutterに広点通Banner 2広告の安卓端を表示

6893 ワード

1.背景を説明する


私は個人開発者で、それから私のappはios端を作る必要があります.私のユーザーはアップル版を要求して、それから私のswiftはスラグを学んで、だからflutterを学ぶしかありません.しかし残念なことに、国内にはflutter SDKが出ていない.だから資料を集めて元のビューを表示しなければなりません.

2.技術の基礎


検索すると、Flutterへのプラグインメカニズムが必要なので、Android View、MethodChannel、PlatformViewをご自分で熟知ください.

3.効果図


次のBanner 2はアンドロイド原生の広告sdkですよ.

4.Androidで実現:

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        GeneratedPluginRegistrant.registerWith(this)
        //Banner 
        BannerPlugin.registerWith(this, this)
    }
}

BannerPlugin.java
public final class BannerPlugin {

    public static void registerWith(PluginRegistry registry, Activity activity) {
        final String key = BannerPlugin.class.getCanonicalName();
        if (registry.hasPlugin(key)) return;

        PluginRegistry.Registrar registrar = registry.registrarFor(key);
        // banner flutter 
        registrar.platformViewRegistry().registerViewFactory("banner", new BannerViewFactory(new StandardMessageCodec(), activity, registrar.messenger()));
    }
}


BannerViewFactory.java
public class BannerViewFactory extends PlatformViewFactory {
    private Activity activity;
    private BinaryMessenger messenger;

    public BannerViewFactory(MessageCodec createArgsCodec, Activity activity, BinaryMessenger messenger) {
        super(createArgsCodec);
        this.activity = activity;
        this.messenger = messenger;
    }

    @Override
    public PlatformView create(Context context, int id, Object o) {
        return new MyBannerView(activity, messenger, id);
    }
}


MyBannerView.java
public class MyBannerView implements PlatformView, MethodChannel.MethodCallHandler {
    private UnifiedBannerView bannerView;
    private LinearLayout linearLayout;
    private Activity activity;

    MyBannerView(Activity activity, BinaryMessenger messenger, int id) {
        MethodChannel methodChannel = new MethodChannel(messenger, "banner_" + id);
        methodChannel.setMethodCallHandler(this);
        this.activity = activity;
        if (linearLayout == null) {
            linearLayout = new LinearLayout(activity);
        }
    }

    @Override
    public View getView() {
        return linearLayout;
    }

    @Override
    public void dispose() {
        if (bannerView != null)
            bannerView.destroy();
    }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        switch (methodCall.method) {
            case "setBannerId":
                setText(methodCall, result);
                break;
            default:
                result.notImplemented();
        }
    }

    private void setText(MethodCall methodCall, MethodChannel.Result result) {
        List bannerId = (List) methodCall.arguments;
        System.out.println(bannerId);

        if (bannerView == null){
            bannerView = new UnifiedBannerView(activity, bannerId.get(0), bannerId.get(1), new UnifiedBannerADListener() {
                @Override
                public void onNoAD(AdError adError) {
                    System.out.println(adError.toString());
                }

                @Override
                public void onADReceive() {

                }

                @Override
                public void onADExposure() {

                }

                @Override
                public void onADClosed() {

                }

                @Override
                public void onADClicked() {

                }

                @Override
                public void onADLeftApplication() {

                }

                @Override
                public void onADOpenOverlay() {

                }

                @Override
                public void onADCloseOverlay() {

                }
            });
        }

        linearLayout.addView(bannerView);
        bannerView.loadAD();
        result.success(null);
    }
}

その中のMethodChannelのonMethodCallはflutterがactivityに自発的に値を伝えたものである.値の伝達方法はsetBannerIdで、APPIDと広告ビットIDをNative端に伝達して、このようにBanner 2をlinearLayoutの中に追加することができて、簡単に辛いのではないでしょうか.次はFlutterの中でどのように使うかを見てみましょう.
Row(
                  children: [
                    Expanded(
                      child: Container(
                        child: AndroidView(
                          viewType: "banner",
                          onPlatformViewCreated: (id) {
                            var data = ["1101152570", "4080052898050840"];
                            var channel = MethodChannel("banner_$id");
                            channel.invokeListMethod("setBannerId", data);
                          },
                        ),
                        height: 56,
                      ),
                    ),
                  ],

主にAndroid ViewのbannerはAndroid側に登録されているview name.この文章は私がflutterでbanner広告を追加する過程を記録するためです.いいえ、噴かないでください.ありがとうございます.