【Android】Fragmentを使う① - 単純なFragmentの実装 -

FragmentはActivityに設置するViewを機能ごとに小分けして、元来Activityに集中しがちだったロジックを細分化する方法です。

複数人で開発しているときはコンフリクトがおきにくいのでかなり便利です。

今回はFragmentの単純な例を実装してみました。

画面構成

	画面の構成としてはMainActivityの下に、2つのFragmentが紐付いている状態です。 2つのFragmentはそれぞれのレイアウト構成ファイルを読み込んでいます。

実装

ライブラリの追加

app/build.gradle

annotationProcessor "org.androidannotations:androidannotations:+"
implementation "org.androidannotations:androidannotations-api:+"

レイアウトファイル

layout/fragment_main1.xml

Fragment1で使用するレイアウトを定義します。

ここではTextView、EditText、Buttonの3つのViewを設置しています。

<?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="#ffa"
    android:padding="5dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:text="Fragment 1"
        android:layout_margin="6dp"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/editTest"
        android:text="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="6dp"
        android:padding="3dp"
        android:background="@drawable/frame"/>

    <Button
        android:id="@+id/buttonTest"
        android:text="TEST"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

layout/fragment_main2.xml

fragment_main1.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="#faf"
    android:padding="5dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:text="Fragment 2"
        android:layout_margin="6dp"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/editTest"
        android:text="2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="6dp"
        android:padding="3dp"
        android:background="@drawable/frame"/>

    <Button
        android:id="@+id/buttonTest"
        android:text="TEST"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

layout/activity_main.xml

MainActivityで読み込むレイアウトには、fragmentタグで設置します。

android:name要素にフラグメントクラスをパッケージ名から定義します。

このときクラス名には、suffix(アンダースコア)を付けて定義します。

<TextView
    android:id="@+id/mainText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left|top"
    android:layout_margin="5dp"
    android:text="Main View"
    android:textSize="20dp" />

<RelativeLayout
    android:id="@+id/rlFragment1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/mainText">
    <fragment
        android:id="@+id/fragment1"
        android:name="com.example.fragmenttest.Main1Fragment_"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rlFragment2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/rlFragment1">
    <fragment
    android:id="@+id/fragment2"
        android:name="com.example.fragmenttest.Main2Fragment_"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

MainActivityとFragment側の処理

MainActivity.java

MainActivityでは特別な処理はありません。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Main1Fragment.java

以下のようにアノテーションを使っレイアウトのViewとクラス・変数・メソッドを紐付けます。

Buttonクリックイベントなども@Clickアノテーションによって発生させることが可能です。

import android.support.v4.app.Fragment;
import org.androidannotations.annotations.Click;
import org.androidannotations.annotations.EFragment;
import org.androidannotations.annotations.ViewById;

@EFragment(R.layout.fragment_main1)
public class Main1Fragment extends Fragment {
    @ViewById
    TextView textView;

    @ViewById
    EditText editTest;

    @ViewById
    Button buttonTest;

    @Click
    void buttonTest() {
        Toast.makeText(getContext(), editTest.getText().toString(), Toast.LENGTH_SHORT).show();
    }
}

Main2Fragment.java

読み込むレウアウトファイルが違うだけでfragment_main1とほぼ同じ内容となっています。

import android.support.v4.app.Fragment;
import org.androidannotations.annotations.Click;
import org.androidannotations.annotations.EFragment;
import org.androidannotations.annotations.ViewById;

@EFragment(R.layout.fragment_main2)
public class Main1Fragment extends Fragment {
    @ViewById
    TextView textView;

    @ViewById
    EditText editTest;

    @ViewById
    Button buttonTest;

    @Click
    void buttonTest() {
        Toast.makeText(getContext(), editTest.getText().toString(), Toast.LENGTH_SHORT).show();
    }
}

実行結果

	実行結果でそれぞれ独立したFragmentが対応するレイアウトファイルのViewを読み込み、またそれを処理していることがわかります。

今回は最も単純な例でしたが、これを今後改修しながら色々な機能を見て行きたいと思います。

ちなみにここまでのソースコードを以下にコミットしてあります。

https://github.com/s-watanabe-apps/android-fragmenttest/tree/develop/20180830