バージョン: 次

1対Nカスタムボタン

これまでに見てきたように、4D モバイルエディターでは、いろいろなものがカスタマイズできるようになっています。

テンプレートやフォーマッターだけでなく、リレーションボタンもカスタマイズできます。

しかも、その手順はとても簡単です！カスタムテンプレートにカスタムボタンをドラッグ＆ドロップするだけです。

以下が用意されているスタータープロジェクトをダウンロードしてください:

データベースとモバイルプロジェクト
標準のリレーションボタン

スタータープロジェクト

ボタンを追加する

まず、ボタン relationButton.xib を 4D for iOS で使用できるように、カスタムテンプレートに追加しましょう。

ボタンを追加するには、TimeKeeper.4dbase/Resources/Mobile/form/detail/BlackVisual Contact フォルダーにこのファイルをドロップすれば OK です。

簡単ですね！

ボタンの設定

Xcode で .xib ファイルを開きます。

このように表示されるはずです:

Attribute inspector でさまざまな項目の値を変更することができます:

カラーとフォント
ボタンのスタイル
ボタンのサイズ

さっそく、ボタンのカラーとラベルフォントを変えてみましょう！

カラーとフォントのカスタマイズ

ボタンを選択し、Attribute inspector でカラーとフォントを変更します。

Background には、ライトおよびダークモードの両方で最良のコントラストになるように Label Color を選択します。

Text Color は System Background Color (システム背景色)、フォント名は Helvetica Neue Medium 17 に設定します。

Tint にも System Background Color を適用しましょう。

シミュレーターで、ダークモードとライトモードそれぞれの結果を確かめます:

ボタンの角の丸み

今度は、リレーションボタンの角に丸みをつけてみましょう！

Identity inspector を開きます。

ボタンを選択し、User Defined Runtime Attributes に次の 2行を追加します:

Key Path: cornerRadius
Type: Number
Value: 12

および

Key Path: layer.masksToBounds
Type: Boolean
Value: Check the box

カスタマイズしたプロジェクトを実際にビルドしてみましょう！

下図のように表示が変化していれば成功です:

サイズと制約

カスタム詳細フォームのテンプレートと同じように、ボタンに 制約を追加 するのであれば、xib の XMLファイルに タグを追加 する必要もあることに留意してください。タグを追加することにより、同じ詳細フォーム内でリレーションボタンを複数表示する場合にも、ボタンが正しく複製されるようになります。

そのことを踏まえ、ボタンに制約を設定してみましょう！