Tab機能とBottom navigation機能を1画面で使いたい。

前提・実現したいこと

現在、android用のアプリを作りたいと思っていて、Bottom navigationで画面を切り替え、その切り替え後の画面によっては画面上部に設置したTabによってさらに画面を切り替えられるようにしたいと思っています。現在の認識として、Bottom navigationとTabのどちらも、タップされたときの処理はFragmentではできず、Activityでしかできないと思っています。そこで、どちらの要素もlayoutファイルに書いたものと、それを処理するコードを書いたActivityというセットを複数用意して実行してみたのですが、Bottom navigationをタップしたときの画面遷移が遅く、また、Title barが2つ表示されてしまい、予想していたものとは程遠い出来になっています。どうすれば、解決できるかお力添えをいただきたいです。
また、Activityでしかタップ時の処理はできないという認識についてもそれであっているのかご教授いただけますと幸いです。

現在のエミュレータ上での表示です。

該当のソースコード

Java
1public class MainActivity extends AppCompatActivity {
2
3    @Override
4    protected void onCreate(Bundle savedInstanceState) {
5        super.onCreate(savedInstanceState);
6       
7        setContentView(R.layout.activity_main);
8        BottomNavigationView navView = findViewById(R.id.nav_view);
9
10        navView.setOnNavigationItemSelectedListener(
11                new BottomNavigationView.OnNavigationItemSelectedListener() {
12                    @Override
13                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
14                        switch (item.getItemId()) {
15                            case R.id.navigation_home:
16
17                                break;
18                            case R.id.navigation_dashboard:
19                                Intent intent1=new Intent(MainActivity.this,DashActivity.class);
20                                startActivity(intent1);
21
22                                break;
23                            case R.id.navigation_notifications:
24                                Intent intent2=new Intent(MainActivity.this,NotificationsActivity.class);
25                                startActivity(intent2);
26                                break;
27                        }
28                        return false;
29                    }
30                });
31        //以下、Tab
32        SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
33        ViewPager viewPager = findViewById(R.id.view_pager);
34        viewPager.setAdapter(sectionsPagerAdapter);
35        TabLayout tabs = findViewById(R.id.tabs);
36        tabs.setupWithViewPager(viewPager);
37
38    }
39
40}
41

Java
1//activity_main.xml
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    android:id="@+id/container"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    android:paddingTop="?attr/actionBarSize">
8
9    <com.google.android.material.bottomnavigation.BottomNavigationView
10        android:id="@+id/nav_view"
11        android:layout_width="0dp"
12        android:layout_height="wrap_content"
13        android:layout_marginStart="0dp"
14        android:layout_marginEnd="0dp"
15        android:background="?android:attr/windowBackground"
16        app:layout_constraintBottom_toBottomOf="parent"
17        app:layout_constraintLeft_toLeftOf="parent"
18        app:layout_constraintRight_toRightOf="parent"
19        app:menu="@menu/bottom_nav_menu" />
20
21    <fragment
22        android:id="@+id/nav_host_fragment"
23        android:name="androidx.navigation.fragment.NavHostFragment"
24        android:layout_width="match_parent"
25        android:layout_height="match_parent"
26        app:defaultNavHost="true"
27        app:layout_constraintBottom_toTopOf="@id/nav_view"
28        app:layout_constraintLeft_toLeftOf="parent"
29        app:layout_constraintRight_toRightOf="parent"
30        app:layout_constraintTop_toTopOf="parent"
31        app:navGraph="@navigation/mobile_navigation" />
32
33    <com.google.android.material.appbar.AppBarLayout
34        android:layout_width="match_parent"
35        android:layout_height="wrap_content"
36        android:theme="@style/AppTheme.AppBarOverlay"
37        app:layout_constraintTop_toTopOf="parent">
38
39        <TextView
40            android:id="@+id/title"
41            android:layout_width="wrap_content"
42            android:layout_height="wrap_content"
43            android:gravity="center"
44            android:minHeight="?actionBarSize"
45            android:padding="@dimen/appbar_padding"
46            android:text="@string/app_name"
47            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
48
49        <com.google.android.material.tabs.TabLayout
50            android:id="@+id/tabs"
51            android:layout_width="match_parent"
52            android:layout_height="wrap_content"
53            android:background="?attr/colorPrimary" />
54    </com.google.android.material.appbar.AppBarLayout>
55
56    <androidx.viewpager.widget.ViewPager
57        android:id="@+id/view_pager"
58        android:layout_width="match_parent"
59        android:layout_height="match_parent"
60        app:layout_constraintTop_toTopOf="parent" />
61

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

jimbe

2020/04/28 04:33

