Be simple

”当たり前”が誰かのためになる

TextViewの基礎

はじめに

こんにちは。

今日は、Androidの開発における基本のViewの一つTextViewについてまとめていこうと思います。

すべてを解説できたらいいのですが、個人的な独断と偏見でよく使うものをまとめていき、必要に応じて細い部分も書いていきます。

 

何か付け足しなどあれば、随時更新していく予定です。

もう開発している人にとっては、既知の情報が多いですが、初心者向けにわかりやすいようにまとめて共有していきたい!という気持ちがあって作成しています。ご了承ください。

 

TextViewとは

よく使うテキストを表示するためのViewです。テキストを単に表示するだけでなく、フラットボタンとして利用することもあります。

最初にEmptyActivityのプロジェクトを作成すると一番最初に表示されます。

f:id:rozkey59:20181204042920p:plain

画像右側のPreviewの中に写っている、Hello Worldと表示しているViewのことです。

 

基本的に使わないことがないというくらい使います。

だいたいテンプレになるくらいの基本だけ、書いていきます。

 

公式リンクは次のとおり

https://developer.android.com/reference/android/widget/TextView

 

簡単な実装サンプル

レイアウト用のxmlファイルの中に、下記のように書きます。


<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>

自分の場合は、app > res > layout > activity_main.xmlのなかでこれを定義しています。

 

次にActivityの中で、次のように書きます。

自分のサンプルでは、デフォルトの表示のActivityがMainActivityのため、次のように記載しました。

class MainActivity : AppCompatActivity() {

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

val textView = findViewById<TextView>(R.id.text_view)
textView.text = "Test"
}
}

findViewByIdでレイアウトに指定したViewのIDを持つTextViewを引っ張ってきて、setTextすることで、任意の文字列に変更することができます。

Kotlinで書く場合は、上記のように書くだけで十分です。

 

実行結果が次のとおりです。

f:id:rozkey59:20181204043602p:plain

エミュレータ上に指定した文字が変わっていることを確認できます。

 

よく使うので知っておいたほうがいいxmlの属性

TextViewは本当によく使いますので、xmlの属性で知っておいたほうがいいと思う属性についてだけまとめます。

 

text

android:text="Hello World!"

textで文字の指定をすることが可能です。

デフォルトで設定したい場合や、変える予定がない場合はxmlに指定しましょう。

また、stringリソースファイルに定義することが良いです。

app > res > values > strings.xmlの中で文字を指定します。

<resources>
<string name="text_sample">Text Sample</string>
</resources>

例えば、上記のように指定した場合に、レイアウトxmlに戻ってきて、

android:text="@string/text_sample"

のように指定すると、Text Sampleという表示がされるようになります。

ベタがきでも問題ないのですが、複数レイアウトで同じ文字列を共有していてあとで変えたくなった時にstrings.xmlにて書き換えるだけでいいのでstrings.xmlで定義するようにしましょう。

 

textColor

android:textColor="@color/colorAccent"

textの色を変えることができます。実際に変えた際のPreviewが次のとおりです。

 

f:id:rozkey59:20181204044725p:plain

こちらもカラーコードを直に指定することができますが、app > res > values > colors.xmlの中にて、カラーコードを指定したリソースを使用しましょう。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
</resources>

自分のサンプルの場合は、上のようになっており、colorAccentを使って画像のように表示しています。

 

textSize

android:textSize="16sp"

textSizeは、テキストの大きさを変更できます。

dpとspで指定できますが、spを使うようにしてください。

dpを使った場合、端末のサイズごとに同じ大きさになりますが、spを使用すると画面のサイズに合わせて文字の大きさを変えてくれるので、デザイン崩れなどが起きないです。

 

テキストはspを使用しましょう。

 

dpについては、Qiitaに詳しくまとめてくれている方がいらっしゃるのでこちらを参照してください。

qiita.com

 

また、stringやcolorと同様に、文字もdimen.xmlというリソースファイルをapp > res > valuesの下に作成して、サイズを自分で指定するようにしましょう。

自分の場合は、text × 数字としていて、デフォルトを8spにし、解像度の観点から8の倍数になるようにしています。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text1">8sp</dimen>
<dimen name="text2">16sp</dimen>
</resources>

 

textStyle

android:textStyle="bold"

テキストのスタイルを変更できます。bold, italic, normalがあります。

よく使うのがboldです。太字にするための属性になります。

 

drawableLeft

android:drawableLeft="@drawable/ic_android"

TextViewに画像を左につけたい場合に使います。

つけた時の画面が次のようになります。

f:id:rozkey59:20181206072352p:plain

右側につけたい場合には、次のように指定することができます。

android:drawableRight="@drawable/ic_android"


よく使うのは、この二つのパターンだと思います。

 

drawablePadding

android:drawablePadding="@dimen/text2"

前節の画像とテキストの間のスペースを取ることができます。

指定した時の画像が次のようになります。

f:id:rozkey59:20181206072742p:plain

一つ前の画像と見比べるとスペースが入っていることがわかると思います。

drawableRightを指定した場合でも同じようにできます。

 

おわりに

簡単な実装と最低限これだけは知っておけばいいかなーというのをまとめました。

必要に応じて更新していく予定なので、これが基本だなーと思う部分を更新してまとめていこうと思います。