[Android] FragmentをHello Worldから始めるみる

FragmentはActivityと共に重要な機能を果たしていますが、いまいちわかりにくところがあります。最初に簡単なHello Worldを表示させるところから始めてみましょう。
　

Android Studio 3.1.2
Android 8.1.0

Fragment

　
AndroidではActivityは重要な機能を司っていますが、勢いなんでもかんでもActivityに機能を入れてしまって巨大なActivityが出来上がってしまいます。これではメンテナンスがやりにくいコードになってしまい、チームでの開発がより困難になります。
　
Fragmentは「断片」という意味ですが、ActivityのUI部分を肩代わりでき、いくつものFragmentをActivityから開いたり閉じたりできます。
　
また、複数のActivityから使いまわすような再利用も可能です。
　

　
Activityには以下の役割があります

Viewの生成と制御
リソースを取得したりするContextのタスク
コンポーネントとしてIntentを受け取る

ActivityにはActivityにしか出来ない事を担わせて、View生成と制御の部分はFragmentに任せようということです。
　

目次
1.タグ<fragment>
2.サンプルコード

タグ<fragment>

　
レイアウトに <fragment> タグを使ってHello Worldを表示させます。
ただしこの方法は静的なので拡張性があまりないのですが、Fragmentを理解するためにあえて簡単なところから始めます。
　
<fragment>
MainActivityからsetContentViewで呼び出すレイアウトです。例としてLinearLayoutを使っていますが、他のレイアウトでも可能です。ボタンなどのViewと同じようにタグを設定し、
nameには「パッケージ名+Fragmentクラス名」を入れます。
　

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.testfragmentsimple.TestFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<fragment

android:id="@+id/fragment"

android:name="com.example.testfragmentsimple.TestFragment"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

　
Fragment クラス:
次にFramentを継承したクラスを作成します。
　

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TestFragment extends Fragment {

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_main,
                container, false);
    }
}

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class TestFragment extends Fragment {

@Override

public View onCreateView(@NonNull LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_main,

container, false);

}

　
android.support.v4.app.Fragment:
Fragmentを継承するとimportすべきクラスの候補が２つ出てきます。
　

import android.app.Fragment;
// サポートライブラリ
import android.support.v4.app.Fragment;

import android.app.Fragment;

// サポートライブラリ

import android.support.v4.app.Fragment;

　
サポートライブラリを使った方がAndroidバージョンが低いものもカバーできますので、基本的にはこちらがいいでしょう。ただし、その分ファイルサイズが大きくなります。
　
onCeateView():
ActivityのようにFragmentにもライフサイクルがありViewを生成するタイミングで呼ばれるのが onCeateView() です。onCreateViewで渡される LayoutInfrater にFragmentのレイアウトをinflate(挿入)して返します。
　
Fragment のレイアウト:
レイアウトにTextViewを入れて”Hellow World”の文字列をリソースから呼びます。
　

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<TextView

android:text="@string/hello_world"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

サンプルコード

　
以上をまとめて、分かりやすいように背景色を設定してみます。

MainActivityは特に何も追加しません。
MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

　
MainActivityで呼んでいるレイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="10dp"
    android:background="#dfe"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.testfragmentsimple.TestFragment"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

android:padding="10dp"

android:background="#dfe"

tools:context=".MainActivity">

<fragment

android:id="@+id/fragment"

android:name="com.example.testfragmentsimple.TestFragment"

android:layout_width="match_parent"

android:layout_height="300dp" />

</LinearLayout>

　
Fragmentのクラスです。
TestFragment.java

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TestFragment extends Fragment {

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_main,
                container, false);
    }
}

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class TestFragment extends Fragment {

@Override

public View onCreateView(@NonNull LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_main,

container, false);

}

　
Fragmentが呼んでいるレイアウト
fragment_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ddd"
    android:orientation="vertical"
    android:gravity="center" >

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:textSize="20sp"
        android:textColor="#00f"
        android:layout_height="wrap_content"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ddd"

android:orientation="vertical"

android:gravity="center" >

<TextView

android:text="@string/hello_world"

android:layout_width="wrap_content"

android:textSize="20sp"

android:textColor="#00f"

android:layout_height="wrap_content"/>

</LinearLayout>

　
リソース
strings.xml

<resources>
    ...
    <string name="hello_world">Hello World</string>
</resources>

...

<string name="hello_world">Hello World</string>

</resources>

　
これで実行させてみるとこのようになります。
　

　
　
関連ページ：

　
Ref:
フラグメント | Android Developers