[Android] Custom Canvas をレイアウトに挿入する

Canvas と Paint を使って描画した図形とButtonなどを同じレイアウトに入れたい。そんな時はRelativeLayout等のレイアウトとCanvasを重ねると可能です
 
canvas insertion 01 - [Android] Custom Canvas をレイアウトに挿入する

Android Studio 3.3.2
Android 9.0

 



CustomとLayout

 
Canvasで描画していて困るのは、テキストやボタンなどと一緒にスクリーン上に表示したいというリクエストです。タッチリスナーや色々と手を尽くせば可能ですがコードが煩雑になりメンテしにくくなります。
 
そんな時は、Canvasで作成した描画領域、ViewをあたかもTextViewなどのようにレイアウトに張り付けることで解決できます。
 

 

ViewをLayoutに入れる

 
Buttonなどのように扱うために「パッケージ名+Viewのクラス名」で定義します。
例えば、com.example.testcanvasinsertion がパッケージ名で
MyViewがクラス名であれば。
 

 
これで、下のようにButtonやTextViewと同じように扱えます
 

 

サンプルコード

 
テキストとボタンのレイアウトに Canvas の描画領域を挿入して(重ねて)みたいと思います。
 
MyView.java

 
次にMainActivityを作ります。
 
MainActivity.java

 
activity_main.xmlのレイアウトファイルに
com.example.testcanvasinsertion.MyView
のタグで記述します
 
activity_main.xml

 
stringのリソースです
strings.xml

 
canvas insertion 01 - [Android] Custom Canvas をレイアウトに挿入する
 
Canvasエリアは描画領域がわかりやすいように半透明の矩形を使いました。
 
 

 

canvas a01 - [Android] Custom Canvas をレイアウトに挿入する canvas insertion 00 - [Android] Custom Canvas をレイアウトに挿入する canvas clear 01 - [Android] Custom Canvas をレイアウトに挿入する canvasimagetext 01 - [Android] Custom Canvas をレイアウトに挿入する canvas animation 01 - [Android] Custom Canvas をレイアウトに挿入する

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

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

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

以下の3つはAndroidが学習できるオンラインスクールです。


TECH ACADEMY
Androidアプリコース



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



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





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

尚、スクールがダメだと言う人がいますが、やる気があれば問題ありません。与えられるのを待っていてはいけないですね
欲しいものは取りに行くのです。


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

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




Google Pixel 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影

Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

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

フォローする