Xamarin 音频播放器菜单始终位于顶部并展开

Question

我正在为 android 和 ios 创建一个应用程序来收听我的广播电台的音乐。现在我有一个 tabbedPage 设计，菜单选项位于底部。在 MainActivity 中，我创建了一个带有线性布局的 ContentView，它始终位于所有标签页的顶部。 但我希望播放器可以扩展到顶部和反向。

我已经制作了来自荷兰的另一个应用程序的视频截图，以实现我想要实现的目标。

最大的问题，TabbedPage 是否能够执行此操作，或者我是否需要整个其他设置？

不同种类的线性布局或相对布局

根据 ToolmakerSteve 的要求添加了代码。
在我的 MainActivity OnCreate 中我有这个：

ViewGroup contentView = FindViewById<ViewGroup>(Android.Resource.Id.Content);
                LinearLayout view = new LinearLayout(this);
                view.Orientation = Android.Widget.Orientation.Horizontal;
                view.SetBackgroundColor(Android.Graphics.Color.Blue);
                view.Background = getDrawableWithRadius();
                FrameLayout.LayoutParams parameter = new FrameLayout.LayoutParams((Device.Idiom == TargetIdiom.Tablet ? 60 : LinearLayout.LayoutParams.MatchParent), (Device.Idiom == TargetIdiom.Tablet ? 110 : 160));
                parameter.Gravity = GravityFlags.Bottom | GravityFlags.Left;
                parameter.BottomMargin = 220;
                view.LayoutParameters = parameter;

                btnPushPlay = new Android.Widget.ImageButton(this);
                btnPushPlay.Click += BtnPushPlay_Click;
   btnPushPlay.SetBackgroundColor(Android.Graphics.Color.Transparent);
                btnPushPlay.SetImageResource(Resource.Drawable.media_play_green);
                view.AddView(btnPushPlay);
                lblSong = new TextView(this);
                lblSong.TextSize = 18;
                lblSong.SetPadding(10, 35, 0, 0);
                lblSong.SetTextColor(Android.Graphics.Color.White);
                lblSong.Text = "Luister live!";
                view.AddView(lblSong);
                contentView.AddView(view);

在 MainPage.xaml 中我有这个：

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Kickit_Radio.MenuPages;assembly=Kickit_Radio"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:local1="clr-namespace:Kickit_Radio.ViewModels"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#000000"
            BarTextColor="White"
            BackgroundColor="Black"
            x:Class="Kickit_Radio.MainPage"
            NavigationPage.HasNavigationBar="False"
            NavigationPage.HasBackButton="True" SelectedTabColor="Green" UnselectedTabColor="#3184ca">
    <TabbedPage.Children>
        <local:Home Title="Home" IconImageSource="home.ico" />
        <local:Nieuws Title="Nieuws" IconImageSource="@drawable/news" />
        <local:Request Title="Request" IconImageSource="@drawable/record" />
        <local:Programma Title="Programma" IconImageSource="@drawable/column" />
        <local:Streams Title="Streams" IconImageSource="@drawable/record" />
        <local:Contact Title="Contact" IconImageSource="@drawable/about"/>
    </TabbedPage.Children>
</TabbedPage>

Answer 1

两种技巧。

---

#1：在两个视图之间切换本机媒体播放器的 Android 代码

MainActivity.cs：

// This must be a member of the app class, so it exists after OnCreate finishes.
LinearLayout view;   // small view
ViewGroup bigView;   // large view

... OnCreate()
{
    
    // Change this:
    //LinearLayout view = new LinearLayout(this);
    // To this:
    view = new LinearLayout(this);
    ...
    btnPushPlay = new Android.Widget.ImageButton(this);
    ...
    contentView.AddView(view);

    // Using Android XML layout (".xml" resource file, not XAML), define an Android view that contains native Android MediaPlayer.
    bigView = ...;
    // TODO: set Gravity to Top.
    ...
    // TBD: I think we can add it now, but either ".Gone" or ".Invisible".
    bigView.Visibility = Android.Views.ViewStates.Gone;   // Not there at first.
    contentView.AddView(bigView);   // Or maybe do this later, when want it.
}

