LoginSignup
7

More than 5 years have passed since last update.

TextViewをフォントを枠付き文字にする

Last updated at Posted at 2016-08-13

Android開発をしていて文字をこんな感じに枠で囲いたいなとなりました。
strokeText.png

でこれが意外と曲者で日本語では勿論のこと英語でもなかなかはっきりとした解決策が出てきません。
結論から言うと
http://stackoverflow.com/questions/3182393/android-textview-outline-text
で紹介されているMagicTextViewを使うのが一番良さそうですがちょっとこのStackOverFlowの説明だけでは不親切なのでMagicTextViewを用いて枠付き文字を作る方法をご紹介します。

参考までに今回作成したgithubのrepositoryも載せておきます。
https://github.com/kazuooooo/AndroidStrokeFontSample

MagicTextViewのGitから必要なファイルを取得

MagicTextViewのgitプロジェクトはこちらから必要なファイルを取得します。
ReadMeに

Realistically, just copy MagicTextView.java & attrs.xml into your project and use them as your own.

とある通りMagicTextView.javaattrs.xmlをコピーしてプロジェクト内に作成します。

app/java/package_name/MagicTextView.java
package package_path;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
... 中略
app/res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MagicTextView">
        <attr name="innerShadowColor" format="color" />
        <attr name="innerShadowRadius" format="dimension" />
        <attr name="innerShadowDx" format="dimension" />
        <attr name="innerShadowDy" format="dimension" />

        <attr name="outerShadowColor" format="color" />
        <attr name="outerShadowRadius" format="dimension" />
        <attr name="outerShadowDx" format="dimension" />
        <attr name="outerShadowDy" format="dimension" />

        <attr name="typeface" format="string" />

        <attr name="foreground" format="reference|color" />
        <attr name="background" format="reference|color" />

        <attr name="strokeWidth" format="dimension" />
        <attr name="strokeMiter" format="dimension" />
        <attr name="strokeColor" format="color" />
        <attr name="strokeJoinStyle">
            <enum name="miter" value="0" />
            <enum name="bevel" value="1" />
            <enum name="round" value="2" />
        </attr>
    </declare-styleable>
</resources>

デフォルトアプリのHelloWorldを枠付きにしてみる

上記で作成したカスタムビューMagicTextViewを用いてデフォルトのHelloWorldを枠付き文字にしてみたいと思います。

activity_main.xmlを編集

activity_main.xmlを以下のように編集します。

app/res/layout/main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.matsumotokazuya.strokefontsample.MainActivity"
    android:background="#000000">

    <com.example.matsumotokazuya.strokefontsample.MagicTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="@color/colorAccent"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        app:strokeColor="#fff"
        app:strokeWidth="1dp"
        android:textSize="50dp" />
</RelativeLayout>

TextViewタグをMagicTextViewタグに書き換えてstrokeColorとstrokeWidthを設定します。

app:strokeColor="#fff"
app:strokeWidth="1dp"

このときapp名前空間に定義されているstrokeColorとstrokeWidthを使用するために

xmlns:app="http://schemas.android.com/apk/res-auto"

を追記する必要があります

これでアプリを起動してみましょう。そうするとこんなエラーが出てしまいます。

Screenshot 2016-08-13 21.17.38.png

Attribute "background" already defined with incompatible format

backgroundというattributeがすでに定義されてしまっているというエラーになってしまいます。
要はMagicTextViewで定義しようとしているbackgroundが24.0.0で定義されているattributeと被ってしまっているのです。
本来ならばプルリクエストを投げるべきですが、MagicTextView自体2014年以降更新がされておらずプルリクも無視されている状況です。
そこで今回はソースを修正します(ライブラリーとしてインポートしているのでなく、自分で作成したファイルなので良しとしましょう。)

まず、重複してしまっているattrs.xmlの

<attr name="background" format="reference|color" />

をなんでもいいのですが

<attr name="mBackground" format="reference|color" />

に書き換えます。(mはmagicのm)

続いてMagicTextView.javaの88行目〜95行目のbackgroundを使用している箇所をmBackgroundに書き換えます。

MagicTextView.java
if (a.hasValue(R.styleable.MagicTextView_mBackground)) {
    Drawable background = a.getDrawable(R.styleable.MagicTextView_mBackground);
    if (background != null) {
        this.setBackgroundDrawable(background);
    } else {
        this.setBackgroundColor(a.getColor(R.styleable.MagicTextView_mBackground, 0xff000000));
    }
}

これで準備完了です

アプリを起動するとこんな感じになるはずです
device-2016-08-13-215453.png

できましたね!!

メンテされていない大規模なライブラリを使うのは気が引けますが、今回のように小規模なものであればそれを元にして自分で修正して使うのも悪くはないと思いました。

androidの開発はまだ1ヶ月ほどしかやってませんので間違った記載などありましたらご指導お願い致します。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7