CameraとCanvsで写真をとって加工しよう! (2/5)
作成:2011-05-23 08:00
更新:2011-05-23 08:00
更新:2011-05-23 08:00
■アプリのGUIを作成する
では、アプリを作っていきましょう。新しいプロジェクトを用意してもいいですし、テスト用のプロジェクトに配置した部品をすべて削除し、新たにつくり直してもかまいません。以下に、作成する部品の内容を整理していきます。
1. Screen
まずは、画面全体を示すScreen(Screen1という名前です)の設定を行いましょう。今回は、画像の縦横比を固定したいので、表示が縦横切り替わらないようにしたいと思います。そこで、Propertiesから「ScreenOrientation」の属性を「Portrait」に設定してください。これで、画面は縦方向に固定されます。
2. Button(2つ)
続いて、2つのButtonを配置します。これは、そのまま配置してもいいですが、「Screen Arrangement」というところにある「HorizontalArrangement」という部品を配置し、その中に入れてやると、横に2つ並べることができます。このScreen Arrangementというのは、部品を縦横に並べて配置するための入れ物の部品がまとめられた物です。ここにあるものを使うことで、部品を整列できるのですね。
ただし、ただ入れるだけだと、ボタンの横幅は自動的に調整されて短くなります。HorizontalArrangementと2つのButtonすべての「width」属性を「Fill parent...」に設定しましょう。これで横いっぱいに2つのボタンが並んで表示されるようになります。
ボタンに表示するテキストは、Button1が「Capture」、Button2が「Save」としておきます。このように、Button1はカメラの撮影、Button2はイメージの保存を行うものです。
3. Canvas
ボタンの下には、「Canvas」を配置します(名前はCanvas1)。これは配置後、Width/Heightをそれぞれ「Fill parent...」にしておきます。といっても、縦幅は自動調整されないので、後で幅を変更するための処理を用意して調整します。
この他、Propertiesから描画関係の属性を設定しておきましょう。ここでは、「FontSize」を
40」にしておきました。paintColorで塗りつぶす色を設定しておいてもいいのですが、今回はテキストと描画で色を変えようと思うので、これはそのままでかまいません。
4. Camera
カメラは、非表示の部品ですので、ただ配置するだけです(名前はCamera1)。
5. Notifier
これも配置するだけです。名前はNotifier1のままです。
――さあ、これで基本的なデザインはできました。後は、「Open the Blocks Editor」ボタンをクリックしてブロックエディタを起動し、実行する処理を作成していきましょう。
1. Screen
まずは、画面全体を示すScreen(Screen1という名前です)の設定を行いましょう。今回は、画像の縦横比を固定したいので、表示が縦横切り替わらないようにしたいと思います。そこで、Propertiesから「ScreenOrientation」の属性を「Portrait」に設定してください。これで、画面は縦方向に固定されます。
2. Button(2つ)
続いて、2つのButtonを配置します。これは、そのまま配置してもいいですが、「Screen Arrangement」というところにある「HorizontalArrangement」という部品を配置し、その中に入れてやると、横に2つ並べることができます。このScreen Arrangementというのは、部品を縦横に並べて配置するための入れ物の部品がまとめられた物です。ここにあるものを使うことで、部品を整列できるのですね。
ただし、ただ入れるだけだと、ボタンの横幅は自動的に調整されて短くなります。HorizontalArrangementと2つのButtonすべての「width」属性を「Fill parent...」に設定しましょう。これで横いっぱいに2つのボタンが並んで表示されるようになります。
ボタンに表示するテキストは、Button1が「Capture」、Button2が「Save」としておきます。このように、Button1はカメラの撮影、Button2はイメージの保存を行うものです。
3. Canvas
ボタンの下には、「Canvas」を配置します(名前はCanvas1)。これは配置後、Width/Heightをそれぞれ「Fill parent...」にしておきます。といっても、縦幅は自動調整されないので、後で幅を変更するための処理を用意して調整します。
この他、Propertiesから描画関係の属性を設定しておきましょう。ここでは、「FontSize」を
40」にしておきました。paintColorで塗りつぶす色を設定しておいてもいいのですが、今回はテキストと描画で色を変えようと思うので、これはそのままでかまいません。
4. Camera
カメラは、非表示の部品ですので、ただ配置するだけです(名前はCamera1)。
5. Notifier
これも配置するだけです。名前はNotifier1のままです。
――さあ、これで基本的なデザインはできました。後は、「Open the Blocks Editor」ボタンをクリックしてブロックエディタを起動し、実行する処理を作成していきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「App InventorによるAndroid開発入門」に戻る