是否有mvvmcross提供的标签式布局平台？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了是否有mvvmcross提供的标签式布局平台？相关的知识，希望对你有一定的参考价值。
我正在尝试在xamarin应用程序中添加选项卡式布局。我使用的是mvvmcross平台，但要找到mvvmcross为android和ios提供的标签式布局平台并不容易。如果mvvmcross中有任何平台或示例，请帮助我！谢谢！
答案
TR; DR;
在MvvmCross的文档中，你会在主持人（Xamarin.Android，Xamarin.iOS，Xamarin.Forms）中找到它。
基本上，您必须使用视图属性进行decore以生成选项卡。
很长的例子（这些是使用Mvx 6）
从MvvmCross存储库中的Playground project中提取的示例。
的ViewModels
你将有一个根标签ViewModel，它将成为所有标签的容器，每个标签都有一个ViewModel。
标签根（有两个根提供不同的方法来做同样的事情，并显示一个标签可以导航到另一个，你应该只使用一个）
public class TabsRootViewModel : MvxNavigationViewModel
{
public TabsRootViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
ShowInitialViewModelsCommand = new MvxAsyncCommand(ShowInitialViewModels);
ShowTabsRootBCommand = new MvxAsyncCommand(async () => await NavigationService.Navigate<TabsRootBViewModel>());
}
public IMvxAsyncCommand ShowInitialViewModelsCommand { get; private set; }
public IMvxAsyncCommand ShowTabsRootBCommand { get; private set; }
private async Task ShowInitialViewModels()
{
var tasks = new List<Task>();
tasks.Add(NavigationService.Navigate<Tab1ViewModel, string>("test"));
tasks.Add(NavigationService.Navigate<Tab2ViewModel>());
tasks.Add(NavigationService.Navigate<Tab3ViewModel>());
await Task.WhenAll(tasks);
}
private int _itemIndex;
public int ItemIndex
{
get { return _itemIndex; }
set
{
if (_itemIndex == value) return;
_itemIndex = value;
Log.Trace("Tab item changed to {0}", _itemIndex.ToString());
RaisePropertyChanged(() => ItemIndex);
}
}
}
public class TabsRootBViewModel : MvxNavigationViewModel
{
public TabsRootBViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
ShowInitialViewModelsCommand = new MvxAsyncCommand(ShowInitialViewModels);
}
public IMvxAsyncCommand ShowInitialViewModelsCommand { get; private set; }
private async Task ShowInitialViewModels()
{
var tasks = new List<Task>();
tasks.Add(NavigationService.Navigate<Tab1ViewModel, string>("test"));
tasks.Add(NavigationService.Navigate<Tab2ViewModel>());
await Task.WhenAll(tasks);
}
private int _itemIndex;
public int ItemIndex
{
get { return _itemIndex; }
set
{
if (_itemIndex == value) return;
_itemIndex = value;
Log.Trace("Tab item changed to {0}", _itemIndex.ToString());
RaisePropertyChanged(() => ItemIndex);
}
}
}
TAB1
public class Tab1ViewModel : MvxNavigationViewModel<string>
{
public Tab1ViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
OpenChildCommand = new MvxAsyncCommand(async () => await NavigationService.Navigate<ChildViewModel>());
OpenModalCommand = new MvxAsyncCommand(async () => await NavigationService.Navigate<ModalViewModel>());
OpenNavModalCommand = new MvxAsyncCommand(async () => await NavigationService.Navigate<ModalNavViewModel>());
CloseCommand = new MvxAsyncCommand(async () => await NavigationService.Close(this));
OpenTab2Command = new MvxAsyncCommand(async () => await NavigationService.ChangePresentation(new MvxPagePresentationHint(typeof(Tab2ViewModel))));
}
public override async Task Initialize()
{
await Task.Delay(3000);
}
string para;
public override void Prepare(string parameter)
{
para = parameter;
}
public override void ViewAppeared()
{
base.ViewAppeared();
}
public IMvxAsyncCommand OpenChildCommand { get; private set; }
public IMvxAsyncCommand OpenModalCommand { get; private set; }
public IMvxAsyncCommand OpenNavModalCommand { get; private set; }
public IMvxAsyncCommand OpenTab2Command { get; private set; }
public IMvxAsyncCommand CloseCommand { get; private set; }
}
TAB2
public class Tab2ViewModel : MvxNavigationViewModel
{
public Tab2ViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
ShowRootViewModelCommand = new MvxAsyncCommand(async () => await NavigationService.Navigate<RootViewModel>());
CloseViewModelCommand = new MvxAsyncCommand(async () => await NavigationService.Close(this));
}
public IMvxAsyncCommand ShowRootViewModelCommand { get; private set; }
public IMvxAsyncCommand CloseViewModelCommand { get; private set; }
}
Xamarin Traditional
Android的
这里的关键是MvxFragmentPresentation属性，它确定它是一个片段，MvxTabLayoutPresentation确定它将被显示为一个标签。显然，标签根目录有一个ViewPager来托管标签页面。
首先，您需要一个视图来托管选项卡（在此示例中，视图也托管在SplitDetailView中，但您可以将它放在任何您想要的位置：
根标签
我假设您希望您的根选项卡是一个片段，您也可以将它作为一个活动（如果您需要，请查看Playground项目）。
[MvxFragmentPresentation(fragmentHostViewType: typeof(SplitDetailView), fragmentContentId: Resource.Id.tabs_frame, addToBackStack: true)]
[Register(nameof(TabsRootBView))]
public class TabsRootBView : MvxFragment<TabsRootBViewModel>
{
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
base.OnCreateView(inflater, container, savedInstanceState);
var view = this.BindingInflate(Resource.Layout.TabsRootBView, null);
return view;
}
public override void OnViewCreated(View view, Bundle savedInstanceState)
{
base.OnViewCreated(view, savedInstanceState);
if (savedInstanceState == null)
{
ViewModel.ShowInitialViewModelsCommand.Execute();
}
}
}
它的轴：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
local:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:paddingLeft="16dp"
local:tabGravity="center"
local:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager android:id="@+id/viewpager"
androi以上是关于是否有mvvmcross提供的标签式布局平台？的主要内容，如果未能解决你的问题，请参考以下文章