- 画面構成法
- この講義では画面を構成する上で必要となる基本的な文の解説をします。では早速前回講義で使用したソースを例に、解説をして行く事にします。
- Mainコード
- 以下に今回使用するmainコードの挙げます。
/**SampleMain(一部抜粋)*/
public void paint(Graphics g) {
g.lock();
g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
//背景の描画
g.fillRect(0, 0, 240, 240);
g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
//文章の描画
g.drawString("非常に単純なiアプリです", 20, 25);
g.drawString("ソースを見てどこで何を行っているか", 20, 50);
g.drawString("各箇所確認してみて下さい", 20, 70);
g.unlock(true);
}
public void run() {
for (;;) {
//再描画
repaint();
try {
//約30分の1秒毎に1コマ描画
Thread.sleep(30);
} catch (InterruptedException e) {
}
}
}
public void paint(Graphics g) {
g.lock();
g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
//背景の描画
g.fillRect(0, 0, 240, 240);
g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
//文章の描画
g.drawString("非常に単純なiアプリです", 20, 25);
g.drawString("ソースを見てどこで何を行っているか", 20, 50);
g.drawString("各箇所確認してみて下さい", 20, 70);
g.unlock(true);
}
public void run() {
for (;;) {
//再描画
repaint();
try {
//約30分の1秒毎に1コマ描画
Thread.sleep(30);
} catch (InterruptedException e) {
}
}
}
- 抜粋した部分は、実際にiαppliの動きを担当しています。
- それでは他の部分はというと、勿論1つずつ意味があるのですが、言うなれば決まり文句の様なものです。
- runメソッド
- まずrunメソッドから見て行く事にしましょう。ここはスレッドを動かしており、iαppliの肝を担うメソッドです。
- 1行目にいきなりfor文で無限ループをさせています。これにより画面は絶えず再描画され続け、動的な動きが表現出来るのです。
- 再描画はrepaint();で行います。これはpaintメソッドを呼ぶコマンドです。
- 次にスレッドを一定時間停止させる為にThread.sleep(30);を用いています。30msの間スレッドはその処理を停止させますから、結局スレッドの実行間隔は30ms毎になります。
- paintメソッド
- paintメソッドを見てみましょう。
- 最初にg.lock();とありますが、これはダブルバッファリングさせる為のものです。
- Graphicsオブジェクトにロックを掛ける事によって、そのロックを解かれるまで一切描画されなくなります。
- g.unlock(true);はそのロックを解除している部分です。この2つの間に、描画内容を記述します。
- 今回の例では背景を描き、その上に文字を描くという手順を踏んでいます。
- では背景を描いている部分に注目してみましょう。
g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
//背景の描画
g.fillRect(0, 0, 240, 240);
//背景の描画
g.fillRect(0, 0, 240, 240);
- Grapnics.setColor()は色を指定するメソッドです。以下に描かれるものは、ここで指定した色で描かれます。
- 今回は(R, G, B)値を(0x00, 0x00, 0x00)としていますからこれ以降のオブジェクトは黒で描かれる事になります。
- 背景はGraphics.fillRect()で描画しています。画面のサイズは通常240x240ですから、その範囲を覆う四角形を描きます。
- 文字を描いている部分を見てみましょう。
g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
//文章の描画
g.drawString("非常に単純なiアプリです", 20, 25);
g.drawString("ソースを見てどこで何を行っているか", 20, 50);
g.drawString("各箇所確認してみて下さい", 20, 70);
//文章の描画
g.drawString("非常に単純なiアプリです", 20, 25);
g.drawString("ソースを見てどこで何を行っているか", 20, 50);
g.drawString("各箇所確認してみて下さい", 20, 70);
- 今度は文字を描く為に、色を変えてやる必要があります。指定法は先程と同じくGraphics.setColor()を使用します。
- この例では(0xff, 0xff, 0xff)としていますから、文字は白で描かれます。
- 文字を描くにはGraphics.drawString()メソッドを使います。このメソッドには行という概念が無い為、今回の様に複数行に渡る場合はそれぞれにメソッドを用意しましょう。
- 例では黒い背景の上に白い文字を置いています。この様に、画面は描きたい内容を次から次へと重ねて行く事で表現します。
- 主要メソッド
- iαppli用Javaには様々な文やメソッドが存在しますが、まずは最低限の機能だけ、確実に把握しておけばそれなりのものは作れます。
Graphics.drawLine()
Graphics.drawRect()
Graphics.fillRect()
Graphics.drawString()
Graphics.drawRect()
Graphics.fillRect()
Graphics.drawString()
- 具体的にはこの4つです。
- ユーザ側の入力に合わせたり、変数(フィールド)を参照したり、動的な画面を構成する方法は色々と存在しますが、それらは総てこの4つだけで表現する事が可能です。
- 勿論慣れて来たら他の機能を使えばもっと便利になり得ますが、最初から総てをマスターしようとするのは非常に骨の折れる作業です。ですから、まずはこれら4つを確実に使いこなせる様になると良いでしょう。
- これらは非常に基本的なものなので、それ程役に立たないと思われるかも知れません。ですがアイデア次第では以下の様なラインアートを描く事も可能です。
- 描画部は以下のプログラムです。
g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
for (int i = 1; i < 10; i++) {
g.drawLine(0, i * 10, 100 - i * 10, 0);
g.drawLine(239, i * 10, 140 + i * 10, 0);
g.drawLine(0, 140 + i * 10, i * 10, 239);
g.drawLine(239, 239 - i * 10, 140 + i * 10, 239);
}
for (int i = 1; i < 10; i++) {
g.drawLine(0, i * 10, 100 - i * 10, 0);
g.drawLine(239, i * 10, 140 + i * 10, 0);
g.drawLine(0, 140 + i * 10, i * 10, 239);
g.drawLine(239, 239 - i * 10, 140 + i * 10, 239);
}
- それでは、以下の様な描画をするにはどの様なプログラムを組めば良いでしょうか。
- いずれもfor文とGraphics.drawLine()だけで表現出来る筈です。
- 碁盤模様の方は非常に簡単でしょう。
- 亀甲模様は少し捉え方を変える必要があるので難しいかも知れません。ヒントは下のイメージです。
- 各自で色々と試してみて、自由に画面を構成出来る様になりましょう。