PlayStore 또는 AppStore에 게시된 거의 모든 모바일 앱은 전 세계 어디에서나 가능한 한 더 많은 클라이언트를 확보하기 위해 다른 언어로 현지화되어야 합니다.

MvvmCross는 Xamarin과 함께 작동하도록 독점적으로 작성된 'MVVM 프레임워크'이며 동일한.resx 파일을 사용하여 여러 플랫폼 간에 지역화된 리소스를 공유하는 쉬운 방법을 제공합니다. 이 게시물에서는 Android 앱과 iOS 앱 간에 현지화된 리소스를 공유하는 방법을 보여드리겠습니다.

현지화하자!

우리의 출발점은 표준 MvvmCross 솔루션 구조이며 각 플랫폼에 대한 별도의 프로젝트와 공통 항목이 포함된 Core 프로젝트가 있습니다. 두 플랫폼 모두에서 뷰 모델HomeView을 사용하여 HomeViewModel라는 단일 뷰를 만들었습니다.

솔루션 구조:


HomeView 에는 화면 중앙에 "Hello"라는 텍스트가 있는 레이블만 포함되어 있습니다. 스크린샷 및 UI 정의 아래:

기계적 인조 인간:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <androidx.appcompat.widget.AppCompatTextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Hello!"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

아이폰 OS:

public override void ViewDidLoad()
{
    View.BackgroundColor = UIColor.White;

    base.ViewDidLoad();

    var label = new UILabel { Text = "Hello!" };

    Add(label);

    View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
    View.AddConstraints(
        label.WithSameCenterX(View),
        label.WithSameCenterY(View));

    var set = CreateBindingSet();
    set.Bind(label).ToLocalizationId("Hello");
    set.Apply();
 }

참고: MvvmCross 설정 방법에 대한 자세한 내용은 official documentation 을 참조하십시오.

이 시점에서 NuGet 패키지MvvmCross.Plugin.ResxLocalization를 Core 프로젝트에 설치해야 합니다.



그런 다음 폴더Localization를 만들고 리소스 파일을 추가합니다. 이름을 지정하겠습니다AppResources.resx . 이 파일에는 앱의 기본 언어가 포함됩니다.

그것을 열고 Access Modifier를 Public로 설정했는지 확인하십시오.



아래 스크린샷에 따라 첫 번째 현지화된 리소스를 추가해 보겠습니다.



참고: MvvmCross 규칙은 문자열{ViewModelName}.{ResourceName}을 키로 사용합니다. 우리의 경우에는 HomeViewModel.Hello 입니다.

이제 선택한 다른 언어(제 경우에는 이탈리아어)에 대한 번역이 포함된 다른 리소스 파일을 계속 추가할 수 있습니다. 이렇게 하려면 AppResources.it.resx 폴더 아래에 Localization라는 파일을 추가합니다.



이제 Access Modifer가 No code generation로 설정되었습니다. 실제로 필요한 코드를 생성하는 것은 기본 resx 파일뿐입니다.

resx 파일을 닫고 HomeViewModel로 이동하여 다음을 수행합니다.

인터페이스 구현IMvxLocalizedTextSourceOwner

다음 속성을 정의합니다.

public IMvxLanguageBinder LocalizedTextSource =>
            new MvxLanguageBinder("", GetType().Name);

참고: 데모용으로 (전용) 페이지의 보기 모델에서 이 작업을 수행하고 있지만 실제 환경에서는 응용 프로그램의 거의 모든 페이지가 리소스를 지역화해야 하므로 단일 기본 보기 모델에 이 속성을 추가하는 것이 좋습니다.

시작 시 Mvx IoC 컨테이너에 플러그인을 등록합니다(제 예에서는 App.cs).

Mvx.IoCProvider.RegisterSingleton<IMvxTextProvider>(new MvxResxTextProvider(AppResources.ResourceManager));

이제 MvvmCross에 의해 노출된 바인딩 세트를 통해 변환을 적용할 시간입니다. UI로도 이 작업을 수행할 수 있지만 저는 모든 리소스를 코드로 설정하는 것을 선호합니다. 리팩토링 또는 변경의 경우 모든 변경 사항을 추적하는 것이 확실히 더 쉽습니다. 어떻게 하는지 봅시다.

기계적 인조 인간

위의 정의에서 android:text 정의를 android:id 로 바꿉니다. 아래에서 내 것을 볼 수 있습니다.

<androidx.appcompat.widget.AppCompatTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/txtHello"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

다음 단계의 코드 뒤에 컨트롤의 id ( txtHello )가 필요합니다.

들어가세요 HomeView.cs . UI 컨트롤( txtHello )의 참조를 가져오고 기본 제공 변환기를 통해 보기 모델에 정의한 MvxLanguageBinder 인스턴스에 바인딩하는 코드를 작성합니다.

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.home_view);

    var textView = FindViewById<AppCompatTextView>(Resource.Id.txtHello);

    var set = CreateBindingSet();

    set.Bind(textView)**.ToLocalizationId("Hello");**

    set.Apply();
}

이제 앱이 흔들릴 준비가 되었습니다! F5를 누르면 다음과 같이 표시됩니다.



그런 다음 Android 설정으로 이동하여 언어를 이탈리아어로 변경합니다. 그런 다음 앱을 다시 엽니다.



우라! 🎉🎉

아이폰 OS

iOS에서는 모든 것이 Android 측에서 했던 것과 동일하게 작동합니다.

Mvx의 바인딩 세트를 만들고 바인딩을 지역화된 리소스에 적용합니다.

var set = CreateBindingSet();
set.Bind(label).ToLocalizationId("Hello");
set.Apply();

iPhone 언어를 이탈리아어로 변경하고.. 다시 시작합니다 🎉



소스 코드는 my GitHub에서 사용할 수 있습니다.