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

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

Android Studio 3.0.1
Android 8.1.0

 



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

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

 

drawBitmap & drawText

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

 
文字列の表示

 

 

サンプルコード

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

TestCanvasView.java

 
MainActivity.java

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

 
strings.xml

 


<h3サンプル動画

 

 
描画を繰り返す場合のメモリには注意が必要です
 
yumiko 300x219 - [Android] Canvas で画像とテキストを表示
[モデル:渡辺友美子]
 

 

Canvas のスクロール

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

 
TestCanvasView.java

 

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

 

canvas a01 - [Android] Canvas で画像とテキストを表示 canvas insertion 01 - [Android] Canvas で画像とテキストを表示 canvas clear 01 - [Android] Canvas で画像とテキストを表示 canvasimagetext 01 - [Android] Canvas で画像とテキストを表示 canvas animation 01 - [Android] Canvas で画像とテキストを表示

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

スマホの下取り

まだ1年も使っていないスマホを新機種に変えたくて下取りしようとお店に持ち込んだことがありますが、結局なんだかんだと思ったほどの金額になりませんでした(涙

このネットオフは専業のため高額買取が可能で、お店に行く時間が無い人にとっては送料無料の宅配便が自宅まで引取りに来てくれるのは助かります。

定額買取キャンペーン中であればキズがあっても付属品が無くても減額無しでお得です。」


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

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




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

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

シェアする

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

フォローする