Viewpager的竖直切换及其子fragment之间的点击跳转

目前公司正在开发一个新的项目，开发过程中，有这样一个需求：要求两个界面的竖直切换，并且点击页面中的一个按钮可以跳转到另外一个界面。（意思就是这个意思），看过之后，首先想到的就是Viewpager，但是Android系统提供的原生的VIewPager都是横向水平切换的，怎么变成竖直的呢？这个问题太好解决了，百度嘛！我看到好多道友都推荐大神JakeWharton写的一个实现可以任意改变Viewpager切换方向的DirectionalViewPager，github上的地址：https://github.com/JakeWharton/Android-DirectionalViewPager

当然JakeWharton无疑是个大神，上面也确实可以实现Viewpager的垂直滑动，但其实现在的Android studio中已经收录了Viewpager的垂直滚动的控件，名字就是VerticalViewpager，非常直观，和Viewpager用法完全一样，可以直接通过Library dependency进行搜索并添加依赖；下面我将用一个非常简单的子进行实现，并提供了两个fragment之间通过按钮实现界面跳转的逻辑，下面是实现demo：

1、MainActivity：

public class MainActivity extends FragmentActivity {    private VerticalViewPager mViewpager;    private List<Fragment>  mFragmentList = new ArrayList<>();    private MyFragment1 mFragment1;    private MyFragment2 mFragment2;    private FragmentManager mManager;    private MyAdapter mAdapter;    private FragmentSkipInterface mFragmentSkipInterface;    public void setFragmentSkipInterface(FragmentSkipInterface fragmentSkipInterface) {        mFragmentSkipInterface = fragmentSkipInterface;    }    /** Fragment跳转 */    public void skipToFragment(){        if(mFragmentSkipInterface != null){            mFragmentSkipInterface.gotoFragment(mViewpager);        }    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();    }    private void init() {        mViewpager = (VerticalViewPager) findViewById(viewpager);        mFragment1 = new MyFragment1();        mFragment2 = new MyFragment2();        mFragmentList.add(mFragment1);        mFragmentList.add(mFragment2);        mManager = getSupportFragmentManager();        mAdapter = new MyAdapter(mManager,mFragmentList);        mViewpager.setAdapter(mAdapter);        mAdapter.notifyDataSetChanged();    }    public interface FragmentSkipInterface {        /** ViewPager中子Fragment之间跳转的实现方法 */        void gotoFragment(VerticalViewPager viewPager);    }}

2、main.xml:

<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"    tools:context="com.example.administrator.myviewpager.MainActivity">    <fr.castorflex.android.verticalviewpager.VerticalViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

3、fragment1:

public class MyFragment1 extends Fragment implements View.OnClickListener {    private Button mBtn;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment1_layout,container,false);        return view;    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        mBtn = view.findViewById(R.id.btnClick);        mBtn.setOnClickListener(this);    }    @Override    public void onClick(View view) {        final MainActivity mainActivity = (MainActivity) getActivity();        mainActivity.setFragmentSkipInterface(new MainActivity.FragmentSkipInterface() {            @Override            public void gotoFragment(VerticalViewPager viewPager) {                /** 跳转到第二个页面的逻辑 */                viewPager.setCurrentItem(1);            }        });        /** 进行跳转 */        mainActivity.skipToFragment();    }}

4、

public class MyFragment2 extends Fragment implements View.OnClickListener {    private Button mButton;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment2_layout,container,false);        return view;    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        mButton = view.findViewById(R.id.button);        mButton.setOnClickListener(this);    }    @Override    public void onClick(View view) {        final MainActivity mainActivity = (MainActivity) getActivity();        mainActivity.setFragmentSkipInterface(new MainActivity.FragmentSkipInterface() {            @Override            public void gotoFragment(VerticalViewPager viewPager) {                /** 跳转到第一个页面的逻辑 */                viewPager.setCurrentItem(0);            }        });        /** 进行跳转 */        mainActivity.skipToFragment();    }}

fragment的布局很简单，就是一个TextView和一个Button，这里不再贴上去了，代码里都有注释，就不再阐述了，下面是效果图：

我的源码：Demo