簡単にTabLayoutとViewPagerを組み合わせる方法についてです。
完成イメージ
ソースコード
Main1Fragment.javaとMain1Fragment.java、fragment_main1.xmlとfragment_main2.xmlは、それぞれ同じ内容です。
MainActivity.java
import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { private CharSequence[] tabTitle = {"タブ1", "タブ2", "タブ3"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch (position) { case 0: return new Main1Fragment(); case 1: return new Main2Fragment(); case 2: return new Main1Fragment(); default: return null; } } @Override public CharSequence getPageTitle(int position) { return tabTitle[position]; } @Override public int getCount() { return tabTitle.length; } }; ViewPager viewPager = findViewById(R.id.viewPager); viewPager.setOffscreenPageLimit(tabTitle.length); viewPager.setAdapter(adapter); TabLayout tabLayout = findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager); } }
Main1Fragment.java
import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Main1Fragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_main1, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); } }
Main2Fragment.java
import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Main2Fragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_main2, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); } }
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" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
fragment_main1.xml
<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" tools:context=".Main1Fragment"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="fragment1" /> </LinearLayout>
fragment_main2.xml
<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" tools:context=".Main2Fragment"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="fragment2" /> </LinearLayout>
build.gradle
dependencies { // 以下を追加 implementation 'com.android.support:design:27.1.1' }
以上、簡単にTabLayoutとViewPagerを組み合わせる方法についてでした。