右から左へのローカライズRight-to-left localization

• 11/05/2020
• • d
  • o

サンプルのダウンロード Download the sample

右から左へのローカライズでは、Xamarin.Forms アプリケーションに、右から左へのフロー方向のサポートが追加されます。Right-to-left localization adds support for right-to-left flow direction to Xamarin.Forms applications.

フロー方向とは、ページ上の UI 要素を視覚でスキャンしていく方向のことです。Flow direction is the direction in which the UI elements on the page are scanned by the eye. アラビア語やヘブライ語などの一部の言語では、UI 要素が右から左へのフロー方向で配置される必要があります。Some languages, such as Arabic and Hebrew, require that UI elements are laid out in a right-to-left flow direction. これは、VisualElement.FlowDirection プロパティを設定することで実現できます。This can be achieved by setting the VisualElement.FlowDirection property. このプロパティでは、レイアウトを制御する任意の親要素内での UI 要素のフロー方向が取得または設定され、次のいずれかの FlowDirection 列挙値に設定される必要があります。This property gets or sets the direction in which UI elements flow within any parent element that controls their layout, and should be set to one of the FlowDirection enumeration values:

• LeftToRight
• RightToLeft
• MatchParent

要素の FlowDirection プロパティを RightToLeft に設定すると、一般的に配置が右に、読む順が右から左に、コントロールのレイアウトが右から左に設定されます。Setting the FlowDirection property to RightToLeft on an element generally sets the alignment to the right, the reading order to right-to-left, and the layout of the control to flow from right-to-left:

親のない要素の FlowDirection プロパティの既定値は LeftToRight ですが、親のある要素の FlowDirection の既定値は MatchParent になります。The default FlowDirection property value for an element without a parent is LeftToRight, while the default FlowDirection for an element with a parent is MatchParent. そのため、要素ではビジュアル ツリー内の親から FlowDirection プロパティ値を継承し、任意の要素でその親から取得した値をオーバーライドできます。Therefore, an element inherits the FlowDirection property value from its parent in the visual tree, and any element can override the value it gets from its parent.

デバイスのフロー方向を優先するRespecting device flow direction

選択した言語とリージョンに基づいてデバイスのフロー方向を優先するには、開発者が明示的に選択する必要があり、自動的に行われることはありません。Respecting the device's flow direction based on the selected language and region is an explicit developer choice and does not happen automatically. これは、ページ (ルート レイアウト) の FlowDirection プロパティを static Device.FlowDirection 値に設定することで実現できます。It can be achieved by setting the FlowDirection property on a page, or root layout, to the static Device.FlowDirection value:

<ContentPage ... FlowDirection="{x:Static Device.FlowDirection}"> />

this.FlowDirection = Device.FlowDirection;

その後、既定では、ページ (ルート レイアウト) の子要素はすべて、Device.FlowDirection 値を継承します。All child elements of the page, or root layout, will by default then inherit the Device.FlowDirection value.

プラットフォームの設定Platform setup

特定のプラットフォームの設定では、右から左のロケールを有効にする必要があります。Specific platform setup is required to enable right-to-left locales.

iOSiOS

Info.plist の CFBundleLocalizations キー用の配列項目に対してサポートされる言語として、必要な右から左のロケールを追加する必要があります。The required right-to-left locale should be added as a supported language to the array items for the CFBundleLocalizations key in Info.plist. 次の例では、CFBundleLocalizations キーの配列に追加されているアラビア語を示しています。The following example shows Arabic having been added to the array for the CFBundleLocalizations key:

<key>CFBundleLocalizations</key>
<array>
    <string>en</string>
    <string>ar</string>
</array>

詳細については、「iOS でのローカライズの基本事項」を参照してください。For more information, see Localization Basics in iOS.

