カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit3 – 1 第3回 序章:画面が複数あるアプリ

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit3 – ナビゲーションUnit3-1 第3回 の概要をまとめたものです(翻訳ではありません)


Unit3 – 1 第3回

第3回 の内容は以下の通りです

  • いままで作ってきたアプリはアクティビティ(Activity)がひとつだけのものでした
  • 多くのAndroidアプリには複数のアクティビティがあり、それらの間を行ったり来たりして使います
  • 今回は単語辞書アプリを作ってみようと思います
  • 複数のアクティビティを持ち、それらの間を移動するのにインテント(Intent)を使います
  • また他のアプリにデータを渡すこともやってみます
  • 使用するクラスについて詳しく知りたいときは developer.android.com にアクセスして調べましょう

具体的なレッスンの内容は次の通りです

  • アプリ内のアクティビティに移動するのに明示的インテント(explicit intent)を使います
  • ほかのアプリのコンテンツに移動するのに暗黙的インテント(implicit intent)を使います
  • アプリバー(アクションバー)にボタンを追加するために、コードにメニューオプションを設定します

Unit3 – 1 第3回 序章

第3回でつくるアプリは半完成品が用意されてるの。それを読み込んでからチュートリアルを進めますね

まずは準備ですね

作成する単語辞書アプリ

このアプリには2つの画面があるの

  • 単語辞書アプリはシンプルな辞書アプリです。A~Zのアルファベットが並んでいて、それを選択すると選択したアルファベットで始まる単語リストが出てきます。単語を選択するとブラウザがその単語の意味を探し出して表示するようにします
  • コードにインテントやメニューオプションを追加して、単語辞書アプリが画面間の移動をできるように修正します
  • インテントを理解するのが目的なので、未完成のプロジェクト(スタータープロジェクト)があるので、そこから始めようとおもいます
  • スタータープロジェクトにはアプリで使う画面がすでに用意されています。ただし動作するためのコードがないので画面間を移動したりはできません
  • インテント(intent)を使ってこのスタータープロジェクトが動作するようにします

スタータープロジェクトをインポートする

ダウンロードしてから Android Studio に読み込むんですね

スタータープロジェクトをダウンロードする

  1. まず こちら からスタータープロジェクトのZIPファイルをダウンロードします(Code というボタンをクリックして、Download ZIP をクリックします)
  2. ダウンロードしたZIPファイルを展開しておきます
  3. プロジェクトをAndroid Studio にインポートします
    1. Android Studio を起ち上げて  File > New > Import Project  と進みます
    2. Import Project ダイアログで、展開したプロジェクトフォルダーを指定してインポートします
  4. 読み込んだプロジェクトを実行して動作するかどうか確認してみます
    • Run でビルドしてアプリを実行してエラーなく動作するか確認します
    • Project でアプリに何が実装されているのか確認できます

スタータープロジェクトの内容

こんなクラスが用意されています

  • プロジェクトの内容をすこしながめてみます
  • ほとんどは以前のチュートリアルで出てきた内容です
  • このアプリにあるアクティビティは2つです(MainActivity と DetailActivity)
  • どちらにも RecyclerView とアダプタがあります
  • LetterAdapter
    • MainActivity にある RecyclerView で使われます
    • A~Z までの文字がそれぞれボタンになっており、それぞれに onClickListener がセットされています
    • onClickListener の中身は今のところ空っぽです
    • ここにボタンを押したときに DetailActivity に移動する処理を記述します
  • WordAdapter
    • DetailActivity にある RecyclerView で使われます
    • DetailActivity は単語リストを表示するのに使います
    • 各単語に対応したボタンがあり、どのボタンにも onClickListener がセットされています
    • 今のところこの画面には移動できません(このチュートリアルで実装します)
    • ここにコードを記述して、ブラウザに移動して単語の意味を表示するようにします
  • MainActivity にもいくつか修正が必要です
    • アプリバー(アクションバー)にボタンを表示するためのメニューオプションのコードはここに記述します
    • アプリバーのメニューを使って、リスト表示かグリッド表示か、レイアウトを選択できるようになります

このアプリの概要

もうちょっと詳しくみておきますね

このアプリの構造

英単語を選ぶと意味が表示されるんですね

  • 初期画面(アルファベットリスト)-> アプリバーメニュー
    • 詳細画面(単語リスト)
      • 辞書画面(Chromeの検索結果画面)

このアプリで使用する主なファイル

Kotlin と XML で作られてるんですね

Kotlin コード

  • MainActivity.kt ・・・画面1(初期画面)
  • LetterAdapter.kt ・・・MainActivity のRecyclerViewで使うアダプタ
  • DetailActivity.kt ・・・画面2(詳細画面)
  • WordAdapter.kt ・・・DetailActivity のRecyclerViewで使うアダプタ

XML ファイル

  • layout
    • activity_main.xml・・・MainActivityのレイアウト
    • activity_detail.xml・・・DetailActivityのレイアウト
    • item_view.xml・・・RecycleViewの項目レイアウト
  • menu
    • layout_menu.xml・・・アプリバーのメニューレイアウト
  • values
    • arrays.xml・・・単語リストの元データ

Kotlinコード と XMLレイアウトファイルの対応

こんな風に対応してるそうです

  • MainActivity.kt – activity_main.xml, layout_menu.xml
  • LetterAdapter.kt – item_list.xml
  • DetailActivity.kt – activity_detail.xml
  • WordAdapter.kt – item_list.xml

呼び出す順番

こうやって次々と呼び出されるんですね

  • MainActivity.kt
    • LetterAdapter.kt -> (DetailActivity)
      • DetailActivity.kt
        • WordAdapter.kt -> (ACTION_VIEW)

Kotlinコードでの処理の概要

