第3話 SurfaceView の Hello World

 第3話にして、やっと Hello World です。ソースは前回のものを引き続き使用しますが、1つのソースファイルに2つのクラスを記述しているので、とりあえずクラスごとにファイルを分けておきます。

part02.java
package home.part02; import android.app.Activity; import android.os.Bundle; public class part02 extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView( new MyView( this ) ); } }

MyView.java
package home.part02; class MyView extends android.view.SurfaceView implements android.view.SurfaceHolder.Callback { public MyView( android.content.Context context ) { super( context ); getHolder().addCallback( this ); } /** * これが呼び出されるのは、Surface のいくつかの構造(フォーマットやサイズ)が変化した直後です。 */ @Override public void surfaceChanged( android.view.SurfaceHolder holder, int format, int width, int height ) { } /** * これが呼び出されるのは、Surface が初回作成された直後です。 */ @Override public void surfaceCreated( android.view.SurfaceHolder holder ) { android.graphics.Canvas ca = holder.lockCanvas(); // Surface の編集を開始 ca.drawColor( android.graphics.Color.BLUE ); // キャンバスの背景色を「青」に設定 holder.unlockCanvasAndPost( ca ); // Surface の編集を終了 } /** * これが呼び出されるのは、Surface が破棄される直前です。 */ @Override public void surfaceDestroyed( android.view.SurfaceHolder holder ) { } }

 今回のパートで変更を加えるのは MyView.java の surfaceCreated メソッド内のみになります。


 キャンバスに文字列を描画するには、android.graphics.Canvas.drawText メソッドを使用します。引数は4つで、文字列、X座標、Y座標、android.graphics.Paint インスタンスを指定します。Paint インスタンスの内容によって描画スタイルを指定することになりますが、とりあえずは何も指定せずに描画してみます。

MyView.java
/** * これが呼び出されるのは、Surface が初回作成された直後です。 */ @Override public void surfaceCreated( android.view.SurfaceHolder holder ) { android.graphics.Canvas ca = holder.lockCanvas(); // Surface の編集を開始 ca.drawColor( android.graphics.Color.BLUE ); // キャンバスの背景色を「青」に設定 ca.drawText( "やっはろーわーるど", 10, 50, new android.graphics.Paint() ); // 文字列を描画 holder.unlockCanvasAndPost( ca ); // Surface の編集を終了 }

part03実行結果00

 Y座標の指定位置が、文字列の左上座標ではなく、フォントのベースラインになることに注意して下さい。英文を書くときの基準線みたいなヤツですね。X座標は素直に左上座標です。


 これだけでも、いわゆる Hello World としては完成だと言えなくもないですが、折角なので、描画スタイルを色々変更してみたいと思います。まずは文字の大きさを変更してみましょう。

MyView.java
/** * これが呼び出されるのは、Surface が初回作成された直後です。 */ @Override public void surfaceCreated( android.view.SurfaceHolder holder ) { android.graphics.Canvas ca = holder.lockCanvas(); // Surface の編集を開始 ca.drawColor( android.graphics.Color.BLUE ); // キャンバスの背景色を「青」に設定 android.graphics.Paint pa = new android.graphics.Paint(); // 文字列描画用 pa.setTextSize( 32 ); // 文字列のサイズを指定 ca.drawText( "やっはろーわーるど", 10, 50, pa ); // 文字列を描画 holder.unlockCanvasAndPost( ca ); // Surface の編集を終了する。 }

part03実行結果01


 次に、文字列の色を変更してみます。色自体の指示方法は複数用意されていますが、ここでは一番基本的な4つの要素を個別に設定する方法で指定します。4つの要素とは、透明度、赤、緑、青です。Android アプリ開発で気をつけるべき点は、色指定の場面では基本的に透明度が入ることを前提としているということです。透明度は 0 が完全透明、255 が完全非透明です。

MyView.java
/** * これが呼び出されるのは、Surface が初回作成された直後です。 */ @Override public void surfaceCreated( android.view.SurfaceHolder holder ) { android.graphics.Canvas ca = holder.lockCanvas(); // Surface の編集を開始 ca.drawColor( android.graphics.Color.BLUE ); // キャンバスの背景色を「青」に設定 android.graphics.Paint pa = new android.graphics.Paint(); // 文字列描画用 pa.setTextSize( 32 ); // 文字列のサイズを指定 pa.setARGB( 0xff, 0x00, 0xff, 0x00 ); // 文字列の色を設定 ca.drawText( "やっはろーわーるど", 10, 50, pa ); // 文字列を描画 holder.unlockCanvasAndPost( ca ); // Surface の編集を終了する。 }

part03実行結果02

 以上で文字列描画の基本解説は完了です。いかがだったでしょうか? 前回のパートよりは簡単だったのではないかと思います。このくらいの難易度の話が続けば、挫折してしまう方も少ないと思うのですが、残念ながらそうもいかないのが Android ですw もちろん、なるべる分かり易い解説が続くよう心掛けたいとは思っています。


part02.java
package home.part02; import android.app.Activity; import android.os.Bundle; public class part02 extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView( new MyView( this ) ); } }

MyView.java
package home.part02; class MyView extends android.view.SurfaceView implements android.view.SurfaceHolder.Callback { public MyView( android.content.Context context ) { super( context ); getHolder().addCallback( this ); } /** * これが呼び出されるのは、Surface のいくつかの構造(フォーマットやサイズ)が変化した直後です。 */ @Override public void surfaceChanged( android.view.SurfaceHolder holder, int format, int width, int height ) { } /** * これが呼び出されるのは、Surface が初回作成された直後です。 */ @Override public void surfaceCreated( android.view.SurfaceHolder holder ) { android.graphics.Canvas ca = holder.lockCanvas(); // Surface の編集を開始 ca.drawColor( android.graphics.Color.BLUE ); // キャンバスの背景色を「青」に設定 android.graphics.Paint pa = new android.graphics.Paint(); // 文字列描画用 pa.setTextSize( 32 ); // 文字列のサイズを指定 pa.setARGB( 0xff, 0x00, 0xff, 0x00 ); // 文字列の色を設定 ca.drawText( "やっはろーわーるど", 10, 50, pa ); // 文字列を描画 holder.unlockCanvasAndPost( ca ); // Surface の編集を終了 } /** * これが呼び出されるのは、Surface が破棄される直前です。 */ @Override public void surfaceDestroyed( android.view.SurfaceHolder holder ) { } }

【次】第4話 矩形描画


[戻る]
管理人:T.Umezawa
最終更新日時:2014/11/16