1.概要
ラジオボタンは、同じグループとして指定した複数のラジオボタンの中から一つを選択する際に用いるコントロールです。ラジオボタンのON/OFFを切り替えることで、あらかじめ設定した動作を呼び出すこともできます。
以下では、「2.開発の手引き」にて、ラジオボタンでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、ラジオボタンに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、ラジオボタンを使いこなすうえでよく使うパラメーター設定をご紹介します。
解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください
2-1.ラジオボタン1
性別設定用のラジオボタンを2つ配置します。
男性が選択されると1 女性が選択されると2がデータベースに保存されます。
女性が選択された場合のみ、ラジオボタン2が活性状態となります。
2-1-1.オブジェクト>動作設定
各ラジオボタンを選択した状態で、以下プロパティを設定します。
プロパティーエリアの「オブジェクト」>「動作設定」から
- ラジオグループに group1 と設定します
- ON値に 男性の場合は 1 女性の場合は 2 を設定します
2-1-2.データ>内容
データフォームの設定をします。
各ラジオボタンを選択した状態で、以下のプロパティーを設定します。
プロパティーエリアの「データ」>「内容」から
- フィールド名に 性別 を設定します
- 男性も女性も、ここの設定は同じです
データフォームを使うことで、データベースへの入出力を、特別なロジックを実装せずとも、リアルタイムに実現することができます。
データフォームを使うには、事前にDBの中にテーブルを作成する必要があります。
テーブルの作成:アンケート
ラジオボタンで入力した内容を保存するためのテーブルを作成します。
作成したテーブルの「設計」で「項目名」と「物理項目名」と「型」をそれぞれ登録します。
データフォームの設定
フォームをクリックし、データ帯>内容>テーブル名 に 上記で作成した tbl_check を設定します
2-1-3.デザイン>色と形
各ラジオボタンを選択した状態で、以下プロパティーを設定します。
プロパティーエリアの「デザイン」>「色と形」から設定します
重要箇所のみ説明します。
- 横配置と縦配置 は、ラジオボタンの横の文字列の位置を設定できます
- 通常>フォント は、ラジオボタンの横の文字列の色を設定できます
- チェック>フォント は、ラジオボタンのボタン色を設定できます
- 厚み を設定することで、ラジオボタンに奥行を持たせています
2-1-4.デザイン>画像
各ラジオボタンを選択した状態で、以下プロパティを設定します。
プロパティーエリアの「デザイン」>「画像」から設定します
2-1-5.他
ロジック:010_性別選択時 について
ラジオボタン1では、クリックした時に、以下の処理が実装されています。
- 女性が選択されている時は、ラジオボタン2を使用可にする
- それ以外の時は、ラジオボタン2を使用不可にする
重点解説
2行目:IF判定によって、女性の場合は3~5行目を実施し、ラジオボタンを使用可にする
6行目:2行目に該当しない場合(男性、もしくは未選択)の場合は、7~10行目を実行し、
ラジオボタンを使用不可にする
ラジオボタンクリック時に、ロジックを呼び出す
各ラジオボタンを選択した状態で、以下のプロパティーを設定します。
2-2.ラジオボタン2
検診用のラジオボタンを2つ配置します。
はいが選択されると"はい" いいえが選択されると"いいえ"がデータベースに保存されます。
2-2-1.オブジェクト>動作設定
各ラジオボタンを選択した状態で、以下プロパティーを設定します。
プロパティーエリアの「オブジェクト」>「動作設定」から
- ラジオグループに group2 と設定します
- ON値に はいの場合は"はい" いいえの場合は "いいえ" を設定します
2-2-2.データ>内容
データフォームの設定をします。
各ラジオボタンを選択した状態で、以下のプロパティーを設定します。
プロパティーエリアの「データ」>「内容」から
- フィールド名に 検診 を設定します
- 男性も女性も、ここの設定は同じです
データフォームを使うことで、データベースへの入出力を、特別なロジックを実装せずとも、リアルタイムに実現することができます。
データフォームを使うには、事前にDBの中にテーブルを作成する必要があります。
今回は、2-1-2.データ>内容 で作成したテーブルを使います。
2-2-3.デザイン>色と形
各ラジオボタンを選択した状態で、以下プロパティーを設定します。
プロパティーエリアの「デザイン」>「色と形」から設定します
2つとも同じ設定をしています。
デフォルト設定からほぼ変更がないため、詳細説明は省略致します。
2-4.データベース リアルタイムビュー
データフォームによりラジオボタンのON/OFF は、操作に対してリアルタイムでDBへ反映されます。
この表は、ラジオボタンの操作によって更新されたDBの内容を、リアルタイムに表示しています。
3.パラメーター
パラメーターを変更することで、簡単にラジオボタンの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、画面操作時に呼び出す動作を設定することで、アプリユーザーがラジオボタンをタッチしたりクリックしたりした際に、アプリにさまざまな動作を実行させることができます。
オブジェクト
ラジオボタンの基本情報や動作設定は「オブジェクト」から設定します。ラジオボタンを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるラジオボタンを設置することも可能です。
基本情報
名称 | ラジオボタンの名称です。処理ロジックからラジオボタンに動作を持たせる場合 などは、この名称でラジオボタンを指定します。デフォルトでは 「ラジオ+連番数字」のようになります。 |
---|---|
サイズ | ラジオボタンの幅と高さを1ピクセル単位で細かく指定することができます。 |
位置 | ラジオボタンの位置を指定できます。画面の左上隅が起点になります。 |
余白 | ラジオボタンにテキストや画像を表示させない余白領域をつくることができま す。ラジオボタンの左右上下からの距離で指定します。 |
種類 | コントロールの種類が確認できます。変更はできません。 |
スタイル | 予め用意されたスタイルから選択することで、色や罫線等のパラメーターを 簡単に設定できます。 |
動作設定
実行処理 | ラジオボタンをタッチまたはクリックし、離した後に実行される処理を 設定します。 |
---|---|
長押処理 | ラジオボタンを長押し(1秒以上)した時に実行される処理を設定しま す。 |
押下瞬間時処理 | ラジオボタンを押した瞬間に実行される処理を設定します。 |
ラジオグループ | ラジオボタンのグループ名を設定します。同一のグループ名で設定した ラジオボタンでは、チェックをONにできるのは一つだけです。 |
ON値 | ラジオボタンのチェックがONの状態の値を設定します。 |
可否
使用可 | このチェックを外すことでラジオボタンを非活性化(操作無効)することができま す。一定の条件が満たされるまで押すことができないラジオボタンを設置する際 などに利用します。 |
---|---|
表示 | このチェックを外すと、ラジオボタンを非表示にすることができます。 一定の条件が満たされるまで表示されないラジオボタンを設置する際などに利用 します。 |
データ
ラジオボタンに表示させるテキストや「処理/コントロール/内容取得」が取得できる値に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出したテキストを表示させることもできます。
内容
値入力
ラジオボタンから取得できる値を、直接入力する場合に設定します。
文字 | ラジオボタンのデータの値を入力できます。 |
---|
フォーム
ラジオボタンから取得できる値を、データフォームを用いて入力する場合に設定します。
フィールド名 | フォームにセットしたテーブルから、データの取得先となる フィールド(列)を選択します。 |
---|---|
使用可 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの使用可設定の取得先となるフィールドを選択します。 |
表示 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの表示設定の取得先となるフィールドを選択します。 |
前景色 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの前景色設定の取得先となるフィールドを選択します。 |
背景色 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの背景色設定の取得先となるフィールドを選択します。 |
テーブル
ラジオボタンから取得できる値を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
テーブル名 | データの取得先となるテーブルを選択します。 |
---|---|
フィールド名 | データの取得先となるテーブル内のフィールド(列)を選択します。 |
使用可 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの使用可設定の取得先となるフィールドを選択します。 |
表示 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの表示設定の取得先となるフィールドを選択します。 |
前景色 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの前景色設定の取得先となるフィールドを選択します。 |
背景色 | サブフォームリストにラジオボタンを配置した場合に、 各行ごとの背景色設定の取得先となるフィールドを選択します。 |
表示ラベル
値入力
ラジオボタン内の文字表示を、直接入力する場合に設定します。
文字 | ラジオボタンに表示されるテキストを入力できます。 |
---|
テーブル
ラジオボタン内の文字表示を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
テーブル名 | 表示内容の取得先となるテーブルを選択します。 |
---|---|
フィールド名 | 表示内容の取得先となるテーブル内のフィールド(列)を選択 します。 |
フィルター/直接入力 | テーブルから表示内容を取得するときの抽出条件を直接入力する 場合に選択します。 |
フィルター/リスト選択 | テーブルから表示内容を取得するときの抽出条件をリストから 選択する場合に選択します。 |
デザイン
スタイルによらずラジオボタンの色や形、画像の設定を行うには「デザイン」を変更します。ラジオボタンのデザインを細かく設定できます。
色と形
フォント | フォントタイプを指定します。 |
---|---|
サイズ | フォントのサイズを指定します。 |
太字 | 文字を太字にする場合にチェックします。 |
影 | 文字に影をつける場合にチェックします。 |
下線 | 文字の下線を[無し][下線][二重下線]の何れかから選択します。 |
取り消し線 | 文字に取り消し線をつける場合にチェックします。 |
折り返し | 文字を折り返して表示する場合にチェックします。 |
文字列を縮小して 全体を表示 |
表示内容がコントロール内に収まらない場合に |
縦配置 | ラジオボタン内の文字位置を[上揃え][上下中央揃え][下揃え]の 何れかから選択します。 |
横配置 | ラジオボタン内の文字位置を[左揃え][左右中央揃え][右揃え]の 何れかから選択します。 |
通常フォント | 通常時のフォント色を指定します。 |
通常塗りつぶし | 通常時の背景色を指定します。 |
通常罫線/枠線 | 通常時の罫線/枠線の色を指定します。 |
チェック | チェックマークの色を指定します。 |
無効チェック | 操作無効時のチェックマークの色を指定します。 |
使用不可フォント | 操作無効時のフォント色を指定します。 |
使用不可塗りつぶし | 操作無効時の背景色を指定します。 |
使用不可罫線/枠線 | 操作無効時の罫線/枠線の色を指定します。 |
線の太さ | 線の太さを指定します。 |
丸み | ラジオボタンの角の丸みを指定します。 |
厚み | ラジオボタンの厚みを指定します。 |
変更イメージ
文字の縦配置/横配置(例)
文字:左上揃えの場合 文字:中央揃えの場合 文字:右下揃えの場合
|
|
|
画像
標準画像 | 通常時に表示される画像を設定できます。 |
---|---|
画像削除 | 標準画像の設定をクリアできます。 |
押下画像 |
ラジオボタンのチェックがONの状態の間に表示される画像を設定 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
無効標準画像 |
操作無効時の通常時に表示される画像を設定できます。 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
無効押下画像 |
操作無効時のラジオボタンのチェックがONの状態の間に 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
画像の表示位置(垂直) | ラジオボタン内の画像表示位置を[上揃え][上下中央揃え][下揃え] の何れかから選択します。 |
画像の表示位置(水平) | ラジオボタン内の画像表示位置を[左揃え][左右中央揃え][右揃え] の何れかから選択します。 |
単辺フィット | 画像がラジオボタンの内側にフィットするようにサイズを変更し ます。[設定なし][内接フィット][外接フィット][縦横フィット]の 何れかから選択します。 |
画像の表示位置(例)
|
|
|
画像の単辺フィット(例)
|
|
|
|
罫線
上種類 | 上罫線の種類を指定します。 |
---|---|
上色 | 上罫線の色を指定します。 |
下種類 | 下罫線の種類を指定します。 |
下色 | 下罫線の色を指定します。 |
左種類 | 左罫線の種類を指定します。 |
左色 | 左罫線の色を指定します。 |
右種類 | 右罫線の種類を指定します。 |
右色 | 右罫線の色を指定します。 |
\種類 | \罫線の種類を指定します。 |
\色 | \上罫線の色を指定します。 |
/種類 | /罫線の種類を指定します。 |
/色 | /上罫線の色を指定します。 |