公開日: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に文字列を定義しておき、そちらを参照する実装の方が推奨されております。
- 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に関しましては、以下の記事で解説しておりますので、そちらもご覧頂けたらと思います。
- 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で大きさを指定します。
- 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に色を定義しておき、そちらを参照する実装の方が推奨されております。
- 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を指定すると斜体になります。
- 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を指定すると右に表示されます。
- 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で指定する
関連記事