右から左へのローカライズは、デバイスまたはシミュレーター上の言語とリージョンを Info.plist で指定された右から左のロケールに変更することによって、テストできます。Right-to-left localization can then be tested by changing the language and region on the device/simulator to a right-to-left locale that was specified in Info.plist.

AndroidAndroid

アプリの AndroidManifest.xml ファイルは更新されているため、<uses-sdk> ノードで android:minSdkVersion 属性は 17 に設定され、<application> ノードで android:supportsRtl 属性は true に設定されます。The app's AndroidManifest.xml file should be updated so that the <uses-sdk> node sets the android:minSdkVersion attribute to 17, and the <application> node sets the android:supportsRtl attribute to true:

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <uses-sdk android:minSdkVersion="17" ... />
    <application ... android:supportsRtl="true">
    </application>
</manifest>

その後、デバイスまたはエミュレーターで右から左方向の言語を使用するように変更するか、または [設定] > [開発者向けオプション] で [Force RTL layout direction](RTL レイアウト方向を使用) をオンにすることで、右から左へのローカライズをテストできます。Right-to-left localization can then be tested by changing the device/emulator to use the right-to-left language, or by enabling Force RTL layout direction in Settings > Developer Options.

ユニバーサル Windows プラットフォーム (UWP)Universal Windows Platform (UWP)

必要な言語リソースは、Package.appxmanifest ファイルの <Resources> ノードで指定する必要があります。The required language resources should be specified in the <Resources> node of the Package.appxmanifest file. 次の例では、<Resources> ノードに追加されているアラビア語を示します。The following example shows Arabic having been added to the <Resources> node:

<Resources>
    <Resource Language="x-generate"/>
    <Resource Language="en" />
    <Resource Language="ar" />
</Resources>

さらに、UWP では、アプリの既定のカルチャが明示的に .NET Standard ライブラリで定義されている必要があります。In addition, UWP requires that the app's default culture is explicitly defined in the .NET Standard library. これは、AssemblyInfo.cs (別のクラス) の NeutralResourcesLanguage 属性を既定のカルチャに設定することで実現できます。This can be accomplished by setting the NeutralResourcesLanguage attribute in AssemblyInfo.cs, or in another class, to the default culture:

using System.Resources;

[assembly: NeutralResourcesLanguage("en")]

右から左へのローカライズは、デバイス上の言語とリージョンを適切な右から左のロケールに変更するこでテストできます。Right-to-left localization can then be tested by changing the language and region on the device to the appropriate right-to-left locale.

制限事項Limitations

Xamarin.Forms での右から左へのローカライズには、現在いくつかの制限があります。Xamarin.Forms right-to-left localization currently has a number of limitations:

• NavigationPage のボタンの場所、ツール バー項目の場所、および切り替えアニメーションは、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。NavigationPage button location, toolbar item location, and transition animation is controlled by the device locale, rather than the FlowDirection property.
• CarouselPage のスワイプ方向は反転されません。CarouselPage swipe direction does not flip.
• Image のビジュアル コンテンツは反転されません。Image visual content does not flip.
• WebView のコンテンツでは FlowDirection プロパティを優先しません。WebView content does not respect the FlowDirection property.
• テキストの配置を制御するには、TextDirection プロパティを追加する必要があります。A TextDirection property needs to be added, to control text alignment.

iOSiOS

• Stepper の向きは、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。Stepper orientation is controlled by the device locale, rather than the FlowDirection property.
• EntryCell のテキストの配置は、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。EntryCell text alignment is controlled by the device locale, rather than the FlowDirection property.
• ContextActions のジェスチャと配置は反転されません。ContextActions gestures and alignment are not reversed.

AndroidAndroid

• SearchBar の向きは、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。SearchBar orientation is controlled by the device locale, rather than the FlowDirection property.
• ContextActions の配置は、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。ContextActions placement is controlled by the device locale, rather than the FlowDirection property.

UWPUWP

