【AndroidStudio】viewについて

# 目的
本記事は私が学んだことについての備忘録です。
今回はviewについてまとめていきます。

# 目次
[viewとは](#viewとは)
[viewの種類](#viewの種類)
[viewの表示・非表示の切り替え](#viewの表示非表示の切り替え)
[おわりに](#おわりに)
[参考にさせていただいたサイト](#参考にさせていただいたサイト)
# viewとは
**Layout内に配置する画面部品のこと**です。
xmlファイルに記述して静的に追加したり、Activityから動的に追加したりできます。
[前回の記事](https://qiita.com/Nami_kawa/items/8a66c7f81716a4b6290e)でLayoutについてまとめていますので気になる方はよろしければご覧ください。

# viewの種類
ここからは利用頻度の高いviewをピックアップして紹介していきます。

### TextView
名前の通りテキスト、つまり**文字列を表示できるview**です。
1行で横にひたすら表示したり、複数行で分けて表示することが可能です。
singleLineという属性をtrueにすると1行で表示できます。
また、表示できる範囲よりも文字数が多かった場合は
「...」のような3点リーダーで省略表示も可能です。
文字のどこを省略するかもellipsizeという属性で選択することができます。
<font color="red">※marqueeはTextViewにフォーカスがあたった場合スクロールされる</font>
| ellipsizeの設定値 | 省略箇所 | 表示形式 |
|:-----------|:------------|:---------|
| none       | 省略なし   　|abcdefg|
| start     | 先頭を省略    |...cdefg|
| middle   | 中央を省略|ab...efg|
| end         | 最後を省略 | abcde...|
| marquee| スクロール   |文字が流れるように<br>表示される|

### EditText
**テキストの入力ができるview**です。
EditTextに入力された文字をもとに
TextViewなどに反映させるなど使用用途は多岐にわたります。
入力されたテキストを取得するにはActivity内で
下記のように記述すると取得することが出来ます。
```kotlin:MainActivity.kt
val txt: String = binding.editText.Text.toString()
```
例のコードではViewBindingを用いた書き方になります。
ViewBindingについてはまた別の機会にまとめたいと思います。
分からない方は調べてみてくださいね。
findViewByIdでも取得したいviewのidの値をeditTextの箇所に入れることで
同じくテキストを取得することが出来ます。

また、文字を入力する前の状態のとき半透明の文字を表示させられます。
これはhint属性で文字を設定することで表示できます。
文字を入力すると半透明の文字は非表示になります。
![数字.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/28ddd592-4dd5-b0b4-245f-dcbade2579b0.png)

### Button
名前のままですが**ボタンを表示するview**です。
特定条件下で押下できないようにすることも可能です。
タップできないようにするコードは下記の通りです。
こちらもViewBindingを用いた書き方です。
```kotlin:MainActivity.kt
binding.button.isEnabled = false
```
isEnabledをfalseにするとボタンを押下することが出来なくなり、
文字の色がグレーになります。
trueにすると再び押下することが可能になり、文字の色も元通りになります。
また以下の画像のようにボタンに表示するテキストを指定することもできます。
![スクリーンショット 2023-11-16 023231.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/a4e45877-8cb9-6665-780c-8e06c7398d79.png)


### ImageView
**画像を表示するview**です。
drawableに予め入れておいた画像を表示することができます。
ちなみにdrawableは以下の画像の赤枠の箇所のことを指します。
<font color="lightgray">適当に作ったプロジェクトなので画像が入っていませんが・・・</font>
![スクリーンショット 2023-11-16 023356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/abf6a9db-b1d0-4aa4-4da1-69f09df827a4.png)

drawableでサポートされていないBitmap形式の画像や
処理の途中で受け取ったdrawableに入っていない画像などは
コード内で動的に画像を設定すれば表示することができます。
大体の画像は表示することができるためとても重宝します。

### Spinner
**ドロップダウンリストを表示するview**です。
ドロップダウンリストとは以下の画像のようなものです。
![spinner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/d77b7b3a-2ba9-664a-bafb-22cd82fdec81.png)
>[画像をお借りしたサイト](https://developer.android.com/guide/topics/ui/controls/spinner?hl=ja)

利用するには設定したい値のarrayListを作成してArrayAdapterから設定する必要があります。
adapterを生成する際リスト内容・選択肢のレイアウトを変更することが可能です。
また、Activity内にドロップダウンリストの何を選択したかを伝えるOnItemSelectedListenerの実装も必要です。
xmlから表示モードの変更も可能でドロップダウンリストをダイアログ形式で表示することが出来ます。
spinnerMode属性にdialogを設定すると変更することが出来ます。

### RecyclerView
**リストを表示するview**です。
ずら～っとデータを並べて表示したい場合に利用されます。
こんな感じで表示できます。
![kotlin_recyclerview_sh_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/bf799f8c-608a-7820-d1c0-52613fc37131.png)
>[画像をお借りしたサイト](https://hirauchi-genta.com/kotlin-recyclerview/)

利用するには1つのデータを表示する時のレイアウトファイルを用意したり、
Adapterを用意してRecyclerViewに設定したり、
用意したAdapter内にViewHolderを継承したクラスを用意する必要があります。
今回他に紹介したviewと比べると複雑で、初心者からすると難しい感じがします。
ですがAndroidアプリを開発するにあたってかなり高確率で利用することになるくらい
扱えると便利なviewですので慣れて損はしないと思います。
<font color="lightgray">かくいう筆者もぼんやりとしか理解していないのでまだまだ扱い切れていませんが・・・</font>

筆者には細かい説明はまだできないため、
詳細が知りたい方は是非調べてみてください。

# viewの表示・非表示の切り替え
先ほど紹介したviewなどをxmlファイルやAcitivity内などで追加したのはいいけど
特定の条件下で表示させたいもしくは非表示にさせたいといったことがあると思います。
そんな時は用途に合わせてviewのvisibility属性に以下の値をセットします。
| visibilityの設定値 | 表示形式 | どうしたい時に使うか |
|:-----------|:------------|:------------|
| visible       | 何も指定しない場合の初期値。<br>普通に表示される|viewを表示したい時|
| invisible     | そのviewの存在は消えないが<br>見た目は非表示 |viewの場所を開けたまま<br>非表示にしたい時|
| gone   | そのviewの存在自体を<br>非表示扱いにする|viewの場所を詰めて<br>非表示にしたい時|

言葉で書いてあってもしっくりこないと思うので画像で説明します。
こんな感じです。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/1dc27f55-6e4e-031d-23fd-6372492952d3.png)

画像ではBUTTON2と書かれているButtonのvisibility属性を変更しています。
invisibleではBUTTON2の分のスペースは空いていますが、
goneではBUTTON2の分のスペースは空いていませんね。

# おわりに
前回と同じく直接触れて分かったことなどをまとめてみました。
記事をもっとわかりやすく上手にまとめられるよう
今後も記事の投稿を行って改善していきたいです。
最後まで閲覧いただきありがとうございました。🙇‍♀️

# 参考にさせていただいたサイト
[TextViewの省略表示について](https://qiita.com/yoshihiro-kato/items/fe98fb9fd6ce194c4964)
[EditTextのhint属性について](https://akira-watson.com/android/edittext.html)
[drawableでサポートされている画像形式](https://developer.android.com/guide/topics/graphics/drawables?hl=ja#:~:text=%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB,GIF%EF%BC%88%E9%9D%9E%E6%8E%A8%E5%A5%A8%EF%BC%89%E3%81%A7%E3%81%99%E3%80%82)
[ImageViewの動的設定](https://codeforfun.jp/android-studio-how-to-change-image-of-imageview-dynamically/)
[Spinnerについて1](https://hirauchi-genta.com/kotlin-spinner/)
[Spinnerについて2](https://developer.android.com/guide/topics/ui/controls/spinner?hl=ja)
[RecyclerViewについて1](https://qiita.com/smooth_people/items/beeffda407db211de960)
[RecyclerViewについて2](https://hirauchi-genta.com/kotlin-recyclerview/)