private void ToggleMediaPlayer(bool large)
{
    if (large)
    {
        view.Visibility = Android.Views.ViewStates.Gone;
        bigView.Visibility = Android.Views.ViewStates.Visible;
    }
    else
    {
        view.Visibility = Android.Views.ViewStates.Visible;
        bigView.Visibility = Android.Views.ViewStates.Gone;
    }
}

// TODO: btnPushPlay needs a click method that calls `ToggleMediaPlayer(true);`.
// TODO: bigView must have a button that calls `ToggleMediaPlayer(false);`.

---

#2：在 Xamarin.Forms 中完成这一切

• 删除 OnCreate 中用于创建

  view

  并将其添加到内容中的代码。
• 使用 Community Toolkit / TabView 代替 TabbedPage。
• 使用 XF Grid 在具有 TabView 的页面顶部覆盖小视图和大视图。

MainPage.xaml：

<!-- change from TabbedPage to ContentPage -->
<ContentPage ...>
  <!-- outer grid, with three overlaid children. -->
  <Grid RowDefinitions="*" ...>

    <!-- replacement for TabbedPage -->
    <!-- https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/TabView/CustomTabsPage.xaml -->
    <Grid x:Name="tabview" ...>
      <TabView ...>
        ...
      </TabView>
    </Grid>

    <!-- small view overlay -->
    <!-- TODO: OR maybe this should become a new row in "tabview" Grid above. -->
    <Grid x:Name="smallView" RowDefinitions="*,Auto" ...>
        <!-- nothing in Row 0: it is empty space -->

        <!-- small view at bottom of screen -->
        <StackLayout Grid.Row="1" Orientation="Horizontal" ...>
            ...
            <ImageButton x:Name="btnPushPlay" .../>
            ...
        </StackLayout>
    </Grid>

    <!-- large view overlay -->
    <Grid x:Name="bigView" IsVisible="False" ...>
        ...
    </Grid>

  </Grid>
</ContentPage>

在 MainPage.xaml.cs 中：

// Change from ": TabbedPage" to "ContentPage".
public partial class MainPage : ContentPage
{

  private void ToggleMediaPlayer(bool large)
  {
    bigView.IsVisible = large;

    // This probably isn't needed, if bigView covers the entire screen.
    //MAYBE smallView.IsVisible = !large;
  }

// TODO: btnPushPlay needs a click method that calls `ToggleMediaPlayer(true);`.
// TODO: bigView must have a button that calls `ToggleMediaPlayer(false);`.

您必须进行研究，以填补缺失的细节。并根据您的需求进行调整。

Answer 2

经过搜索和思考，我想出了一个解决方案，在

TabViewItem

中添加一个页面。 首先，您需要将

xaml

文件从

ContentPage

编辑为

ContentView

。 同时更改

BindingContext

和

Content

，例如：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewModels="clr-namespace:Your_application.ViewModels"
    x:Class="Your_application.MenuPages.MenuName">
<ContentView.BindingContext>
    <viewModels:MenuNameModel />
</ContentView.BindingContext>
    <ContentView.Content>
        ....
    </ContentView.Content>
</Content>

同时更改您的班级：

public partial class MenuName : ContentPage

致：

public partial class MenuName : ContentView

之后，您可以将您的页面添加到

TabViewItem

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:tool="http://xamarin.com/schemas/2020/toolkit"
        x:Class="Your_application.MainPage"
         xmlns:local="clr-namespace:Your_application.ViewModels;assembly=Kickit_Radio"
         xmlns:pages="clr-namespace:Your_application.MenuPages;assembly=Kickit_Radio">
<Grid x:Name="tabView">
    <tool:TabView TabStripPlacement="Bottom"
        TabStripBackgroundColor="Black"
        TabStripHeight="60"
        TabIndicatorColor="#3184ca" x:Name="myTabView">
        <tool:TabViewItem
             Icon="home.ico"
             Text="Home"
             TextColor="White"
             TextColorSelected="Green"
             FontSize="12"
             x:Name="tb1">
             <Grid BackgroundColor="Black">
                 <local:HomeView />
             </Grid>
         </tool:TabViewItem>
    </tool:TabView>
</Grid>
</ContentPage.Content>
</ContentPage>

希望这能进一步帮助您！