Androidで保険業界の単語帳を作る vol.2 ~画面を作成する~

オブジェクト構成

単語帳に最低限必要な機能といえば単語の一覧を表示することと、データを保存するデータベースの2点かなと思ってます。
いろいろ調べていたところ、まあうさブラザーズさんが書いている以下のブログの記事のオブジェクト構成がヒントになるんじゃないかと思ったので、こちらを参考にしながら開発していこうかなと思います。

「テキスト画面」は今のところ作るつもりはないので、メイン画面とデータベースとそれをつないでいるオブジェクトを作成していこうかなと思います。

今のところどんな風に開発するか、まったく見当がついていませんw

メイン画面を作成する

メイン画面を作ろうと思いますが、記事を読むとメイン画面も「メイン画面」のレイアウトと「1行分のレイアウト」の２つに分けられるらしい、、、なるほど。

まずは「メイン画面」のレイアウトから。記事でもそこまで難しいことはやっていないみたいで安心しました^^
「ConstraintLayout」というレイアウトが画面の下地となるようなレイアウトになります。
他のView（文字とかボタンとか）と相対的に画面上にViewを配置できるレイアウトです。
そこにListView(データを一覧として表示するレイアウト)を貼り付けます。
ソースコードがこちら↓

main_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/mainList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

idがListViewの名前、widthやheightが幅と高さ、appから始まる部分が"相対的に"の部分で、下地となるConstraintLayoutの４つの辺（上、下、右、左)にListViewの４つの辺をくっつけています。
記事にはフローティングアクションボタンが作成されてますが、単語を追加したりする予定は今のとこないのでカット。
とりあえずメイン画面は完成しました！

1行のレイアウトを作成する

つづいてListViewに表示させる１行分のレイアウトを作成していきます。
記事のようにテキストとボタンを組み合わせた行の場合、こういう作り方をするのだと思うのですが、
今回は単語だけ乗ればとりあえずはいいかなと思ってます。ただ将来的にボタンを付けたりできるように今のうちに作っておきます。

row_main.xml

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

    <TextView
        android:id="@+id/word"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textSize="24sp"/>
</LinearLayout>

一行の下地となるのはLinerLayoutというレイアウト。
これは横もしくは縦にViewを配置するレイアウトになります。
テキストだけの１行なので本領発揮していない気もしますが、ボタンとか配置したい場合は横並びで配置します。XML上で文字を入れてみるとこんな感じ↓

とりあえず画面はこんな感じ。
次回はデータベースを作っていきます！