codelabs-challenge-app-2019の構成について

[ymnder]

このissueでは codelabs-challenge-app-2019 のリポジトリのディレクトリ構成ついて説明します。

https://github.com/DroidKaigi/codelabs-challenge-app-2019/tree/master/app/src/main

• java/droidkaigi/github/io/challenge2019 -> アプリの機能実装部分が入っています
• res -> 画面を構成するxmlや、色、静的な文章、画像などのresourceが入っています
• AndroidManifest.xml -> アプリに関する情報が記載されています。

https://github.com/DroidKaigi/codelabs-challenge-app-2019/tree/master/app/src/main/java/droidkaigi/github/io/challenge2019

• Activity -> アプリの各画面の根幹部分です。この上に画面・各種機能を実装していきます。ActivityはAndroidManifestに記載する必要があります。

  • MainActivity -> 記事一覧画面です。ホーム画面からアイコンをタップしたときに開かれる画面です。
  • StoryActivity -> 個別記事画面です。記事とコメントが表示されます。

• Adapter -> リスト画面のデータと画面をコントロールしています。

  • StoryAdapter -> 記事一覧の各アイテムを作成するためにデータと画面を紐づけます。
  • CommentAdapter -> コメントの各アイテムを作成するためにデータと画面を紐づけます。

• MyApplication -> 起動時に裏で呼び出されるクラスです。

• Util -> 便利なメソッドをまとめています。

• data -> 通信処理やデータ操作処理が入っています。

  • db -> ArticlePreferencesというKVSが入っています。
  • api -> HackerNewsApiという通信処理を行う実装が入っています。
    • response -> apiのレスポンスを定義しています。
      • Item -> 記事を定義しています。
      • User -> コメントを定義しています。

• ingest -> 計測機能に見立てた非常に不安定なクラスです。

[ymnder]

ライブラリについて

app/build.gradle をご参照ください
https://github.com/DroidKaigi/codelabs-challenge-app-2019/blob/master/app/build.gradle

[feature]
Retrofit -> Http Client
api が定義される箇所はここです。
BaseActivity でretrofitのインスタンスが生成されます。このとき、Moshiもセットされます。
Moshi -> Json Parser
response で使われています。

[debug]
Timber -> Logger
Stetho -> Debug tools, use with Chrome Developer Tools

デバッグについて

・ログを出すには
Timber.d(変数) という実装を仕込むことにより、Android Studioのlogcatにログを表示できます。

fun showMessage(hoge: String) {
        Timber.d(hoge)
}

・画面をデバッグする
Android StudioのLayout Inspectorが便利です。
アプリに表示されている画面を解析してデバッグできます。
Tools > Layout Inspector

これを選択することで、最前面に表示されているActivityをデバッグできます。
今描画されているViewの状態を把握できます。

中央に表示されているのが、今キャプチャした画面です。
カーソルで画面の構成要素を選択できます。

左側は、ViewTreeが表示されています。
枠で囲った部分は、クリックしたViewが、Viewのツリーのどの位置に存在しているかわかります。
また、そのViewのidを確認できます。

右側は、propertiesです。
Viewのidやheight, width, themeなどのプロパティが確認できます。

・画面デバッグの流れ
今表示されている画面のURLを定義しているxmlが知りたいと想定します。
Layout Inspectorを使用し、リストの各アイテムの構成を確認できました。
URLのViewをクリックすると、左側にviewのidが表示されています。
Macの場合、cmd + shift + Fを押下することで検索を行います。
今確認できた、 url を入力するとurlを含んだxmlが検索結果に表示されます。

[ymnder]

[WIP]
リストの表示について
RecyclerView
Adapter
ViewHolder
非同期処理について
AsyncTask