ネイティブ モバイル アプリのウィジェットの変更 | Mendix

メインコンテンツへスキップ

サイト内検索

営業担当者へ連絡
無料でお試し

ネイティブモバイルアプリのウィジェットの変更

ウィジェット記事画像の変更

このチュートリアルは、 Mendix モデラーバージョン 9.24.0。他のバージョンでは異なる場合があります。

前提条件

このチュートリアルの内容を理解するには、React Nativeの基礎知識とネイティブモバイルアプリのスタイルを実装する方法が必要です。 Mendix Studio Pro。ネイティブモバイルアプリのスタイリングが初めての場合は、 Mendix アカデミー 最初。

この投稿の内容

この投稿では、変更方法について説明します。 Mendix ネイティブ モバイル アプリ用の直感的なユーザー インターフェイスを作成するためのデフォルトのウィジェット。これらは、エキスパート サービス チームで UX コンサルタントとして私がよく受けるリクエストです。

この投稿の内容 NOT 概要

この投稿は、カスタム ネイティブ モバイル アプリ ウィジェットの作成方法に関するチュートリアルではないことに注意してください。ウィジェットの複雑さによっては、作成にかなり長い時間 (およびより大きな予算) がかかる可能性があり、一部のクライアントにとっては選択肢にならない可能性があります。

この投稿の目的は、React Native だけでかなり満足のいく結果を達成できることを示すことです。

このブログ記事で紹介されているユーザー インターフェイスはすべて私が独自に作成したものです。

レッスン

以下は、私たちが注目する 3 つのスタイルです。

レッスン 1: トップバーセクションの拡張

レッスン 2: 虫眼鏡付き検索バー

レッスン 3: オーバーレイ要素

レッスン 1: トップバーセクションの拡張

ネイティブ プロジェクトでよく受けるリクエストの 1 つは、トップ バー セクションを拡張することです。これにより、ユーザーはページの内容に関する説明を追加できます。以下は結果の例です。

 

ステップ1: モデラーでテーマ構造を設定する

テーマモジュール: アプリのスタイル設定に取り組む前に、このアプリのテーマモジュールを作成していることを確認してください。方法がわからない場合は、 Mendix アカデミー。

レッスン 1 ステップ 1 グラフィック

新しいページを作成する: 今回は「背景」と名前を変更しました。

テーマモジュールグラフィック

 

ステップ2: 要素にクラスを追加する

「背景」ページで、ページの説明を囲むコンテナを作成し、クラスを割り当てます。

要素グラフィックにクラスを追加する
トップバーの拡張なので、「topBarExtension」というクラス名を使用しました。

同じページに、追加の要素がある場合にトップバーがどのように表示されるかを示すコンテンツを追加しました。

要素にクラスを追加するグラフィック #2
このカードに「popCard」というクラスを付けました。

テーマ モジュールで、「native」の下に新しい JS ファイルを作成し、それに応じて名前を変更します (例: 「extension.js」)。これは、フォルダー構造を整理し、ファイルを認識できる状態に保つというベスト プラクティスと一致します。

Extension.js グラフィック

ステップ3: 要素のスタイルを実装する

トップバー拡張機能を作成するための鍵は、間に隙間なくステータスバーに添付することです。「topBarExtension」クラスで、「marginTop」を 0 に設定します。

// - top bar extension section background
export const topBarExtension = {
  container: {
    marginTop: 0,
    paddingTop: 12,
    paddingBottom: 25,
    width: "100%",
    backgroundColor: "#586F63"
  }
}

他の要素もお好みのスタイルに合わせて自由にカスタマイズできます。

新しいファイル「card.js」を作成します。これは、後続の各要素を囲むカードにスタイルを追加するために使用されます。

カード、js グラフィック

「card.js」ファイルに「popCard」クラスを追加します。

// - the card that wraps around each subsequent element
export const popCard = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

新しく作成したファイルを「main.js」ファイルに必ずインポートしてください。

Main.js グラフィック

最終結果

ボーナス

もう一つの一般的なスタイルは、メイン コンテンツをトップ バー拡張と部分的に重ね合わせることです。最終結果のプレビューを以下に示します。

これを実現するには、後続の要素がトップバー セクションのコンテンツを覆わないように、トップバー拡張機能のパディングを拡張する必要があります。

ステップ1: モデラーを更新する

モデラーグラフィックの更新
トップバー拡張機能の更新されたクラス。
カードグラフィックのクラスを更新しました
カードの更新されたクラス。

ステップ2: コードを更新する

以下は、トップバー拡張機能の更新されたコードです。別のクラス「topBarExtensionLong」を指定して、同じ「extension.js」ファイルに追加しました。

// - top bar extension for the overlapping card style
export const topBarExtensionLong = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 65,
width: "100%",
backgroundColor: "#586F63"
}
}

重なり合う効果を作成するには、上余白を負の単位に変更して、上余白を超えるようにする必要があります。以下は、このスタイルのコードです。前のものと区別するために、別のクラス「cardOverlap」を指定しました。また、同じ「card.js」ファイルに追加しました。

// - card for the overlap style
export const cardOverlap = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: -35,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

最終結果

