ホームへ戻る

4.1 線を描く


 本章では図形の描画について勉強していきましょう。
まずは、線の描画を行います。

今までのお浚いですが、Androidでは、Viewと呼ばれる、画像やボタンなどのアプリの部品となる物をレイアウトで配置してアプリを構成していました。
今まで出てきた画像を扱うImageView、ボタンを扱うButtonなどは全てViewから派生したクラスですが、
自分でViewを継承して、オリジナルのViewを作ることが出来ます。

ここでは、図形の描画が出来るオリジナルなViewを作ってみましょう。
まずサンプルプログラムをご覧下さい。


public class AndroidsCastleActivity extends Activity {

        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(new MyView(this));
        }

        class MyView extends View {

                public MyView(Context context) {
                        super(context);
                }

                @Override
                protected void onDraw(Canvas canvas) {
                        Paint paint = new Paint();
                        paint.setColor(Color.argb(255, 255, 255, 255));
                        canvas.drawLine(0, 0, 200, 400, paint);
                }

        }
}


まず、Viewを継承して、オリジナルのViewであるMyViewを作ります。
そうすると、Viewに対してお絵かきしたりイベントによる処理をしたり色んなことが出来るようになります。

ActivityやViewには色々なオーバーライド出来るメソッドがあり、
処理をしたいイベント等に対応したメソッドをオーバーライドするだけでやりたいことが出来るようになっています。

今回は、Viewの描画が必要になった時に呼ばれるonDrawメソッドをオーバーライドして描画処理を行っています。
onDrawメソッドの中を見て下さい。
Paint paint = new Paint();
paint.setColor(Color.argb(255, 255, 255, 255));
canvas.drawLine(0, 0, 200, 300, paint);

Paintというクラスを生成しています。
描画する時は、どのように描画したいか(線の太さ、色、透過度、マスク・・等)を設定し、
描画メソッドにはこれをコンフィグとして渡して描画します。
Paintクラスの詳細についてはリファレンスで。

上の例では、setColorメソッドで、色を設定しています。
見て分かる通り、argbというメソッド名なので、argbの順で0~255の値をセットします。

canvasとは、名の通りViewのキャンバスです。
canvasには描画を行うメソッドや、切り取りを行うメソッド、マスクを行うメソッド等、様々なメソッドがあります。
Canvasクラスの詳細はリファレンスで。

上の例では、線を描画する drawLine を使用しています。
これも見ての通り、(0,0)から(200,300)にpaintの設定でラインを引いています。



サンプルのエミュレータは(320x240)の小さな解像度なので、見た目は違うかもしれません。
原点座標はViewを配置した面の左上となります。

View配置したっけ?

すみません、今まではっきり紹介していませんでしたね。

onCreateメソッド内にある
setContentView
というメソッドはActivityにViewをセットするメソッドです。
今までは
setContentView(R.layout.main);
と書いていました。
これは、layoutのmain.xmlに書いた通りのレイアウトでViewを配置するという意味です。

setContentViewには複数の書き方ができ、今回のようにViewをそのまま配置することもできます。
実際はきちんとlayoutにあるxmlで定義したレイアウトを利用することになるので、今回はサンプルということで流して下さい。

※ただ、プログラムで動的にレイアウトを変更したい時はソースコード内で定義することもあります。

→分からないことがあれば掲示板で質問して下さい


Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

- Remical Soft -