• Editor のテキストの配置は、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。Editor text alignment is controlled by the device locale, rather than the FlowDirection property.
• FlowDirection プロパティは子の FlyoutPage に継承されません。FlowDirection property is not inherited by FlyoutPage children.
• ContextActions のテキストの配置は、FlowDirection プロパティではなく、デバイスのロケールによって制御されます。ContextActions text alignment is controlled by the device locale, rather than the FlowDirection property.

右から左へのレイアウトを強制するForce right-to-left layout

Xamarin.iOS および Xamarin.Android アプリケーションには、それぞれのプラットフォーム プロジェクトを変更することにより、デバイスの設定に関係なく、常に右から左へのレイアウトを使用するように強制することができます。Xamarin.iOS and Xamarin.Android applications can be forced to always use a right-to-left layout, regardless of device settings, by modifying the respective platform projects.

iOSiOS

Xamarin.iOS アプリケーションには、次のように AppDelegate クラスを変更することにより、常に右から左へのレイアウトを使用するように強制することができます。Xamarin.iOS applications can be forced to always use a right-to-left layout by modifying the AppDelegate class as follows:

1. IntPtr_objc_msgSend 関数を AppDelegate クラスの最初の行として宣言します。Declare the IntPtr_objc_msgSend function as the first line in your AppDelegate class:

   [System.Runtime.InteropServices.DllImport(ObjCRuntime.Constants.ObjectiveCLibrary, EntryPoint = "objc_msgSend")]
   internal extern static IntPtr IntPtr_objc_msgSend(IntPtr receiver, IntPtr selector, UISemanticContentAttribute arg1);
   

2. FinshedLaunching メソッドから戻る前に、FinishedLaunching メソッドから IntPtr_objc_msgSend 関数を呼び出します。Call the IntPtr_objc_msgSend function from the FinishedLaunching method, before returning from the FinshedLaunching method:

   bool result = base.FinishedLaunching(app, options);
   
   ObjCRuntime.Selector selector = new ObjCRuntime.Selector("setSemanticContentAttribute:");
   IntPtr_objc_msgSend(UIView.Appearance.Handle, selector.Handle, UISemanticContentAttribute.ForceRightToLeft);
   
   return result;
   

この方法は、常に右から左へのレイアウトを必要とするアプリケーションの場合に役立ち、FlowDirection プロパティを設定する必要がなくなります。This approach is useful for applications that always require a right-to-left layout, and removes the requirement to set the FlowDirection property.

IntrPtr_objc_msgSend メソッドの詳細については、「Xamarin. iOS の Objective-C セレクター」を参照してください。For more information about the IntrPtr_objc_msgSend method, see Objective-C selectors in Xamarin.iOS.

AndroidAndroid

Xamarin.Android アプリケーションには、次の行を含むように MainActivity クラスを変更することで、常に右から左へのレイアウトを使用するように強制することができます。Xamarin.Android applications can be forced to always use a right-to-left layout by modifying the MainActivity class to include the following line:

Window.DecorView.LayoutDirection = LayoutDirection.Rtl;

この方法は、常に右から左へのレイアウトを必要とするアプリケーションの場合に役立ち、大部分のコントロールに対して FlowDirection プロパティを設定する必要がなくなります。This approach is useful for applications that always require a right-to-left layout, and removes the requirement to set the FlowDirection property for most controls. ただし、CollectionView などの一部のコントロールには、LayoutDirection プロパティを考慮するのでなく、引き続き FlowDirection プロパティを設定する必要があります。However, some controls, such as CollectionView, don't respect the LayoutDirection property and still require the FlowDirection property to be set.

Xamarin.University での右から左方向の言語のサポートRight to left language support with Xamarin.University

Xamarin.Forms 3.0 での右から左方向へのサポートに関するビデオXamarin.Forms 3.0 Right-to-Left Support video

関連リンクRelated links

• TodoLocalizedRTL サンプル アプリTodoLocalizedRTL Sample App