Android開発の説明用資料です。
せっかく作ったのでアップしました。
お絵かきアプリの機能
- 指でなぞったところが線になる
- 書いた絵を消すボタンがある
以上！
プロジェクト作成
Android Studioで新たにプロジェクトを作成します。
アプリ名は適当に設定します。
初期生成されるActivityをBasic Activityに設定する以外は全部そのままで大丈夫です。
絵を描くためのクラスを作る
オリジナルのお絵かき用クラスを作成します。
まずはクラスを作る
画面左側のプロジェクトウィンドウからMainActivity.javaを右クリックしてNew→Java Classを選択します。
名前はわかりやすいものにして、Superclassにandroid.view.Viewを指定します。
コンストラクタを作ってエラーをなくす
コンストラクタがないためにエラーが出ているはずです。
コンストラクタを追加します。
public class PaintView extends View {
public PaintView(Context context) {
this(context, null);
}
public PaintView(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
描画用の変数の宣言と初期化
画面に線を書くためのPaintとPathを用意します。
さきほどのコンストラクタに初期化プログラムも追記します。
public class PaintView extends View {
private Paint paint;
private Path path;
public PaintView(Context context) {
this(context, null);
}
public PaintView(Context context, AttributeSet attrs) {
super(context, attrs);
path = new Path();
paint = new Paint();
paint.setColor(0xFF000000);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(10);
}
}
画面を描画するメソッドを用意する
画面を描画するときに先ほどのpathとpaintを使用するようにプログラムを追記します。
public class PaintView extends View {
/* 中略 */
@Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(path, paint);
}
}
タッチしたら線を書くようにする
画面のタッチ情報を取得してPathを追加していきます。
コンストラクタとは別にonTouchEventメソッドを上書きします。
public class PaintView extends View {
/* 中略 */
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
path.lineTo(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
path.lineTo(x, y);
invalidate();
break;
}
return true;
}
}
画面のレイアウトに作成したクラスを追加する
content_main.xmlを開いてPaletteから<view>を追加します。
この<view>を画面の適当なとこにドラッグアンドドロップします。
その時にどのクラスを使用するか聞かれますがそこは先ほど作ったクラスを選択しましょう。
画面めいっぱいにキャンバスを広げる
先ほどのViewの幅と高さを画面いっぱいになるように設定します。
追加したViewを選択し画面右側のPropertiesを編集します。
幅と高さは親要素に合わせるmatch_parentにします。
このときに最初からあるHello worldと書かれたTextViewは削除してしまいます。
一旦完成
ここまででとりあえず線はかけるようになっています。
実際に実行して確認してみましょう。
画面に描いたものを消す
このままでは書くだけしかできないのでメールのボタンを押したときにすべて消すようにします。
削除するメソッドを作成する
先ほど作成したオリジナルのクラスに線を削除するようなメソッドを追加します。
public class PaintView extends View {
/* 中略 */
public void clear(){
path.reset();
invalidate();
}
}
削除するメソッドを呼び出す
MainActivity.javaを開いてonCreateの中を書き変えます。
Snackbar...となっている部分で画面上のオリジナルクラスを呼び出してリセットを掛けます。
ボタンのデザインを変える
メールのアイコンには違和感があるのでゴミ箱に変更します。
画面のレイアウトファイルを開く
app/res/layout/activity_main.xmlを開きます。
アイコンのデータを変更する
アイコンをクリックし画面右側のPropertiesからアイコンイメージを変更します。
ic_menu_deleteを探し、選択し、OKボタンを押下します。
完成
これで削除機能を備えたお絵かきアプリが完成しました。
activity_main.xmlのアイコンをコピペして動作を増やしていくことでペンの色が選択できたり画像ファイルとして保存したりすることも可能です。