Xamarin Forms GoogleAds показывает нижнюю часть оболочки

Question

В этом коде я сначала создал страницу отчета и о странице. Затем я создаю страницу оболочки и добавляю эти две страницы к панели вкладок. У меня есть объявление на странице отчета. Теперь я хочу нести объявление под моей панелью вкладок в оболочке, в любом случае показывать объявление ниже Shell

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:local="clr-namespace:OZHealth.Views" xmlns:views1="clr-namespace:OZHealth.Models" xmlns:controls="clr-namespace:OZHealth.Controls"
       Title="OZHealth"
       x:Class="OZHealth.AppShell">
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>
        <TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="Reports" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:ReportsPage}" />
        </Tab>
    </TabBar>
</shell>

это мой ReportPage.one элемент на панели вкладок

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="OZHealth.Views.ReportsPage"
             xmlns:viewmodels="clr-namespace:OZHealth.ViewModels" xmlns:views="clr-namespace:OZHealth.Views" xmlns:views1="clr-namespace:OZHealth.Models" xmlns:controls="clr-namespace:OZHealth.Controls"
             Title="{Binding Title}">

    <ContentPage.BindingContext>
        <viewmodels:ReportsViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
    </ContentPage.Resources>

    <StackLayout Orientation="Vertical" Padding="16,40,16,40" Spacing="10">
        <!--this is my chart-->
        <views:PieChartView />
        <!--this is my GoogleaAds-->
        <views1:AdMobView x:Name="AdView" >
        </views1:AdMobView>
    </StackLayout>
</ContentPage>

Это моя страница оболочки

Я хочу нести объявление нижней части оболочки или приложения, как это

Как перенести объявление на Bottom Of Shell? Я не могу использовать NavBar В Shell

Answer 1

Основываясь на моих исследованиях, это не может быть достигнуто в нативных формах, мы должны добиться этого с помощью специального средства визуализации для оболочки Здесь запущен GIF (если вы хотите это сделать, вам нужно добавить представление admob в xamarin. android).

Вы должны создать пользовательский рендерер, подобный следующему коду в оболочке.

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace XFormsAdsWithShell.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new ShellItemRenderer(this);
        }
    }
}

ShellItemRenderer.cs

    internal class ShellItemRenderer : Xamarin.Forms.Platform.Android.ShellItemRenderer
    {

        public ShellItemRenderer(IShellContext shellContext) : base(shellContext)
        {

        }
        BottomNavigationView _bottomView;
        FrameLayout _navigationArea;
        public override Android.Views.View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            Android.Views.View _outerLayout =  base.OnCreateView(inflater, container, savedInstanceState);

             _bottomView = _outerLayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            _bottomView.SetMinimumHeight(220);
             _navigationArea = _outerLayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_navarea);

            return _outerLayout;
        }

    }

Важное место - создать BottomTabLayout.xml (пожалуйста, не изменяйте другое имя), добавьте следующее код компоновки.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/bottomtab.navarea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:layout_weight="1" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomtab.tabbar"
            android:theme="@style/Widget.Design.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/bottomtab.tabbar.container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"   
            android:background="@android:color/holo_red_dark">

         <!--add your google AD here-->

         <TextView

          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="AD Area"
           />
        </LinearLayout >
    </FrameLayout>

</FrameLayout>

У меня есть другой способ добиться этого, как показано ниже:

С помощью следующего кода.

<TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent Title="item" ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent Title="page1" ContentTemplate="{DataTemplate local:Page1}" />
        </Tab>

    </TabBar>

Я надеюсь, что другие могут дать лучшее решение.