Androidアプリで画面の一部を描画領域にする方法を紹介します。
アプリケーション作成情報
- ProjectName : CanvasDrawDemo
- ApplicationName : CanvasDrawDemo
- PackageName : iPentec.CanvasDrawDemo
- Activity : CanvasDrawDemoActivity
- Androidのバージョンは2.3.3にしました
UI
以下のUIを作成します。
![](https://resources.ipentec.com/document/image/android-view-custom-view-draw-first-step-01)
Buttonを1つ、画面では見えませんがViewを1つ配置します。
Viewの部分をViewを派生したクラスに置き換えて描画領域にします。
コード
CanvasDrawDemoActivity.java
生成されたコードをそのまま利用します。
package iPentec.CanvasDrawDemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class CanvasDrawDemoActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
MyView1.java
新しいクラスMyView1を追加します。追加方法は以下の通りです。
[Package Explorer]でプロジェクトのノード(今回はCanvasDrawDemo)を選択し、右クリックしポップアップメニューを表示します。メニューの[New]メニューの[Class]を選択します。
[New Java Class]ダイアログが表示されます。Nameの欄に"MyView1"を入力します。入力後[Finish]ボタンを押してクラスを作成します。
作成されたMyView1.javaファイルに以下のコードを実装します。MyView1クラスを"extends View"を追記して、Viewクラスからの派生にする点に注意してください。
package iPentec.CanvasDrawDemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.content.*;
import android.view.*;
import android.util.*;
public class MyView1 extends View{
public MyView1(Context context, AttributeSet attrs){
super(context,attrs);
setFocusable(true);
}
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawLine(100, 100, 200, 300, paint);
}
}
解説
public MyView1(Context context, AttributeSet attrs){
super(context,attrs);
setFocusable(true);
}
コンストラクタです。superを用いて基底クラスのコンストラクタを呼び出します。
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true); //アンチエイリアスを有効に
paint.setColor(Color.RED); //線の色を赤に設定
canvas.drawLine(100, 100, 200, 300, paint); //線の描画
}
描画イベントです。drawColor()メソッドで描画領域を白で塗りつぶします。塗りつぶし後drawLine()メソッドを呼び出し画面に赤い線を描画します。線の色やスタイルはPaintクラスのインスタンスで指定します。
main.xml
main.xmlのコードを編集します。具体的には
<View
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
を
<iPentec.CanvasDrawDemo.MyView1
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
に変更します。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="button1_click"
android:text="Button" />
<iPentec.CanvasDrawDemo.MyView1
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
実行結果
アプリケーションを実行すると下図の画面が表示されます。画面の一部が描画領域になっています。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-04
作成日: 2011-10-27