MVVMCross를 사용하여 프래그먼트를 ViewModels에 통합하는 방법

Question

저는 Xamarin을 처음 사용하고 있으며 첫 번째 앱을 만들려고합니다. 응용 프로그램은 최소한 다음과 같은 기능을 가진 4 개의 독립적 인 모듈을 갖습니다 : - 레코드 목록. - 새 레코드를 만들기위한보기. - 전역 모듈 (프로필 사용자)에 대한 참조입니다.

요점은, AppCompatActivity, Fragment, Toolbar, ActionBar 등을 구현하는 웹에서 자습서를 발견했기 때문입니다. 출처는 여기에서 찾을 수 있습니다 : https://github.com/JoeRock11/Xamarin_DesignLibrary

이 예제에는 내부에 조각이있는 세 개의 탭이 있으며, 현재 탭을 변경하기 위해 화면을 슬라이드 (facebook과 유사) 할 수 있습니다. 내 애플 리케이션에 대한 동일한 작업을 수행하려는 각 탭은 하나의 모듈입니다.

샘플이 완벽하게 작동하지만 MVVMCross 프레임 워크를 구현하고 싶지만 어떻게 구현할 것인지 잘 모릅니다.

public class AllPostsViewModel : MvxViewModel 
{ 
    public List<Post> AllPosts { get; set; } 
    public ICommand NavBack 
    { 
     get {return new MvxCommand(() => Close(this));} 
    } 
    public void Init() 
    { 
     Task<List<Bill>> result = Mvx.Resolve<Repository>().GetAllPosts(); 
     result.Wait(); 
     AllPosts = result.Result; 
    } 
} 

보기 (안드로이드 프로젝트)

[Activity(Label = "Posts", NoHistory = true)] 
public class AllPostsView : MvxActivity 
{ 
    protected override void OnCreate(Bundle bundle) 
    { 
     base.OnCreate(bundle); 
     SetContentView(Resource.Layout.View_AllBills); 
    } 
} 

을 :

public class Fragment1 : Fragment 
{ 
    public override void OnCreate(Bundle savedInstanceState) 
    { 
     base.OnCreate(savedInstanceState); 
    } 
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
    { 
     RecyclerView recyclerView = inflater.Inflate(Resource.Layout.Fragment1, container, false) as RecyclerView; 
     SetUpRecyclerView(recyclerView); 
     return recyclerView; 
    } 
    private void SetUpRecyclerView(RecyclerView recyclerView) 
    { 
     var values = GetDataSource(); 
     recyclerView.SetLayoutManager(new LinearLayoutManager(recyclerView.Context)); 
     recyclerView.SetAdapter(new SimpleStringRecyclerViewAdapter(recyclerView.Context, values, Activity.Resources)); 

     recyclerView.SetItemClickListener((rv, position, view) => 
     { 
      //Tasks 
     }); 
    } 
} 

이 활동 (핵심 사업) 작업 MVVMCross를 구현하지만, 뷰 모델입니다 :

이

는 조각 샘플입니다

이제 Core 및 Android 프로젝트에서 Activities 대신 Fragments를 사용하도록 변경하려고합니다.

또한이 특수 사례의 경우 활동 대신 사용 조각에 대한 의견을 듣고 자합니다. 자습서를 읽었 기 때문에 조각을 사용하기 때문에.

Answer 1

이것을 달성하는 한 가지 방법은 앱에서 ViewPager를 사용하는 것입니다. 먼저이 유사한 레이아웃을 만들 :

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:background="@color/bglight" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:elevation="4dp" 
     android:background="@color/white" /> 
    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_below="@id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
</RelativeLayout> 

둘째 단계는 탭과 viewpager에 조각을 추가하는 호스트 활동을 만드는 것입니다. 액티비티의 뷰 모델은 프래그먼트의 뷰 모델을 특성으로 호스팅합니다. 그래서 모든 파편은 MvxFragment에서 상속해야합니다. TViewmodel은 해당 뷰 모델입니다. 이 클래스는 MvvmCross.Droid.Support.V4 라이브러리에서 찾을 수 있습니다.

