[Android] Canvas で画像とテキストを表示

前のページで Canvas で描画した領域を消したり表示したりする場合にPorterDuff.Mode.CLEARを使いましたが、部分的に表示・非表示をしたい場合にはちょっと使いにくいかもしれません。
それぞれが重なっていると、重なった部分が黒抜きで消えたり色々面倒です。シンプルに全て再描画を使う方がいいかもしれません。
 
1x1.trans - [Android] Canvas で画像とテキストを表示


Android Studio
2021.2.1

 




Canvasに画像とテキストを描画

 
この例では、TextViewでのテキストとCanvas上のテキストが混在します。またCanvas領域に画像を表示していますが、これもImageViewで表示することもできます。このようにCanvasを使った表現の幅を種々広げることができるのが分かります。
 

 

Canvasに画像とテキストを描画

 
画像をdrawableに入れて、CanvasのためのViewを継承したクラスを作成します。
画像の描画

 
文字列の表示

 

 

サンプルコード

 
以前の方法 と同じように作っていきます。この例の package は 「com.example.testcanvasimagetext」で設定しました。
 
button によりCanvas領域での画像と文字を切り替えます。
画像 img.jpg など適宜drawableに入れておきます。

まずCanvasを作るためにTestCanvasViewクラスを新しく作成

TestCanvasView.java

 
MainActivity.java

 
レイアウトの中にカスタムで作成したCanvasを挿入する形にします。

activity_main.xml

 
strings.xml

 

サンプル動画

 

 
描画を繰り返す場合のメモリには注意が必要です

 

Canvas のスクロール

 
ScrollViewにCanvasをaddすることでスクロールできるようです。
 
MainActivity.java

 
TestCanvasView.java

 

 
これでCanvasもスクロールさせることができました。
 

関連ページ:

 

1x1.trans - [Android] Canvas で画像とテキストを表示 1x1.trans - [Android] Canvas で画像とテキストを表示 1x1.trans - [Android] Canvas で画像とテキストを表示 1x1.trans - [Android] Canvas で画像とテキストを表示 1x1.trans - [Android] Canvas で画像とテキストを表示

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







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

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

TECH ACADEMY
オンライン説明会


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


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


シェアする

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

フォローする