msty開発メモ

技術ネタを綴ります

【Android Studio】ほんとの0からカスタムビューを作成するよ

0カラってどこから?

A. プロジェクトの作成から

何言ってんだお前って言わないように。
タイトル詐欺って言わないように、ちゃんとやります。
勉強したはいいけど、実際に1から作るとしたらどうしていいかわからない人向けです。
知らない用語は調べてね。

今回使う環境はAndroid Studio2.1.1、APIレベルは19。2.1.0でもオーケー。ほかは知らない。

プロジェクトの作成

Android Studioを起動したら「Start new...」をクリックする。

f:id:mstybird:20160524000424p:plain

次にアプリケーション名やらを決める。
基本的にいじるのは以下の二箇所

f:id:mstybird:20160524000429p:plain
今回はこのまま"My Application"でやる。

次に使用するAPIを選択します。
スマホタブレットの場合は一番上を選択。
今回はAPI 19を使用。今後支障出るかは知らないが、今回の目的に直接絡まないので他のレベルでもオーケー。
f:id:mstybird:20160524000434p:plain
次にデフォルトのアクティビティを選択する。
今回は"Empty Activity"を選択

f:id:mstybird:20160524000458p:plain
最後にアクティビティの名前を決めて終了。
そのままでオーケー

f:id:mstybird:20160524000527p:plain

カスタムビューを実装する

今回のメイン課題です。頑張りましょう。

カスタムビューはゲームを作る際に便利というかほぼ使われるものじゃないかと思います。

クラスファイルの作成

カスタムビューのクラスファイルを作成します。
左側のフォルダツリーの"com.example..."となってるやつを右クリック。
このときグレーで(androidTest)や(test)と書かれていないものを選択するように!
そして[New] > [Java Class]と進んでください。
このようなポップアップダイアログが出てきますので、"MyView"と入力して確定してください。

f:id:mstybird:20160524000533p:plain
するとクラスファイルがひとつ追加されました。
ここにカスタムビューを実装します。
まずカスタムビューを作るには"Viewクラス"を継承します

public class MyView extends View {

するとエラーが出ます。あらら。
Viewクラスを継承したら以下のコンストラクタを実装して継承元のViewクラスのコンストラクタを呼べるようにしてあげる必要があります。

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

public MyView(Context _c, AttributeSet _attr){
	super(_c,_attr);
}

これでとりあえずエラーは消えます。

描画処理を実装する

とりあえず簡単な描画処理を実装します。
ぶっちゃけた話カスタムビューの話はここで終わってもいい気がするんだけど、それじゃあ内容が薄すぎるので。

一番簡単なonDrawメソッドをオーバーライドしたやり方です。

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
}

適当に画面を塗りつぶすので以下のように修正してください。

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	
	canvas.drawColor(Color.CYAN);
	
}

黒や白だと本当に塗りつぶしているのか実感できないと思うので、シアンに設定してます。

これでカスタムビューの基盤ができました。
実行してみましょう。何も起きません。だってこのビューは定義しただけでどこでも使っていませんから。

カスタムビューを組み込む

カスタムビューを組み込むには二つの方法がありますが、両方説明するまでに集中力が持たないのでひとつだけ紹介。

javaソースから組み込む。

こちらの方法はプログラムの途中でもアクティビティ、ビューの切り替えが容易なやり方です。
組み込み方は簡単です。
以下のように"setContentView"でカスタムビューのインスタンスを渡すだけです

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	//setContentView(R.layout.activity_main);
	setContentView(new MyView(this));
}

これで実行してみてください。
シアンに塗りつぶされた画面が表示されます。
f:id:mstybird:20160524000543p:plain
これでカスタムビューの基礎の基礎は終わりです。
あとはそれにタッチイベントを実装するなり新しいクラスを書くなり自由に応用してください。