> 現在の認識として、Bottom navigationとTabのどちらも、タップされたときの処理はFragmentではできず、Activityでしかできない > Activityでしかタップ時の処理はできないという認識についてもそれであっているのか「タップされた時の処理」とは「Fragment の入れ替え」でしょうか. 「Activity の遷移」でしょうか. また, それが Activity でしかできないという認識に至られたのはどのような情報からでしょうか.

s.sawai

2020/04/28 05:39

Bottom navigationに関しては、TabのシステムをFragmentでやることが可能ならば、Tab機能を持った「Fragmentの入れ替え」をすればよいと思うのですが、TabをActivityでしか機能させられないのであれば「Activityの遷移」になるのではないかと思っています。また、Tabに関しては、切り替えるものとしてListViewを考えており、これはFragmentで作成できると思っているため「Fragmentの入れ替え」でいいのかなと思っています。この認識に至ったのは、今回やろうとしている「TabとBottom navigationを両方使う」といったものは多くの人が実装を考えるのではないかと思い、自分なりに調べてみたのですが、どちらか一方を実装したものしか見つけることができず、もしかしたらこの2つは処理するActivityがどちらも必要となるため、同時に実装することは不可能なのではないかというふうに思ったからです。

行動規範の内容に同意します

回答1件

ベストアンサー

AndroidStudio にて新規プロジェクト作成で Select a Project Template 時に Bottom Navigation Activity を選び

自動生成された中から
ui.home.HomeFragment を

java
1  public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
2    homeViewModel = new ViewModelProvider(this).get(HomeViewModel.class);
3    View root = inflater.inflate(R.layout.fragment_home, container, false);
4    TabLayout tabLayout = (TabLayout) root.findViewById(R.id.tabs);
5    tabLayout.addTab(tabLayout.newTab().setText("tab 1"));
6    tabLayout.addTab(tabLayout.newTab().setText("tab 2"));
7    tabLayout.addTab(tabLayout.newTab().setText("tab 3"));
8    /*
9    final TextView textView = root.findViewById(R.id.text_home);
10    homeViewModel.getText().observe(getViewLifecycleOwner(), new Observer<String>() {
11      @Override
12      public void onChanged(@Nullable String s) {
13        textView.setText(s);
14      }
15    });
16    */
17    return root;
18  }

レイアウト fragment.home を

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".ui.home.HomeFragment">
8
9  <androidx.viewpager.widget.ViewPager
10      android:layout_width="match_parent"
11      android:layout_height="match_parent">
12
13    <com.google.android.material.tabs.TabLayout
14        android:id="@+id/tabs"
15        android:layout_width="match_parent"
16        android:layout_height="wrap_content"
17        android:layout_gravity="top" />
18
19  </androidx.viewpager.widget.ViewPager>
20
21</androidx.constraintlayout.widget.ConstraintLayout>

としますと

Home にだけタブが出るようになります.
後は Home でタブを選択した時に対応するクラグメントを fragment_home 内に表示するようにするだけに思いますが, 如何なのでしょうか.

#追記
例えばフラグメント3つ(HomeFragmentTab1/2/3)をタブで切り替えるとしますと, 以下のようになるかと思います.

java
1public class HomeFragment extends Fragment {
2  public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
3    return inflater.inflate(R.layout.fragment_home, container, false);
4  }
5  @Override
6  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
7    HomePagerAdapter adapter = new HomePagerAdapter(getChildFragmentManager());
8    ViewPager viewPager = view.findViewById(R.id.pager);
9    viewPager.setAdapter(adapter);
10
11    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
12    tabLayout.setupWithViewPager(viewPager);
13  }
14
15  public static class HomePagerAdapter extends FragmentPagerAdapter {
16    HomePagerAdapter(FragmentManager fm) {
17      super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
18    }
19    @Override
20    public int getCount() {
21      return 3;
22    }
23    @Override
24    public Fragment getItem(int i) {
25      switch(i) {
26        case 0: return new HomeFragmentTab1();
27        case 1: return new HomeFragmentTab2();
28        case 2: return new HomeFragmentTab3();
29      }
30      return null;
31    }
32    @Override
33    public CharSequence getPageTitle(int position) {
34      return "tab " + (position + 1);
35    }
36  }
37}

投稿2020/04/28 13:55

編集2020/04/29 15:06

jimbe

総合スコア13209

s.sawai

2020/04/29 14:10

この質問でお聞きしたかったTabとBottom navigationを同時に使用することについては解決したのですが、「タブを選択した時に対応するクラグメントを fragment_home 内に表示するようにするだけに思います」の部分がどのようにすればできるのかわかりません。TabをActivityで作ったときのSectionPagerAdapterのようなものを作るのでしょうか。