세 번째 단계는 MvxFragments와 함께 작동하는 viewpageradapter를 추가하는 것입니다. 그냥 프로젝트에 코드를 추가합니다

using System; 
using System.Collections.Generic; 
using System.Linq; 
using Android.App; 
using Android.Content; 
using Android.Support.V4.App; 
using Java.Lang; 
using MvvmCross.Core.ViewModels; 
using MvvmCross.Droid.Support.V4; 
using Fragment = Android.Support.V4.App.Fragment; 
using FragmentManager = Android.Support.V4.App.FragmentManager; 
using String = Java.Lang.String; 

namespace YourNameSpace 
{ 
    public class MvxViewPagerFragmentAdapter 
     : FragmentStatePagerAdapter 
    { 
     private readonly Context _context; 
     public IEnumerable<FragmentInfo> Fragments { get; private set; } 

     public override int Count 
     { 
      get { return Fragments.Count(); } 
     } 

     public MvxViewPagerFragmentAdapter(
      Context context, FragmentManager fragmentManager, IEnumerable<FragmentInfo> fragments) 
      : base(fragmentManager) 
     { 
      _context = context; 
      Fragments = fragments; 
     } 

     public override Fragment GetItem(int position) 
     { 
      var fragmentInfo = Fragments.ElementAt(position); 
      var fragment = Fragment.Instantiate(_context, 
      Java.Lang.Class.FromType(fragmentInfo.FragmentType).Name); 
      ((MvxFragment)fragment).ViewModel = fragmentInfo.ViewModel; 
      return fragment; 
     } 

     public override ICharSequence GetPageTitleFormatted(int position) 
     { 
      return new String(Fragments.ElementAt(position).Title); 
     } 

     public class FragmentInfo 
     { 
      public string Title { get; set; } 
      public Type FragmentType { get; set; } 
      public IMvxViewModel ViewModel { get; set; } 
     } 
    } 
} 

그리고 최종 단계는 다음과 같이 모든 것을 연결할 것입니다. "ViewModel.AccountsViewModel"무엇

protected override void OnCreate(Bundle savedInstanceState) 
{ 
    base.OnCreate(savedInstanceState); 
    SetContentView(Resource.Layout.viewpagerlayout); 

    var viewPager = FindViewById<Android.Support.V4.View.ViewPager>(Resource.Id.viewpager); 

    var fragments = new List<MvxViewPagerFragmentAdapter.FragmentInfo> 
    { 
     new MvxViewPagerFragmentAdapter.FragmentInfo 
     { 
      FragmentType = typeof(AccountsTabAccountsView), 
      Title = ViewModel.AccountTabTitle, 
      ViewModel = ViewModel.AccountsViewModel 
     }, 
     new MvxViewPagerFragmentAdapter.FragmentInfo 
     { 
      FragmentType = typeof(AccountsTabCardsView), 
      Title = ViewModel.CardsTabTitle, 
      ViewModel = ViewModel.CardsViewModel 
     } 
    }; 
    viewPager.Adapter = new MvxViewPagerFragmentAdapter(Activity, SupportFragmentManager, fragments); 
    viewPager.SetCurrentItem(0, true); 
    viewPager.OffscreenPageLimit = 2; 

    var tabLayout = view.FindViewById<TabLayout>(Resource.Id.tabs); 
    tab.TabMode = TabLayout.ModeFixed; 
    tab.TabGravity = TabLayout.GravityFill; 
    tab.FillViewport = true; 
    tab.SetSelectedTabIndicatorColor(ContextCompat.GetColor(Activity, Resource.Color.blue)); 
    tab.SetTabTextColors(ContextCompat.GetColor(Activity, Resource.Color.divider), ContextCompat.GetColor(Activity, Resource.Color.blue));    
    tabLayout.SetupWithViewPager(viewPager); 
}