LoginSignup
2
0

More than 3 years have passed since last update.

【Android-Codelabs】10/36 〜 Fragmentの使い方 〜

Posted at

2019年にGoogleから,Web上でAndroidを学べるコースが提供されました.(Android Kotlin Fundamentals Course)
この記事では,そのコースを実際にやってみてアウトプットしてみるといった内容です.
何かツッコミなどあれば編集リクエストかコメントかTwitterでいただければ修正いたします

今回学ぶこと

・Fragmentをアプリに追加する方法

目指す成果物

今回は,このようなクイズアプリを作っていきます.

3-1-1.png

アプリの仕様
・左のスクリーンショットのタイトル画面で,ゲームを開始します.
・真ん中のスクリーンショットのゲーム画面で,解答を送信します.
・右のスクリーンショットの画面で,navigationドロワーメニューは,アプリの横からスライドすると出てきます.

ステップ

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

今回は,アプリに必要なテンプレートコードとFragmentクラスをダウンロードした状態から進めます.

  1. AndroidTrivia-Starter Android Studioプロジェクトをダウンロードします.
  2. Android Studioでプロジェクトを開き,アプリを実行します.アプリを開くと,アプリ名と空白の画面を表示する以外は何もしません.

3-1-2.png

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はこのようになります.

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がメイン画面に追加せれたことを確認してください.

3-1-3.png

まとめ

・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/
スクリーンショット 2020-02-05 4.07.59.png

おわりに:他にもっとわかりやすい方法あれば教えてください

僕は「Codelabs」をやることでFragmentの使い方をまとめてみました.

もしかすると,情報が古かったり間違っていたり,他にもっとわかりやすい方法があるのかもしれません.

皆さんの中で上手にFragmentの使い方をまとめている方がいれば,ぜひ教えてください!
Twitterやコメントなどでお待ちしています.
質問でもお気軽に!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0