[Android & Kotlin] 円や矩形を描画するCanvas

TextViewやImageViewなどはConstraintLayoutなどのレイアウトを使ってViewを表示させますが、もっと自由に直線や図形を描画するためには Canvas を使います。
 
canvas a01 - [Android & Kotlin] 円や矩形を描画するCanvas

Android Studio 3.1.4
API 28
Kotlin 1.2.61



Canvas

 
GoogleはAndroidフレームワークとしてグラフィックスにおいては2つの方法を提供しています。

  • Drawables
    • 画像などをViewを使って表示。静的で表示させるだけの用途であり、アニメーションでも決まりきった動きのものに適している
      パフォーマンスを必要とするようなゲームにはあまり向かない
    • 代表的な例は、画像をresourceのdrawableにおいてImageViewを使って表示するような例。
  • Canvas
    • onDrawメソッドを使ってCanvas上で描画。ゲームなどの動きがありグラフィックスのredrawが頻繁に起きる場合や、カスタマイズされたアニメーションに向いている

Ref: Canvas and Drawables
 
ゲームのようなものでなければDrawablesを使えばそこそこできますが、どうしてもカスタム化して動きを入れたいというような場合ではCavasを使います。
 

 

Canvasの基本的な形

 
Canvasでprimitiveな矩形を描画する基本的な例です。
Activity から View を継承したクラスを作りsetContentViewに入れてonDraw() で描画します。setContentView(MyView)
レイアウトファイルは使いません。
 
MainActivity.kt

 
canvas a02b - [Android & Kotlin] 円や矩形を描画するCanvas
 
矩形が描画されました。
 
矩形の描画では
Paint クラスの
color で線の色を指定
strokeWidth にて線の太さ
 
Canvas クラスの
drawRect を使って4つの頂点を引数に入れます。

 

サンプルコード

 
矩形以外にも円、楕円のような基本的なprimitiveな図形を描画するメソッドもあります。またラインを組み合わせて三角形を作ることもできます。
 
MainActivity.kt

 
ここで指定している(x,y)はピクセルになりますので端末依存です。スクリーン縦横のサイズを取得して計算する必要があります。
 
canvas a01 - [Android & Kotlin] 円や矩形を描画するCanvas
 
JavaでのCanvas:

canvas insertion 00 79x100 - [Android & Kotlin] 円や矩形を描画するCanvas
Canvas と Paint を使って描画した図形とButtonなどを同じレイアウトに入れたい。そんな時はRelativeLayout等のレ...

 
 
References:
Canvas | Android Developers
Canvas and Drawables | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

 

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


無料で転職まで
これはアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールでエンジニアになって職を得たいのであれば手っ取り早いかもしれません

受講料無料:社会人転職コース




シェアする

  • このエントリーをはてなブックマークに追加

フォローする