記事一覧のアイテムに時間を表示しましょう

[ymnder]

一覧の記事がいつ投稿された記事か不明瞭です。そこで、記事タイトルの下に投稿時間をyyyy/M/d H:MMの形で表示しましょう。

[ymnder]

アプローチについて
画面のどこを変更すれば良いのか、記事を定義するアイテムはなにか、どう描画を行うかの３点に分けてコードを見ていきます。

step1:画面のどこを変更すれば良いのか
画面を定義するxmlを探します。次のような方法があります。

• Androidの画面はMainActivityにセットされるxmlを見てみましょう。 ref: setContentView
• Android StudioのLayout Inspectorで画面を分析しましょう。
  • アイテムの構成情報が見られます。構成要素を選択するとidが見えます。idを検索してみます。

一覧を表示するxmlとアイテムを表示するxmlがあります。

• TextViewはテキストを表示するための表示要素です。
• 既にurlなどのテキストが表示されていますので、コピーしてtimeというTextViewを追加します。

        <TextView
                android:id="@+id/dateTime"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption"
                android:text="ここに時間を表示する"
                app:layout_constraintTop_toBottomOf="@id/title"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                tools:text="2019/1/1 0:00"
        />

ビルドを行うと、今追加したテキストが表示されているはずです。

step2:記事を定義するアイテムはなにか
各記事の一行を表示するためのデータがどこかに定義されています。

• api/responseを見てみましょう。

step3: どう描画を行うか
xmlの前後の行を見てみると android:text="@{item.url}" のような書き方をしています。
これは data bindingという仕組みで、xmlにデータを紐付けることができます。
この場合だと、itemという変数名の型に定義された、urlというプロパティの要素をtextに入れています。

さきほど追加したTextViewにも同じようにセットできそうです。
textのところにtimeをセットしてみましょう。

timeはどうもLong型なようです。このままではぱっと見て認識できません。
次はこのtimeを読みやすい時間へ変換しましょう。