c# - 如何使用 MVVMCross 6.2 设置选项卡标题？

Question

我试图弄清楚如何在 Xamarin Android 中使用 MVVMCross 6.2+ 正确设置本地化字符串作为选项卡标题(或动态更改选项卡标题)。我应该如何在简单的示例应用程序中设置选项卡的标题？预先感谢您的帮助。

这是一个简单的示例应用程序:

MvvmCrossTabs.Core

HomeViewModel.cs

using System.Collections.Generic;
using System.Threading.Tasks;
using MvvmCross.Commands;
using MvvmCross.Logging;
using MvvmCross.Navigation;
using MvvmCross.ViewModels;

namespace MvvmCrossTabs.Core.ViewModels
{
    public class HomeViewModel : MvxNavigationViewModel
    {
        public IMvxAsyncCommand ShowInitialViewModelsCommand { get; private set; }

        public HomeViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
        {
            ShowInitialViewModelsCommand = new MvxAsyncCommand(ShowInitialViewModels);
        }

        private async Task ShowInitialViewModels()
        {
            await Task.WhenAll(new List<Task>
            {
                NavigationService.Navigate<Tab1ViewModel>(),
                NavigationService.Navigate<Tab2ViewModel>(),
                NavigationService.Navigate<Tab3ViewModel>()
            });
        }
    }
}

Tab1ViewModel.cs(Tab2ViewModel.cs、Tab3ViewModel.cs)

using MvvmCross.Logging;
using MvvmCross.Navigation;
using MvvmCross.ViewModels;

namespace MvvmCrossTabs.Core.ViewModels
{
    public class Tab1ViewModel : MvxNavigationViewModel
    {
        public Tab1ViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
        {

        }
    }
}

应用程序.cs

using MvvmCross.IoC;
using MvvmCross.ViewModels;
using MvvmCrossTabs.Core.ViewModels;

namespace MvvmCrossTabs.Core
{
    public class App : MvxApplication
    {
        public override void Initialize()
        {
            CreatableTypes()
                .EndingWith("Service")
                .AsInterfaces()
                .RegisterAsLazySingleton();

            RegisterAppStart<HomeViewModel>();
        }
    }
}

MvvmCrossTabs.Android

MainApplication.cs

using System;
using Android.App;
using Android.Runtime;
using MvvmCross.Droid.Support.V7.AppCompat;
using MvvmCrossTabs.Core;

namespace MvvmCrossTabs.Android
{
    [Application]
    public class MainApplication : MvxAppCompatApplication<MvxAppCompatSetup<App>, App>
    {
        public MainApplication() : base() { }

        public MainApplication(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer) { }
    }
}

home.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/maincontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="enterAlways"
            app:tabGravity="fill"
            app:tabMaxWidth="0dp" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

tab1.axml(tab2.axml，tab3.axml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_frame"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</LinearLayout>

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

HomeView.cs

using Android.App;
using Android.Content.PM;
using Android.OS;
using Android.Support.V7.Widget;
using MvvmCross.Droid.Support.V7.AppCompat;
using MvvmCross.Platforms.Android.Presenters.Attributes;
using MvvmCrossTabs.Core.ViewModels;

namespace MvvmCrossTabs.Android
{
    [Activity(Label = "@string/app_name", LaunchMode = LaunchMode.SingleTask, Theme = "@style/AppTheme", MainLauncher = true)]
    [MvxActivityPresentation]
    public class HomeView : MvxAppCompatActivity<HomeViewModel>
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.home);

            // Replaces Action Bar with new Toolbar.
            var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);

            ViewModel.ShowInitialViewModelsCommand.Execute();
        }
    }
}

Tab1View.cs(Tab2View.cs、Tab3View.cs)

using Android.OS;
using Android.Runtime;
using Android.Views;
using MvvmCross.Droid.Support.V4;
using MvvmCross.Platforms.Android.Binding.BindingContext;
using MvvmCross.Platforms.Android.Presenters.Attributes;
using MvvmCrossTabs.Core.ViewModels;

namespace MvvmCrossTabs.Android.Views
{
    [MvxTabLayoutPresentation(TabLayoutResourceId = Resource.Id.tabs, ViewPagerResourceId = Resource.Id.viewpager, Title = "Tab 1", ActivityHostViewModelType = typeof(HomeViewModel))]
    [Register(nameof(Tab1View))]
    public class Tab1View : MvxFragment<Tab1ViewModel>
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            base.OnCreateView(inflater, container, savedInstanceState);

            return this.BindingInflate(Resource.Layout.tab1, null);
        }
    }
}

Answer 1

使用 ShowInitialViewModelsCommand 创建选项卡时，内置演示器会创建一个 MvxViewPagerFragmentInfo 对象列表，并从属性中传入 Title 值。您可以在 ShowViewPagerFragment 中看到发生的情况。 MvvmCross源代码中的方法。

然后，MvxViewPagerFragmentInfo 对象列表将传递到为 ViewPager 创建的 MvxCachingFragmentStatePagerAdapter 中。您可以看到正在发生的情况 here

MvxCachingFragmentStatePagerAdapter 继承自 MvxFragmentPagerAdapter 类。在 MvxFragmentPagerAdapter 类中最终是实际使用您提供的标题的地方。您可以看到它在 GetPageTitleFormatted 方法中使用 here

因此，为了在运行时更改标题，您可以执行以下操作:

对默认演示者进行子类化并重写 ShowViewPagerFragment 方法(它被标记为虚拟)，并提供正确的本地化标题字符串，而不是属性中定义的字符串

以下是如何实现此目的的示例:

1.) 创建自定义演示者并覆盖 ShowViewPagerFragment

public class LocalizedTabPresenter : MvxAppCompatViewPresenter
{
    public LocalizedTabPresenter(IEnumerable<Assembly> androidViewAssemblies) : base(androidViewAssemblies)
    {
    }

    protected override Task<bool> ShowViewPagerFragment(Type view, MvxViewPagerFragmentPresentationAttribute attribute, MvxViewModelRequest request)
    {
        if (attribute.ViewModelType == typeof(Tab1ViewModel)) { 
            attribute.Title = "My Localized Title for Tab 1"
        }

        return base.ShowViewPagerFragment(view, attribute, request);
    }
}

2.) 在您的 Setup.cs 类中，让 MvvmCross 知道改用自定义演示器

protected override IMvxAndroidViewPresenter CreateViewPresenter()
{
    return new LocalizedTabPresenter(AndroidViewAssemblies);
}

注意:

• 仅当您需要仅设置一次标题时，此功能才有效应用程序启动并首次设置选项卡。

如果在应用运行时标题可能会多次更改，则需要子类化 MvxCachingFragmentStatePagerAdapter 并重写 GetPageTitleFormatted 方法并提供更多信息适合您的用例的自定义实现。

希望有帮助。