モバイル向け4D。ライト＆ダークアピアランスのためのカスタムデータフォーマッター

以前から、独自のカスタムデータフォーマッターを作成し、生成したアプリで文字列、ブーリアン、または整数を画像に変換することができました。

この4D v19 R2の新機能は、iOSと Androidのフォーマッタをフルに活用し、明るい外見と暗い外見の両方で画像を美しく見せることを可能にします。

では、その方法を見てみましょう。

これは、3つの異なる方法で行うことができます。

• 白と黒を使う
• アクティブなモードに応じて異なる画像を使用する
• 上記の2つの方法を混ぜる

黒と白のカラーを使う

このオプションを使用すると、モバイルデバイスに設定されているモード（明るいまたは暗い）に応じて、色に最適化された画像を取得することができます。


{ "name":"textToImage",
"type":["text"],
"binding":"imageNamed",
"choiceList":{"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets"（アセット）。{
"size":54,
"tintable": true
}
}.

すべてのクラシックフォーマッターでは、フォーマッターのmanifest.jsonファイルに以下の情報が含まれているはずです。

• 画像に置換される値を含む「choiceList」。
• サイズ”などの画像 (またはアセット) のプロパティ

ここでの大きな違いは、UI のテーマ モードに応じて画像の色（黒または白）を動的に適合させることができるように、“tintable”キーがtrue に設定されている点です。

モードを切り替えたときの携帯電話の表示はこんな感じです。

モードに応じて異なる画像を使用する

このオプションは、モバイルデバイスに設定されているモードに応じて、異なる最適化された画像を表示するよう設定することができます。


{ "name":"textToImage",
"type":["text"],
"binding":"imageNamed",
"choiceList":{"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets"（アセット）。{
"size":54
}
}です。

ここで、フォーマッタは前のものと同じです。変わるのは画像の名前である。画像のサフィックスが”_dark “であれば、ダークモードで使用されます。

例として“clear_dark.png” は “clear.png” のダークバージョンとして設定されます。

その結果がこちらです。

両方のオプションを混ぜる

このオプションを使うと、前の2つのオプションを利用することができます。つまり、「tintable」 キーを trueに設定すると同時に、モバイル端末に設定されているモードに応じて最適化された画像と表示色を指定することができます。

これで、iOSや Androidの端末がダークモードでもライトモードでも、フォーマッタを使えるようになりました。

そうそう、この機能はAndroidでも利用できますよ。

4Dフォーラムで遠慮なくフィードバックをお寄せください。また、詳細については、専用のドキュメントをご覧ください。