【android】FragmentのListViewを選択で画面遷移する方法

はじめに

Android開発ではFragmentを使った画面の開発が常套手段ぽい。

なので今回はFragment上の画面にListViewを表示して、セルをタップしたら詳細画面用のFragmentを表示。詳細画面へ遷移後に戻るボタンでListViewの画面に戻る画面を作ってみた。

ファイル構成とそれぞれやることは以下

・MainActivity.java、activity_main.xml
ここのレイアウトに一覧画面ではfragment_mainを詳細画面ではfragment_detailを表示する。
起動時はMainFragmentをセットする。

・MainFragment.java、fragment_main.xml
ListViewにデータの表示とセルを選択されたときにDetailFragmentを呼ぶ。

・DetailFragment.java、fragment_detail.xml
詳細画面用

実装

メインアクティブティ

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/activity_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="xxx.samplefragment.MainActivity">
  <!-- ここにフラグメントをセット -->
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/main_fragment"></LinearLayout>

</RelativeLayout>

MainActivity.java

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

        // ListView表示用のフラグメントをセット
        MainFragment mainFragment = new MainFragment();
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.main_fragment,mainFragment);
        transaction.commit();
    }
}

ListView表示用フラグメント

fragment_main.xml

<FrameLayout 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="xxx.samplefragment.MainFragment">
  <ListView
      android:id="@+id/list_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"></ListView>
</FrameLayout>

MainFragment.java

public class MainFragment extends Fragment {
    public MainFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        return view;
    }
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        // ListViewに表示するデータ
        final ArrayList<String> items = new ArrayList<>();
        items.add("データ1");
        items.add("データ2");
        items.add("データ3");

        // ListViewをセット
        final ArrayAdapter adapter = new ArrayAdapter(this.getContext(), android.R.layout.simple_list_item_1, items);
        ListView listView = (ListView) view.findViewById(R.id.list_view);
        listView.setAdapter(adapter);
        // セルを選択されたら詳細画面フラグメント呼び出す
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                    // 詳細画面へ値を渡す
                    DetailFragment fragment = new DetailFragment();
                    Bundle bundle = new Bundle();
                    bundle.putInt("selected",position);
                    fragment.setArguments(bundle);
                    // 詳細画面を呼び出す
                    FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
                    FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.replace(R.id.main_fragment, fragment);
                    // 戻るボタンで戻ってこれるように
                    transaction.addToBackStack(null);
                    transaction.commit();
                }
            });
    }
}

詳細画面用フラグメント

fragment_detail.xml

<FrameLayout 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="xxx.samplefragment.DetailFragment">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

DetailFragment.java

public class DetailFragment extends Fragment {
    public DetailFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        Bundle args = getArguments();
        int selected = args.getInt("selected");

        View view = inflater.inflate(R.layout.fragment_detail, container, false);
        TextView textView = (TextView)view.findViewById(R.id.textView);
        textView.setText(String.valueOf(selected) + "番目が選択されました");
        return view;
    }
}

コードそのままだけでこんな感じでやりたいことができました。
以上です