大量の文字を表示したいなら...?WebViewを使ってHTMLファイルを読み込もう

投稿日:2017年11月10日 更新日:

Androidアプリを作っていて、大量のテキストを表示したい時ってありますよね。そんな時にはWebViewを使ってHTMLファイルを読み込むと良い...場合もあります。ライブラリのライセンス表記など、大量のテキストを表示したい時には役立ちます。多用するとアプリっぽくなくなるので使いすぎ厳禁です。

本記事では、WebViewにHTMLファイルを読み込んで大量のテキストを表示する方法を解説していきます。

Assetsフォルダーの作成

まずはHTMLファイルを格納するためにAssetsフォルダーを作成します。Android Studioのプロジェクト画面を右クリックして、「New > Folder > Assets Folder」を選択します。この操作でAndroid Studioのプロジェクト内にAssetsフォルダーが作成されます。

WebView

HTMLファイルの追加

次に、HTMLファイルをプロジェクトに追加します。まずは適当なテキストエディタでHTMLファイルを作成しましょう。本記事では、HTMLの書き方についての説明は省略します。

今回は、こんな感じのHTMLファイルを作ってみました。このHTMLファイルを先ほど作ったAssetsフォルダーの中にコピー&ペーストします。Android Studio上でフォルダにペーストすればOKです。

<html>
<head></head>
<body>
<h1>吾輩は猫である</h1>
<p>吾輩は猫である。名前はまだ無い。</p>
(中略)
</html>

HTMLファイルの表示

レイアウトファイルにHTMLファイルを表示するためのWebViewを追加します。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

追加したWebViewをコード側で取得した後、loadUrlメソッドを使ってHTMLファイルを読み込みます。ポイントは読み込むURLをfile:///android_asset/+ファイル名とすることです。file:の後の/は3個必要なので注意してください。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.web_view);
        webView.loadUrl("file:///android_asset/cat.html");
    }
}

アプリを起動してみましょう。以下のような感じで、HTMLファイルが読み込まれれば成功です!大量のテキストを楽に表示させることができました。

WebView

まとめ

本記事では、Androidに大量のテキストを表示させるため、TextViewではなくWebViewを使ってHTMLファイルを読み込みました。ライブラリのライセンス表記など、大量のテキストを読み込ませたい時には使える方法です。多用は厳禁ですが、必要に応じて使ってみてくださいね。

茨城県つくば市在住のAndroidアプリエンジニアです。

-Android

Copyright© Androidアプリ開発@つくば , 2017 AllRights Reserved Powered by AFFINGER4.