大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

Androidで矩形範囲内に文字列を描画する

著者:北本 敦
公開日:2021/09/29
最終更新日:2022/02/28
カテゴリー:技術情報
タグ:

北本です。
投稿間隔が空いてしまいましたが、今回もAndroidについての記事です。
canvasで文字列を矩形領域内をはみ出さないように折り返しを入れて描画する方法を紹介します。

.NETの場合はGraphics.DrawStringメソッドでRectangle構造体を引数に渡して実現できますが、Androidの場合はStaticLayoutを使います。

以下のようなアプリを作成して実験してみます。

  • 画面にはImageViewとEditTextとButtonを配置。
  • Buttonを押下することで、EditTextに入力された文字列が矩形に囲まれた画像が生成され、ImageViewに表示される。文字列が入り切らない場合は末尾を省略するものとする。

 

下準備
Android StudioでEmptyActivity、Minimum SDK 23でプロジェクトを作成し、build.gradle(:app)を編集してビューバインディングを有効にします。

build.gradle(:app)

 

レイアウト
画面(MainActivity)は以下のようなXMLになります。

activity_main.xml

idの設定は以下の通りです。

ビューid
ImageViewimageView
EditTexteditText
ButtondrawButton

 

実装
コード(MainActivity.kt)は以下のようになります。

上記コードのうち、後半部のStaticLayoutを扱っている箇所を解説します。
StaticLayoutのコンストラクタはdeprecatedなので、StaticLayout.Builderを使用してインスタンスを取得します。ただし、Android 6.0未満はStaticLayout.Builderに対応していません。

StaticLayout.Builderのobtainメソッドでは、
第1引数に描画対象の文字列、
第2引数に文字列の始点インデックス(今回は文字列全体を描画対象とするので0)、
第3引数に文字列の終点インデックス(今回は文字列全体を描画対象とするので文字列の長さ)、
第4引数に描画に使うTextPaintオブジェクト
第5引数に描画範囲の幅(今回は矩形の幅)
を指定します。

setAlignmentメソッドでは、アラインメントが設定できます。今回は左揃え(アラビア語などの場合は右揃え)にするのでLayout.Alignment.ALIGN_NORMALを指定しています。

setLineSpacingメソッドでは、行間が設定できます。
第1引数のspacingAddは、指定した値だけ各行の高さが加算されます。
第2引数のspacingMultiは、各行の高さが指定した値で乗算されます。

setMaxLinesメソッドでは、最大の描画行数を指定できます。今回は、矩形の高さに収まるように1行の高さから行数を算出しています。1行の高さはtextPaint.getFontMetrics(null)で求められます。前述のspacingAdd、spacingMultiによる行間も考慮して計算していますが、setLineSpacingで行間指定をしない場合は、デフォルトでspacingAddは0.0、spacingMultiは1.0になるため、矩形の高さをtextPaint.getFontMetrics(null)で除算するだけで大丈夫です。

setEllipsizeメソッドでは、文字列が範囲に描画しきれない場合の省略法を設定できます。今回は末尾を省略するため、TextUtils.TruncateAt.ENDを指定しています。

このようにして各種設定をしたら、StaticLayout.BuilderのbuildメソッドでStaticLayoutのインスタンスを取得します。そして、canvas.translateでcanvasの原点を矩形の左上頂点に移動させ、StaticLayout.drawメソッドで描画を実行します。

以上、StaticLayout.Builderを利用した文字列の描画について紹介しましたが、残念ながらAndroid 6.0未満ではStaticLayout.Builderが使えません。MaxLinesで最大行数も指定できませんので、この辺りは自前で処理しなければなりません。このあたりについてはまた次回取り上げられればと思います。

    上に戻る