2019年にGoogleから,Web上でAndroidを学べるコースが提供されました.(Android Kotlin Fundamentals Course)
この記事では,そのコースを実際にやってみてアウトプットしてみるといった内容です.
何かツッコミなどあれば編集リクエストかコメントかTwitterでいただければ修正いたします
今回学ぶこと
・Fragmentをアプリに追加する方法
目指す成果物
今回は,このようなクイズアプリを作っていきます.
アプリの仕様
・左のスクリーンショットのタイトル画面で,ゲームを開始します.
・真ん中のスクリーンショットのゲーム画面で,解答を送信します.
・右のスクリーンショットの画面で,navigationドロワーメニューは,アプリの横からスライドすると出てきます.
ステップ
1. スタータープロジェクトをダウンロードする
今回は,アプリに必要なテンプレートコードとFragmentクラスをダウンロードした状態から進めます.
- AndroidTrivia-Starter Android Studioプロジェクトをダウンロードします.
- Android Studioでプロジェクトを開き,アプリを実行します.アプリを開くと,アプリ名と空白の画面を表示する以外は何もしません.
2. Fragmentを追加する
Fragmentは,アクティビティの動作やUIの一部のことをいいます.
一つのアクティビティで,複数のFragmentを組み合わせてmulti-pane UIを構築し,複数のアクティビティでFragmentを再利用できます.
Fragmentは,サブアクティビティ
のようなものです.
・Fragmentには,独自のライフサイクルがあり,独自の入力イベントを受け取る
・Fragmentは,アクティビティの実行中に追加や削除ができる
・Fragmentは,Kotlinクラスで定義される
・FragmentのUIは,XMLレイアウトファイルで定義される
今回のアプリには,MainActivityといつくかのFragmentがあります.
ここのステップでは,Fragmentを作成し,そのFragmentをアプリのMainActivityに追加していきます.
まず,空のTitileFragment
クラスを作成します.
[File]
>[New]
>[Fragment]
>[Fragment(blank)]
Nameを,TitleFragment
にして,チェックアウトをすべて外しFragmentを作成します.
TitleFragment.kt
を開くと,onCreateView()
メソッドが含まれていて,これはFragmentのライフサイクル中に呼び出されるメソッドの一つです.
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
}
次にバインディングオブジェクトを作成します.
Fragmentは現在コンパイルされません.Fragmentをコンパイルするには,バインディングオブジェクトを作成し,Fragmentのビューをinflateさせる必要があります.
まず,onCreateView()
メソッド内で,変数binding
を作成します.
そしてFragmentのビューをinflateさせるには,DataBindingUtil.inflate()
メソッドを呼び出します.
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater, R.layout.fragment_title,container,false)
return binding.root
}
ここでメソッドには,4つのパラメーターを渡します.
・inflater: バインディングレイアウトをinflateさせるため
・R.layout.fragment_title: 展開するレイアウトのXMLレイアウトリソースを指定
・container: 親のViewGroupのために指定
・false: attachToParentのために指定
変数binding
に,DataBindingUtil.inflate()
を割り当てます.
戻り値はbinding.root
を返します.
3. Fragmentをメインレイアウトファイルに追加する.
ここでは,FragmentのTitleFragment.kt
を,レイアウトファイルのactivity_main.xml
に追加します.
LinearLayout要素内に,fragment
要素を追加し,idを指定します.
Fragmentのnameを,Fragmentクラスのフルパスに設定します.
(ここではcom.example.android.navigation.TitleFragment
とします.)
そしてレイアウトファイルactivity_main.xml
はこのようになります.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/titleFragment"
android:name="com.example.android.navigation.TitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</layout>
アプリを実行して,Fragmentがメイン画面に追加せれたことを確認してください.
まとめ
・Fragmentには独自のライフサイクルがあり,独自の入力イベントを受け取る
・Fragmentのレイアウトを定義するには,XMLレイアウトでタグを使う
・Fragmentは,アクティビティの実行中に追加や削除ができる
・inflateは,onCreateView()内で,Fragmentのレイアウトを拡張します
クイズ
1問目
FragmentとActivityの違いはなんですか? 正しいものをすべて選んでください
・Fragmentを作成するとき,onCreateView()
メソッドのレイアウトをinflateします.Activityを作成するときonCreateView
メソッドでレイアウトをinflateします.
・Activiyには独自のレイアウトがありますが,Fragmentには独自のレイアウトを設定できません.
・Activityには独自のライフサイクルがありますが,Fragmentにはありません.
・FragmentまたはActivityのいずれかのレイアウトをinflateする場合,レイアウトをとしてR.layout.layoutname
を参照する.
2問目
Fragmentに関する次の記述のうち,正しいものをすべて選んでください
・Fragmentを複数のActivityで使用できる
・複数のFragmentを一つのActivityに含めることができる
・FragmentをKotlinクラスで定義すると,自動的にFragmentはactivity_main.xml
のレイアウトファイルに追加される
・Fragmentを挿入する場所は,タグを使って定義する
クイズの正解
1問目
・Fragmentを作成するとき,onCreateView()
メソッドのレイアウトをinflateします.Activityを作成するときonCreateView
メソッドでレイアウトをinflateします.
・Activityには独自のライフサイクルがありますが,Fragmentにはありません.
・FragmentまたはActivityのいずれかのレイアウトをinflateする場合,レイアウトをとしてR.layout.layoutname
を参照する.
2問目
・Fragmentを複数のActivityで使用できる
・複数のFragmentを一つのActivityに含めることができる
・Fragmentを挿入する場所は,タグを使って定義する
ソースコード
Github:
https://github.com/syuheifujita/android-codeLab-fundamental-3-1
言葉の定義
・Fragment
アクティビティの動作やUIの一部のことをいいます.
参考資料
CodeLabs by Google
https://codelabs.developers.google.com/android-kotlin-fundamentals/
おわりに:他にもっとわかりやすい方法あれば教えてください
僕は「Codelabs」をやることでFragmentの使い方をまとめてみました.
もしかすると,情報が古かったり間違っていたり,他にもっとわかりやすい方法があるのかもしれません.
皆さんの中で上手にFragmentの使い方をまとめている方がいれば,ぜひ教えてください!
Twitterやコメントなどでお待ちしています.
質問でもお気軽に!