Android开发ViewPager+TabLayout详解（使用FragmentPagerAdapter和PagerAdapter两个Demo叙述）

在讲解之前首先看一下所要展示的效果：

在使用TabLayout这个控件之前，首先要在build.gradle添加下面这行依赖：

compile 'com.android.support:design:27.1.0'

1，在activity_main.xml布局文件中添加TabLayout和ViewPager两个控件：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.myactivitydemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_red_dark"
        app:tabIndicatorColor="@android:color/holo_red_dark"
        app:tabTextColor="@android:color/white"
        app:tabBackground="@android:color/holo_blue_light"
        >
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

2，定义一个MyViewPagerAdapter类继承PagerAdapter

public class MyViewPagerAdapter extends PagerAdapter {
    private List<View> myAdapterList;
    public MyViewPagerAdapter(List<View> myAdapterList){
        this.myAdapterList=myAdapterList;
    }
    @Override
    public int getCount() {
        return myAdapterList.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(myAdapterList.get(position));
        //return myAdapterList.get(position);
        return position;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==myAdapterList.get(Integer.parseInt(object.toString()));
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(myAdapterList.get(position));
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "布局";
    }
}

3，主布局的写法

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private List<View> myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化控件
        tabLayout=findViewById(R.id.tabLayout);
        viewPager=findViewById(R.id.viewPager);

        LayoutInflater layoutInflater=getLayoutInflater();
        View view1=layoutInflater.inflate(R.layout.layout_1,null);
        View view2=layoutInflater.inflate(R.layout.layout_2,null);
        View view3=layoutInflater.inflate(R.layout.layout_3,null);
        myView=new ArrayList<>();
        myView.add(view1);
        myView.add(view2);
        myView.add(view3);

        MyViewPagerAdapter my=new MyViewPagerAdapter(myView);
        viewPager.setAdapter(my);
        tabLayout.setupWithViewPager(viewPager);

    }
}

二，下面讲解FragmentPagerAdapter的使用方法。

1，activity_main.xml布局不改变

2，定义一个MyFragmentAdapter继承自FragmentPagerAdapter。

public class MyFragmentAdapter extends FragmentPagerAdapter {
    private List<MainActivity.PageModel> modelList;
    private MainActivity.PageModel pageModel;
    public MyFragmentAdapter(FragmentManager fm, List<MainActivity.PageModel> modelList) {
        super(fm);
        this.modelList=modelList;
    }

    @Override
    public Fragment getItem(int position) {
        pageModel=modelList.get(position);
        return MyFragment.newInstance(pageModel.sampleLayout);
    }

    @Override
    public int getCount() {
        return modelList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        pageModel= modelList.get(position);
        return pageModel.layoutTitle;
    }
}

3，写一个MyFragment继承自Fragment

public class MyFragment extends Fragment {
    private Context mContext;
    private int sampleLayout;

    public static Fragment newInstance(int sampleLayout){
        MyFragment myFragment=new MyFragment();
        Bundle bundle=new Bundle();
        bundle.putInt("sampleLayoutRes",sampleLayout);
        myFragment.setArguments(bundle);
        return myFragment;
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
        Bundle args=getArguments();
        this.sampleLayout=args.getInt("sampleLayoutRes");

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_page,container,false);
        ViewStub viewStub=view.findViewById(R.id.sampleStub);
        viewStub.setLayoutResource(sampleLayout);
        viewStub.inflate();
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
}

4，主布局的写法

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<PageModel> pageModelList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout=findViewById(R.id.tabLayout);
        viewPager=findViewById(R.id.viewPager);
        pageModelList=new ArrayList<>();
        pageModelList.add(new PageModel("布局1",R.layout.layout_1));
        pageModelList.add(new PageModel("布局2",R.layout.layout_2));
        pageModelList.add(new PageModel("布局3",R.layout.layout_3));

        MyFragmentAdapter fragmentPagerAdapter=new MyFragmentAdapter(getSupportFragmentManager(),pageModelList);
        viewPager.setAdapter(fragmentPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class PageModel{
        int sampleLayout;
        String layoutTitle;
        public PageModel(String layoutTitle,int sampleLayout){
            this.layoutTitle= layoutTitle;
            this.sampleLayout=sampleLayout;
        }
    }
}

5，fragment_page.xml布局的写法

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ViewStub
        android:id="@+id/sampleStub"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_gravity="center"/>
</LinearLayout>

其他布局非常简单，就不再一一写出。

以上就是ViewPager的使用方法。有需要源码的欢迎留言，留邮箱发给你们。