Genta Hirauchi

公開日：2020/02/09
更新日：2020/08/03

【Kotlin基礎】TextViewでテキストを表示させる方法を解説

  • Kotlinでテキストを表示させる方法が知りたい。
  • コードで動的にTextViewを実装する方法が知りたい。
  • 文字の大きさや色などを変更する方法が知りたい。

本記事では、Kotlinにて、TextViewでテキストを表示させる方法を解説致します。

xmlでの基本的な実装方法に加え、コードで動的にTextViewを実装する方法や、
テキストの大きさや色、表示位置などを変更する方法なども解説致します。

目次

TextViewでテキストを表示させる方法

Kotlinでテキストを表示するには、TextViewというViewを使用します。

TextViewを実装するには、xmlファイルに実装する方法と、コードで動的に実装する方法があります。

【公式ドキュメント】 ： TextView | Android Developers

xmlでTextViewを実装する

まずは、xmlファイルに実装する方法を紹介致します。以下は、”Hello world”というテキストを表示するサンプルコードです。（タブで、ファイルを切り替えることができます。）

  • MainActivity.kt
  • activity_main.xml
class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <TextView
       android:text="Hello world"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

</LinearLayout>

android:text属性に、表示させたいテキストを指定します。

また、今回のサンプルコードでは、”Hello world”という文字列を直接指定しておりますが、本来はstrings.xmlに文字列を定義しておき、そちらを参照する実装の方が推奨されております。

Point
  • android:text属性に、表示させたいテキストを指定する

コードで動的にTextViewを実装する

続いて、コードで動的にTextViewを実装する方法です。

  • MainActivity.kt
  • activity_main.xml
class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       findViewById<LinearLayout>(R.id.container).also { linearLayout ->
           val textView = TextView(this)
           textView.text = "Hello world"
           // textView.setText("Hello world") でも設定可能

           linearLayout.addView(textView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)
       }
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

</LinearLayout>

TextView()関数で、TextViewのインスタンスを生成しております。

テキストは、textView.textで設定しております。setText()でも設定することができます。

最後に、linearLayoutに対し、addView()でtextViewを子Viewとして追加しております。

なお、サンプルコードでは、スコープ関数alsoを使用しております。alsoに関しましては、以下の記事で解説しておりますので、そちらもご覧頂けたらと思います。

【Kotlin基礎】スコープ関数alsoの実装方法と用途を解説

Kotlinにはスコープ関数という覚えておくと便利な関数があります。スコープ関数にはいくつか種類があるのですが、本記事では、スコープ関数alsoに焦点を当て解説致します。他のスコープ関数(let, run, apply等)につきましては、簡単な解説と、各記事へのリンクがありますので、そちらをご覧頂けたらと思います。

Point
  • TextView()関数で、TextViewのインスタンスを生成できる
  • textView.text、textView.setText()で、テキストを指定する
  • addView()で、Viewを追加する

テキストの文字色や大きさなどを変更する方法

続いて、テキストの文字色や大きさなどを変更する方法を紹介致します。実装には、xmlで実装する方法と、コードで動的に実装する方法の2通りがあるので、それぞれのサンプルコードはタブで切り替えてご覧ください。

なおサンプルコードでは、TextViewの実装に関する部分だけを掲載し、親レイアウトの実装は省略しておりますので、予めご了承ください。

テキストの大きさを変更する方法

テキストの大きさは、xmlではandroid:textSize、
コードでは、textSize、あるいはsetTextSize()で指定することができます。

  • コードでの実装
  • xmlでの実装
val textView = TextView(this)
textView.text = "Hello world"
textView.textSize = 30f
// textView.setTextSize(30f)

<TextView
    android:text="Hello world"
    android:textSize="30sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

コードで動的に実装する場合は、Floatで大きさを指定します。

xmlで実装する場合は、spで大きさを指定します。

Point
  • xmlでテキストの大きさを指定する場合は、android:textSizeを使用し、単位はspで指定する
  • コードでテキストの大きさを指定する場合は、textSizeあるいはsetTextSize()を使用し、Floatで指定する

テキストの色を変更する方法

テキストの色は、xmlではandroid:textColor、
コードでは、setTextColor()で指定することができます。

  • コードでの実装
  • xmlでの実装
val textView = TextView(this)
textView.text = "Hello world"
textView.textSize = 30f
textView.setTextColor(Color.parseColor("#FF0000"))

<TextView
    android:text="Hello world"
    android:textSize="30sp"
    android:textColor="#FF0000"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

なお、テキストを指定する時と同様、”#FF0000″のように直接色を指定するのではなく、colors.xmlに色を定義しておき、そちらを参照する実装の方が推奨されております。

Point
  • xmlでテキストの色を指定する場合は、android:textColorで指定する
  • コードでテキストの色を指定する場合は、setTextColor()で指定する

テキストのスタイルを変更する方法

テキストのスタイルは、xmlではandroid:textStyle、
コードでは、typefaceあるいはsetTypeface()で指定することができます。

  • コードでの実装
  • xmlでの実装
val textView = TextView(this)
textView.text = "Hello world"
textView.textSize = 30f
textView.typeface = Typeface.DEFAULT_BOLD
// textView.setTypeface(Typeface.DEFAULT_BOLD)

<TextView
    android:text="Hello world"
    android:textSize="30sp"
    android:textStyle="bold"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

boldを指定すると太字に、italicを指定すると斜体になります。

Point
  • xmlでテキストのスタイルを指定する場合は、android:typefaceで指定する
  • コードでテキストのスタイルを指定する場合は、typefaceあるいはsetTypeface()で指定する
  • typefaceにboldを指定すると太字に、italicを指定すると斜体になる

テキストの表示位置を変更する方法

テキストの表示位置は、xmlで実装する場合はandroid:textAlignment、
コードで実装する場合は、textAlignmentで指定することができます。

  • コードでの実装
  • xmlでの実装
val textView = TextView(this)
textView.text = "Hello world"
textView.textSize = 30f
textView.textAlignment = TextView.TEXT_ALIGNMENT_CENTER

<TextView
    android:text="Hello world"
    android:textSize="30sp"
    android:textAlignment="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

leftを指定すると左に、centerを指定すると中央に、rightを指定すると右に表示されます。

Point
  • xmlでテキストの表示位置を指定する場合は、android:textAlignmentで指定する
  • コードでテキストの表示位置を指定する場合は、textAlignmentで指定する
  • textAlignmentにleftを指定すると左に、centerを指定すると中央に、rightを指定すると右に表示される

まとめ

  • xmlでTextViewを実装する場合、
    テキストは、android:textで指定する
    テキストの大きさは、android:textSizeで指定する
    テキストの色は、android:textColorで指定する
    テキストのスタイルは、android:typefaceで指定する
    テキストの表示位置は、android:textAlignmentで指定する
  • コードでTextViewを実装には、TextView()関数でインスタンスを生成し、
    テキストは、textあるいはsetText()で指定する
    テキストの大きさは、textSizeあるいはsetTextSize()で指定する
    テキストの色は、setTextColor()で指定する
    テキストのスタイルは、typefaceあるいはsetTypeface()で指定する
    テキストの表示位置は、textAlignmentで指定する

関連記事