Xamarin.Forms 音乐播放器(XXX)

jwww 2018-08-24 原文

首先创建Xamarin Forms项目

然后开始整体布局，QQ音乐播放器这个界面我觉得最难的部分呢，还是最底部的那个功能条(歌曲图片，歌曲名和暂停按钮)那个，为了想实现成和QQ音乐一模一样，耗费了我几周时间(主要还是我Xamarin学得不好)，之后找到几种方法，但是效果不是很好。具体的后面写到了再说

首先呢首页分为3个部分头部 – 中间内容 – 底部功能条

头部：我就用一些Label Image 啥的拼凑出来

中间：部分用TabbedPage

底部：和头部一样

问题就来了，怎么在TabbedPage的外面加上其他视图呢？

这个应该是不能加的(也许可以加的，只是我不知道 = – = )

实现过程：

创建一个类：RootPage.cs，继承 MultiPage<Page>

using Xamarin.Forms;

namespace RaindropMusic
{
    public class RootPage : MultiPage<Page>
    {
        public RootPage()
        {
            NavigationPage.SetHasNavigationBar(this, false);
        }
        protected override Page CreateDefault(object item)
        {
            var page = new Page();
            if (item != null)
                page.Title = item.ToString();

            return page;
        }
        public static readonly BindableProperty SelectedSearchProperty = BindableProperty.Create(propertyName: nameof(SelectedSearch),
                returnType: typeof(bool),
                declaringType: typeof(RootPage),
                defaultValue: false);
        public bool SelectedSearch
        {
            get { return (bool)GetValue(SelectedSearchProperty); }
            set { SetValue(SelectedSearchProperty, value); }
        }

        public static readonly BindableProperty HasSearchBarProperty = BindableProperty.Create(propertyName: nameof(HasSearchBar),
                returnType: typeof(bool),
                declaringType: typeof(RootPage),
                defaultValue: true);
        public bool HasSearchBar
        {
            get { return (bool)GetValue(HasSearchBarProperty); }
            set { SetValue(HasSearchBarProperty, value); }
        }
    }
}

View Code

然后在分别创建顶部导航栏和中间部分(自定义TabbedPage)和底部功能条

注：说一下为什么要自定义一个，因为主页的TabbedPage是不需要导航栏和标题什么的，要通过渲染给它隐藏掉，后续有的TabbedPage有的又需要用到导航栏

TopBarPage.xaml、MyTabbedPage.xaml、BottomPage.xaml

TopBarPage.xaml代码：

MyTabbedPage.xaml：

在Android项目这里创建MyTabbedRenderer.cs

using Android.Content;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Android.Views;
using RaindropMusic.Droid;
using RaindropMusic.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedRenderer))]
namespace RaindropMusic.Droid
{
    public class MyTabbedRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {

        private TabLayout TabsLayout { get; set; }
        private ViewPager PagerLayout { get; set; }

        public MyTabbedRenderer(Context context) : base(context)
        {
        }

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

            if (e.OldElement != null)
            {
                //cleanup here
            }
            for (int i = 0; i < ChildCount; ++i)
            {
                Android.Views.View view = (Android.Views.View)GetChildAt(i);
                if (view is TabLayout)
                    TabsLayout = (TabLayout)view;
                else
                if (view is ViewPager) PagerLayout = (ViewPager)view;
            }

        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            TabsLayout.Visibility = ViewStates.Gone;

            base.OnLayout(changed, l, t, r, b);
        }
    }
}