【Android】Androidで袋文字(Outlined Text)の表示

題名通り、今回はAndroidでの袋文字の表示の仕方について書きたいと思います。

フォントファイルを使用することも可能ですが、日本語だとフォントファイルが大きくなったりで、容量の少ないアプリなどを作る際には割りに合わないというケースも多いと思います。

そこで、キャンバスを使用して、袋文字を作る方法を今回は紹介したいと思います。筆者も色々と研究してこれが多分一番シンプルでわかりやすいだろうと思った手法を紹介したいと思います。

ではまずコードから。

public void draw(Canvas canvas) {
  Paint paint = new Paint();
  
  int outlineColor = Color.WHITE;     //袋文字のふちの色
  int outlineWidth = 4;               //袋文字のふちの幅
  String text = "表示したいテキスト";
  int textColor = Color.BLACK;        //テキストの色
  int start = 0;                      //表示するテキストの開始位置
  int end = text.length();            //表示するテキストの終了位置+1
  int x = 0;                          //canvasに描画したいx座標
  int y = 0;                          //canvasに描画したいy座標
  
　//アンチエイリアスを設定（これをしないとギザギザになる）
　paint.setAntiAlias(true);
　
　//ふちの部分を描画
  paint.setColor(outlineColor);
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(outlineWidth);
  canvas.drawText(text, start, end, x, y, paint);
  
　//実際のテキストを描画
  paint.setColor(textColor);
  paint.setStyle(Paint.Style.FILL);
  canvas.drawText(text, start, end, x, y, paint);
 }

という感じでやると袋文字が完成します。
最初はtextPathというのを使ってやってみたんですが、途中でずれだしたりして、clipを使用する方法も考えましたが、4.0からはHardware Accelerationを外さないとclipは使えないのでこれが一番シンプルでいいんじゃないかと思います。

いくつか注意点としては：

AntiAliasは必ず設定してください。文字がギザギザになってしまいます。

paint.setAntiAlias(true);

他にはstartとendは必要ない場合は使わなくても大丈夫です。drawTextにはstartとendを必要としないバージョンも存在するので。
canvas.drawText(text, start, end, x, y, paint);
は
canvas.drawText(text, x, y, paint);
でも大丈夫です。

あと、実際に使用する際はPaintオブジェクトや各種設定用変数は他で指定するなりしたほうがいいです。あくまでサンプルコードとしてとらえていただければと思います。

筆者はこれをカスタマイズしたTextViewに組み込んでTextViewと同じ用に使えるようにしています。カスタマイズしたTextViewの書き方はまた後日紹介したいと思います。