ViewPager、Fragment和TabLayout實現切頁效果

不會上傳動圖，心裡哭唧唧。但是是完整程式碼！新建一個專案，完全拷貝貼上就可以用！

1.佈局檔案

（1）activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="2dp"
        app:tabBackground="@android:color/white"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_orange_dark">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

（2）新建fragment1.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:gravity="center"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_fragment1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Fragment1"
        android:textSize="20sp"/>
</LinearLayout>

2.新建MyPagerAdapter

public class MyPagerAdapter extends FragmentPagerAdapter {
    private Context context;
    private List<Fragment> fragments;
    private List<String> strings;
    public MyPagerAdapter(List<Fragment> fragments, List<String> strings, FragmentManager fragmentManager, Context context){
        super(fragmentManager);
        this.strings = strings;
        this.context = context;
        this.fragments = fragments;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments != null ? fragments.size() : 0;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return strings.get(position);
    }

}

3.新建4個Fragment，這裡的個數由自己需要所定。這裡我只建了Fragment1，其他幾個只需把Fragment1改成Fragment2、Fragment3……

public class Fragment1 extends Fragment {
        private View rootView;

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            rootView = (View) inflater.inflate(R.layout.fragment1, container, false);

            return rootView;
        }

}

4.MainActivity.java

public class MainActivity extends BaseActivity {
    ViewPager viewPager;
    TabLayout tabLayout;

    private List<String> strings = new ArrayList<String>();;
    private List<Fragment> fragments = new ArrayList<Fragment>();;
    private MyPagerAdapter myPagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager=findViewById(R.id.view_pager);
        tabLayout=findViewById(R.id.tab_layout);
        initView();
    }

    private void initView(){
        viewPager.setAdapter(new MyPagerAdapter(fragments,strings,
                getSupportFragmentManager(),this));
        tabLayout.setupWithViewPager(viewPager);
        Fragment1 fragment1 = new Fragment1();
        fragments.add(fragment1);
        strings.add("頁面1");
        Fragment2 fragment2 = new Fragment2();
        fragments.add(fragment2);
        strings.add("頁面2");
        Fragment3 fragment3 = new Fragment3();
        fragments.add(fragment3);
        strings.add("頁面3");
        Fragment4 fragment4 = new Fragment4();
        fragments.add(fragment4);
        strings.add("頁面4");
        myPagerAdapter=new MyPagerAdapter(fragments,strings,getSupportFragmentManager(),MainActivity.this);
        viewPager.setAdapter(myPagerAdapter);
    }

}

注：在build.gradle裡配置

implementation 'com.android.support:design:28.0.0'

5.新建menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.strivestay.tablayoutdemo.MainActivity">
    <item android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

6.dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="appbar_padding_top">8dp</dimen>
</resources>