Android滑动效果的实现 ViewPager+Fragment

我们在使用手机软件的时候，经常会用到的一个功能是活动切换页面，今天我就给大家详细的介绍怎样去实现。
实现一个功能肯定要有界面，有界面肯定要有控件，下面我先来介绍用到的控件。
（一）ViewPager
ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左 右滑动，从而切换不同的View。
（二）Fragment
Fragment是Android3.0后引入的一个新的API，他出现的初衷是为了适应大屏幕的平板电脑， 当然现在他仍然是平板APP UI设计的宠儿，而且我们普通手机开发也会加入这个Fragment， 我们可以把他看成一个小型的Activity，又称Activity片段！

好了用到的控件已经说完了，在进入实战之前，先来看看效果图：

这个呢不光是可以滑动切换，同时单击上边的导航栏也可以切换到对应的页面，下面进行代码演示。

首先先来看看项目结构

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="android.medal.cn.hd.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/hd_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/hd_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

fragment1.xml——-fragment4.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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="第一个页面"
        android:textAlignment="center"
        android:textSize="50sp" />
</LinearLayout>

因为fragment都是一样的所以不全贴出来了

MainActivity

public class MainActivity extends AppCompatActivity {

    private TabLayout fragmentTabHost;
    private ViewPager personViewpager;

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

    protected void initView() {
        fragmentTabHost = (TabLayout) findViewById(R.id.hd_tablayout);
        personViewpager = (ViewPager) findViewById(R.id.hd_viewPager);
    }

    protected void initData() {
        List<Fragment> fragments=new ArrayList<>();
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        fragments.add(new Fragment3());
        fragments.add(new Fragment4());
        MyAdapter adapter=new MyAdapter(getSupportFragmentManager(),fragments);
        personViewpager.setAdapter(adapter);
        fragmentTabHost.setupWithViewPager(personViewpager);
    }

    private class MyAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragments;
        private String[] mTabTitle={"第一个页面", "第二个页面", "第三个页面", "第四个页面"};

        public MyAdapter(FragmentManager fm, List<Fragment> fragments) {
            super(fm);
            this.fragments=fragments;
        }

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

        @Override
        public int getCount() {
            return 4;
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return mTabTitle[position];
        }
    }
}

注意 ：MyAdapter是MainActivity的一个内部类

fragment1——fragment4

public class Fragment1 extends BaseFragment{
    @Override
    protected void initView(View view) {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.fragment1;
    }

    @Override
    protected void initData() {

    }
}

因为fragment中并没有其他控件，也没有添加其他的功能，所以fragment中没有内容。

BaseFragment

public abstract class BaseFragment extends Fragment {
    protected Context mContext;
    private void getBaseContext(){this.mContext=getContext();}
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(getLayoutId(),null);
        getBaseContext();
        initView(view);
        return view;
    }
    protected abstract void initView(View view);
    protected abstract int getLayoutId();
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initData();
    }
    protected abstract void initData();
}

到这里呢，我已经将我全部的代码都帖出来了。运行一下你就可以实现上面的效果图。