レッスン 2: 虫眼鏡付き検索バー

クライアントからよく寄せられるもう 1 つのリクエストは、検索バーに虫眼鏡アイコンを追加することです。これにより、ユーザーは検索ボックスをすぐに識別できるようになります。

ステップ1: データを設定し、ナノフローを作成する

要素のスタイルを実装する前に、次のようにドメイン モデラーでエンティティを設定する必要があることに注意してください。

データグラフィックの設定
• 名前: SearchHelper
• 属性: SearchText (制限付き文字列属性)
• 永続性: いいえ

In Mendix検索バーは基本的に検索機能を備えたテキスト ボックスです。デフォルトでは、テキスト ボックスにアイコンを追加することはできません。そのため、レイアウト グリッドを作成し、アイコンを 1 つの列に配置し、テキスト ボックスを別の列に配置する必要があります。

モデラーで、 データビュー ナノフローを呼び出してデータ ソースを取得します。新しいナノフロー「DS_SearchHelper」を作成します。

データビューグラフィック

 

新しいオブジェクトグラフィックを作成
フローに「新しいオブジェクトの作成」アクティビティを追加します。

 

エンドポイントグラフィック
終点。

データ ビュー内でコンテナーを作成し、クラス「searchBar」を指定します。これにより、検索バーの境界線がシミュレートされます。

検索バーの境界線グラフィック

コンテナ内に、2 列のレイアウト グリッド (比率 10:XNUMX) を作成します。左側に虫眼鏡の画像を追加します (最初に画像コレクションにアップロードする必要があります)。

虫眼鏡グラフィックを追加

右側に、属性「SearchText」とクラス「SearchInput」を持つテキスト ボックスを追加します。これが実際のテキスト ボックスです。この検索バーに溶け込むようにスタイルを設定します。

テキストボックススタイルのグラフィック

検索ボックスにオプションのプレースホルダー テキストを追加することもできます。

ステップ2: スタイルを実装する

「search.js」ファイルを作成します。「main.js」ファイルにインポートされていることを確認します。このファイルに、「searchBar」クラスと「searchInput」クラスのコードを追加します。

//the container that acts as a search bar (with the icon)
export const searchBar = {
container: {
borderRadius: 8,
backgroundColor: "#ffffff",
borderWidth: 2,
borderColor: "#555555",
height: 50,
paddingLeft: 10,
paddingRight: 10
}
}
//the actual search input field
export const searchInput = {
input: {
backgroundColor: 'transparent',
borderColor: 'transparent',
//placeholder text color
placeholderTextColor: "#A4A4A6",
fontSize: 16,
borderRadius: 50
}
}

最終結果：

レッスン 2 最終結果グラフィック

レッスン 3: オーバーレイ要素

最後に、1 つの要素が別の要素と部分的に重なるオーバーレイ効果を作成する方法について説明します。この例では、画像と部分的に重なるボタンを作成します。

ステップ1: レイアウトを設定する

ツールボックスから、画像とボタンをページにドラッグします。それに応じてボタンのアイコンを変更します。

レイアウトグラフィックの設定

画像にクラス「proPic」、ボタンに「overlapBtn」を設定します。スタイルは後で設定します。

プロピックグラフィック

 

アクションボタングラフィック

画像とボタンの下にテキスト要素をいくつか配置したレイアウトを作成しました。ただし、これはオプションです。同じことをしたい場合は、次の手順に従ってください。

  1. 画像とボタンを囲むコンテナを作成します。コンテナに「外側の中間」のスペースを追加します。コンテナを中央に揃えます。

テキスト要素 ステップ 1 グラフィック

2. コンテナーの下にレイアウト グリッドを作成し、その中にテキスト要素をいくつか追加します。すべてをコンテナーでラップし、クラス「popCard」(レッスン 1 で使用) を指定します。

テキスト要素 ステップ 2 グラフィック

ステップ2: スタイルを実装する

新しいファイル「overlay.js」を作成します。必ず「main.js」にインポートしてください。重なり合う要素を作成するための鍵は、要素の左余白や右余白を操作して、画面上の別の要素に対して意図的に配置することです。

これを実現するには、関連するマージンに負の単位を追加する必要があります。背後にある理論的根拠は、要素がトップバーに流れ込む効果を作成する場合と似ています (レッスン 1 のボーナス セクション)。

//profile pic
export const proPic = {
image: {
borderRadius: 100,
width: 150,
height: 150,
},
container: {
borderWidth: 2,
borderColor: "#777777",
borderRadius: 100,
width: 150,
height: 150,
marginTop: 25
}
}

 

//button to edit the profile pic
export const overlapBtn = {
container: {
borderWidth: 2,
borderRadius: 50,
width: 32,
height: 32,
backgroundColor: "#E7E7E7",
marginRight: -75,
marginTop: -32,
borderRadius: 50,
borderColor: "#777777"
},
icon: {
color: "#000000",
size: 18
}
}

 

最終結果：

レッスン 3 最終結果グラフィック

今日はこれで終わりです！チュートリアルをご覧いただきありがとうございました。ご質問があればお気軽にご連絡ください（[メール保護]).

言語を選択してください