【xamarin + MvvmCross 從零開始】二、MvvmCross 使用示例


 

MvvmCross

說起MvvmCross,要先說到MvvmMvvm是Mvc框架的一種變形。對應的分別為Model、View和ViewModel層。三層之間的關系是這樣的:

clip_image002

Model層為數據層,實現了業務數據的定義,View層為表現層,ViewModel層隔離了數據層和表現層,實現了對業務數據的隔離以及和表現層數據的綁定。

園子里也有朋友進行了詳細的解釋

http://www.cnblogs.com/888h/archive/2010/12/24/1915214.html

http://kb.cnblogs.com/page/120678/

舉個栗子

clip_image004

閑話少說,下面我們就用Xamarin和MvvmCross來做個小例子。

創建解決方案

1. 先要創建一個Xamarin跨平台的解決方案。方案模板使用Blank Xaml App(Xamarin.Forms Protable)

clip_image006

2. 創建好的解決方案大體應該是這樣子,包含一個可移植的項目、一個Android的項目和一個iOS的項目。如果有其它的項目,我們暫時移除掉。

clip_image007

3. 添加MvvmCross引用。引用MvvmCross需要從Nuget中添加。

在解決方案上點擊右鍵,選擇 管理解決方案NuGet程序包這一項。

clip_image008

4. 在NuGet管理器中直接搜索 MvvmCross,搜索結果第一項就是MvvmCross

clip_image010

在右邊的解決方案欄中選擇要引用MvvmCross的項目,點擊安裝,Nuget管理器自動下載MvvmCross並添加引用。

clip_image011

安裝完成后,查看解決方案,我們會發現項目已經引用了MvvmCross相應的程序集。

clip_image012

可移植項目

可移植項目做為解決方案共享的項目,主要建立所有項目公用的內容。這里我們主要建立公共類庫以及ViewModel。

1. 首先將項目中的App.xaml和mainPage.xaml移除。

2. 新建一個ViewModels文件夾,保存公共的ViewModel。

3. 在ViewModels下新建MainViewModel.cs。

4. 新建App類,做為MvvmCross公共的應用程序入口。

整理后項目結構大體是這樣的

clip_image013

  • App.cs
using Acr.UserDialogs;
using MvvmCross.Core.ViewModels;
using MvvmCross.Platform;
using MvvmCross.Platform.IoC;
using XamarinSample.ViewModels;

namespace XamarinSample
{
    public class App : MvxApplication
    {
        public override void Initialize()
        {
            base.Initialize();

            // 注冊所有的服務類
            CreatableTypes().EndingWith("Service").AsInterfaces().RegisterAsLazySingleton();
            Mvx.RegisterSingleton(UserDialogs.Instance);
            RegisterAppStart<MainViewModel>();
        }
    }
}
  • MainViewModel.cs
using System.Windows.Input;
using MvvmCross.Core.ViewModels;

namespace XamarinSample.ViewModels
{
    public class MainViewModel : MvxViewModel
    {
        /// <summary>
        /// 獲取或設置標題
        /// 設置標題時將觸發屬性改變事件
        /// </summary>
        public string Title
        {
            get { return _title; }
            set
            {
                _title = value;
                RaisePropertyChanged(() => _title);
            }
        }

        private ICommand _showTitleCommand;
        private string _title;

        /// <summary>
        /// 獲取 顯示標題的Command
        /// </summary>
        public ICommand ShowTitleCommand
        {
            get { return _showTitleCommand ?? (_showTitleCommand = new MvxCommand(ShowTitle)); }
        }

        private void ShowTitle()
        {
            Acr.UserDialogs.UserDialogs.Instance.Alert(Title,"這是一個標題", "知道了");
        }
    }
}

通過以上步驟,可移植項目已經整理完成了,下面我們針對各個移動端項目分別實現調用。

Android項目

Android項目主要實現Android界面以及界面邏輯。我們分別創建界面布局、與ViewModel綁定以及實現界面邏輯。

1. 添加MvvmCross 在Android項目的Setup類。

2. 添加界面布局並綁定ViewModel數據。

3. 實現入口Activity,綁定布局。

clip_image014

 

  • Setup.cs
using Android.Content;
using MvvmCross.Core.ViewModels;
using MvvmCross.Droid.Platform;

