Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Android]Calligraphyで色々なフォントを表示する

More than 1 year has passed since last update.

はじめに

Calligraphyというライブラリを使って自分でダウンロードしたフォントを表示します。
本記事では次のようにフォントを表示するアプリを作成して動作を確認していきます。

1. プロジェクトにライブラリを追加する

次の手順でCalligraphyをセットアップします。

(1) build.gralde(app)に次の内容を追記する。

groovy|build.gradle(.app)
dependencies {
    implementation 'io.github.inflationx:calligraphy3:3.1.1'
    implementation 'io.github.inflationx:viewpump:2.0.3'
}

(2) 「Gradle file have changed slice last project sync」と表示されるので「Sync Now」をクリックする。

image.png

2. 利用するフォント(ttfファイル)をダウンロードする。

Google Fontにアクセスし、次の手順でフォントファイルをダウンロードします。

(1) 表示されているフォントを選択する。

image.png

(2) ⬇️を押して、ダウンロードする。

image.png

3. プロジェクトにフォント(ttfファイル)を追加する

次の手順でプロジェクトにフォント(ttfファイル)を追加します。

(1) 「File」→「New」→「Folder」→「Assets Folder」でAssetsフォルダを作成する。
(2) 「assets右クリック」→「New」→「Directory」でfontsフォルダを作成する。
(3) fontsフォルダにフォント(ttfファイル)を格納する。

image.png

4. TextViewにフォント(ttfファイル)を指定する

次の内容をTextViewにfontPath="fonts/Cinzel-Regular.ttf"の行を追加します。

xml|activity_main.xml
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        fontPath="fonts/Cinzel-Regular.ttf"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

5. アプリケーションでフォントをインストールする

次の内容をMainActivity.ktにフォントをインストールする処理を追加します。

kotlin|MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        ViewPump.init(
            ViewPump.builder()
                .addInterceptor(
                    CalligraphyInterceptor(
                        CalligraphyConfig.Builder().build()
                    )
                )
                .build()
        )

        setContentView(R.layout.activity_main)
    }

    override fun attachBaseContext(newBase: Context) {
        super.attachBaseContext(ViewPumpContextWrapper.wrap(newBase))
    }

次の内容を記述すればデフォルトフォントとして使えるようになるようです。
しかし今回はTextViewのみ反映させたいので特に設定しません。

kotlin|MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        ViewPump.init(
            ViewPump.builder()
                .addInterceptor(
                    CalligraphyInterceptor(
                        CalligraphyConfig.Builder()
                            .setDefaultFontPath("fonts/Cinzel-Regular.ttf") // Add Line
                            .setFontAttrId(R.attr.fontPath)                 // Add Line
                            .build()
                    )
                )
                .build()
        )

        setContentView(R.layout.activity_main)
    }

おわりに

Calligraphyで気をつけること、できること

  • フォントを利用するにはassets->fontsフォルダにフォント(ttfファイル)を格納する必要がある
  • フォントを利用するにはTextViewのfontPathに利用するフォント名称を記述する必要がある
  • フォントを利用するにはActivityにフォントを読み込む処理を記述する必要がある。
  • ダウンロードしたフォントをデフォルトフォントとして利用することもできる。

Calligraphyを使ったサンプル

次にCalligraphyを使ったサンプルを公開しています。
何か不明点などあれば次のサンプルをご覧ください。

image.png Kaleidot725 => android-mylab => CalligraphySample
kaleidot725
組み込みエンジニア ➔ Androidエンジニアになりました。なので最近は主に Android やってます。あとはサーバーサイド Kotlin もやっていこうと思っています。
https://medium.com/kaleidot725
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away