4つある Kotlin ファイルでは、こんな感じの処理をしているの

MainActivity.kt

  • レイアウト生成(activity_main.xml)
  • RecyclerView のレイアウトマネージャ設定
  • RecyclerView のアダプタ設定(LetterAdapter)
  • アプリバーのメニューの設定(onCreateOptionsMenu)
    • アプリバーのメニューレイアウト生成(layout_menu.xml)
    • アプリバーのアイコン設定
  • アプリバーの動作の設定(onOptionsItemSelected)
    • 選択されたときの処理
    • 選択されたときの画面の更新処理

LetterAdapter.kt

  • データソースの作成
  • ビューホルダー作成(item_view.xml)
  • ビューホルダー設定
  • ビューホルダーがクリックされたときの処理
    • インテントを生成
    • インテントからアクティビティ(DetailActivity)を開始
  • Accessibility の設定(コンパニオンオブジェクト)

DetailActivity.kt

  • 定数設定:コンパニオンオブジェクト
  • レイアウト生成(activity_detail.xml)
  • RecyclerView のレイアウトマネージャ設定
  • RecyclerView のアダプタ設定(WordAdapter)
  • RecyclerView のその他の設定
  • アクティビティの設定

WordAdapter.kt

  • データソースの作成
  • ビューホルダー作成(item_view.xml)
  • ビューホルダー設定
  • ビューホルダーがクリックされたときの処理
    • インテントを生成
    • インテントからアクティビティ(ACTION_VIEW)を開始
  • Accessibility の設定(コンパニオンオブジェクト)

Kotlinコードで使う変数や関数

処理している内容を、変数や関数の具体的な名前でまとめておきますね

MainActivity.kt

  • 変数 recyclerView・・・RecyclerView のインスタンス
  • 変数 isLinearLayoutManager・・・レイアウト状態のフラグ
  • onCreate
    • activity_main.xml からレイアウトを生成
    • recyclerView にインスタンス(MainActivityのRecyclerView)代入
    • chooseLayout()・・・recyclerView にアダプタとレイアウトマネージャを実行
  • chooseLayout()・・・recyclerView(MainActivity)のレイアウトとアダプタを設定
    • recyclerView のレイアウトマネージャの設定
    • recyclerView のアダプタ(LetterAdapter)の設定
  • setIcon()・・・アプリバーのメニューのアイコンを設定
  • onCreateOptionsMenu・・・アプリバーメニュー生成
    • layout_menu.xml からアプリバーメニューの生成
    • setIcon()・・・メニューへのアイコン設定を実行
  • onOptionsItemSelected・・・アプリバーのメニューが選択されたときの動作を記述
    • アプリバーのメニューが選択されたときの処理
    • 選択されたレイアウトに合わせてレイアウトとアイコンの表示を更新

LetterAdapter.kt

  • 変数 list・・・RecyclerView に表示する文字(A~Z)のリスト
  • LetterViewHolder・・・ビューホルダーの定義
    • button:ビューホルダー内の部品への参照
  • getItemCount()・・・RecyclerView に表示する項目数
  • onCreateViewHolder()・・・ビューホルダーの生成
    • item_view.xml からビューホルダーを生成
    • accessibilityについて設定(WordAdapterを参照)
  • onBindViewHolder()・・・ビューホルダーの設定
    • 変数item・・・変数listの指定場所の項目
    • ビューホルダーのbuttonのtextに文字を設定
    • Click Listener を設置
      • ビューホルダーの context を受け取り
      • 変数intent・・・DetailActivityを呼び出すためのインテントの作成
      • intent内のletterに押されたボタンの文字を設定(LeterAdapter から DetailActivity にデータを渡すのに extra を使う)
      • intentを指定してアクティビティを開始(別のアクティビティを呼び出す)
  • コンパニオンオブジェクト Accessibility の設定

DetailActivity.kt

  • コンパニオンオブジェクトの設定
  • onCreate
    • activity_detail.xml からレイアウトを生成
    • 変数 letterId・・・定数の取得
    • 変数 recyclerView・・・インスタンス(DetailActivityのRecyclerView)代入
    • recyclerView のレイアウトマネージャ設定
    • recyclerView のアダプタ(WordAdapterクラス)設定
    • recyclerView のその他の設定
    • アクティビティの設定

WordAdapter.kt

  • 変数 filteredWords・・・文字列リスト
  • コンストラクタ
    • filteredWords に arrays.xml にある単語の元データを使いやすいように加工してから代入
  • WordViewHolder・・・ビューホルダーの定義
    • button:ビューホルダー内の部品への参照
  • getItemCount()・・・RecyclerView に表示する項目数
  • onCreateViewHolder()・・・ビューホルダーの生成
    • item_view.xml からビューホルダーを生成
    • accessibilityについて設定(Accessibilityを参照)
  • onBindViewHolder()・・・ビューホルダーの設定
    • 変数item ・・・ 変数filteredWordsの指定場所の項目
    • 変数context・・・ビューホルダーのcontext
    • ビューホルダーのbuttonのtextにitemを設定
    • Click Listener を設置
      • 変数 queryUrl・・・単語を検索するためのURIを設定
      • 変数 intent・・・ACTION_VIEW を呼び出すための暗黙的インテントの作成
      • intentを指定してアクティビティを開始(別のアクティビティを呼び出す)
  • コンパニオンオブジェクト Accessibility の設定

このアプリに出てくる用語

次回からのチュートリアルのキーワードかな?

うん、このあたりを理解すると複数の画面が扱えるようになるの

  • アクティビティ(activity)
  • インテント(intent)
    • 明示的インテント(explicit intent)
    • 暗黙的インテント(implicit intent)
  • エクストラ(extra)
  • コンテキスト(context)
  • コンパニオンオブジェクト(companion object)