namespace XamarinSample.Droid
{
    public class Setup : MvxAndroidSetup
    {
        public Setup(Context applicationContext) : base(applicationContext)
        {
        }

        protected override IMvxApplication CreateApp()
        {
            return new App();
        }
    }
}
  • MainPage.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50"
        android:id="@+id/textView2"
        android:singleLine="true"
        android:gravity="center_vertical"
        local:MvxBind="Text Title, Mode=TwoWay"
        android:hint="請輸入標題"
        android:inputType="text"
        android:layout_marginTop="100"
        android:layout_marginBottom="20"
        android:textSize="26dip"
        android:background="@color/design_fab_stroke_end_outer_color" />
    <Button
        android:text="顯示標題"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        local:MvxBind="Click ShowTitleCommand"
        android:textSize="30dip" />
</LinearLayout>

image

  • MainActivity.cs
using Android.App;
using Android.Content.PM;
using Android.OS;
using MvvmCross.Droid.Views;
using XamarinSample.ViewModels;

namespace XamarinSample.Droid
{
    [Activity(Label = "XamarinSample", Icon = "@drawable/icon",
        Theme = "@style/MainTheme",
        MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : MvxActivity<MainViewModel>
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.MainPage);
        }
    }
}

 

OK, 至此Android端的項目完成了,讓我們執行一下看看效果

android

iOS項目

iOS 項目也主要實現了iOS上的界面邏輯,但如果要完成iOS的界面設計,需要連接到Mac系統才能在VS中進行界面設計。

  • 添加iOS項目的Setup對象。

Setup.cs

using MvvmCross.Core.ViewModels;
using MvvmCross.iOS.Platform;
using MvvmCross.iOS.Views.Presenters;
using UIKit;

namespace XamarinSample.iOS
{
    public class Setup : MvxIosSetup
    {

        protected override IMvxApplication CreateApp()
        {
            return new App();
        }

        public Setup(IMvxApplicationDelegate applicationDelegate, UIWindow window) : base(applicationDelegate, window)
        {
        }

        public Setup(IMvxApplicationDelegate applicationDelegate, IMvxIosViewPresenter presenter) : base(applicationDelegate, presenter)
        {
        }
    }
}
  • 在修改 AppDelegate.cs 文件,對象繼承於  ,修改FindishedLaunching方法。
using Foundation;
using MvvmCross.Core.ViewModels;
using MvvmCross.iOS.Platform;
using MvvmCross.Platform;
using UIKit;

namespace XamarinSample.iOS
{
    [Register("AppDelegate")]
    public class AppDelegate : MvxApplicationDelegate
    {
        public override UIWindow Window { get; set; }

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            Window = new UIWindow(UIScreen.MainScreen.Bounds);

            var setup = new Setup(this, Window);
            setup.Initialize();

            var startup = Mvx.Resolve<IMvxAppStart>();
            startup.Start();

            Window.MakeKeyAndVisible();

            return true;
        }
    }
}
  • 新建Views文件夾,並在文件夾下添加界面文件MainView。

image

  • 打開MainView.xib界面文件,進行界面設計。

image

我們在界面上添加一個TextField和一個Button,分別命名為txtField和btnShow。

  • 修改MainView.cs對象,實現數據綁定。
using MvvmCross.Binding.BindingContext;
using MvvmCross.iOS.Views;
using UIKit;
using XamarinSample.ViewModels;

namespace XamarinSample.iOS.Views
{
    public partial class MainView : MvxViewController<MainViewModel>
    {
        public MainView() : base("MainView", null)
        {
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();

            // Release any cached data, images, etc that aren't in use.
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            var set = this.CreateBindingSet<MainView, MainViewModel>();

            set.Bind(txtTitle).To(vm => vm.Title);

            set.Bind(btnShow).To(x => x.ShowTitleCommand);
            set.Apply();

            // Perform any additional setup after loading the view, typically from a nib.
        }

    }
}

好了,iOS的項目也設計完成了,我們運行一下看看效果。

ios

小結

本篇主要演示了如何使用在Xamarin 和MvvmCross 完成Android 和iOS多個平台的項目。示例的代碼已經上傳

https://github.com/3368aa/XamarinTest

本人對Xamarin也是邊學邊做,如有錯誤之處,請指正。

下一篇我們開始針對MvvmCross進行下講解。

mywx


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM