ViewPager滑动效果加导航效果

先放上最终效果图：

说到ViewPager，这个功能几乎在每个APP内都能见到，现在就让我们探究ViewPager。

那么我们该怎么使用，它和RecyclerView以及ListView一样也需要一个适配，这里我用FragmentPagerAdapter来讲述，其实还可以使用PagerAdapter。

有重要的一点是：
ViewPager最常配合使用Fragment，这是供应和管理每个页面的生命周期的便捷方式。并且谷歌推荐我们使用ViewPager和Fragment来实现滑动的效果。
所以这里我用Fragment来分析。
为了方便观察，我是用RecyclerView来显示数据。

创建Fragment：

public class FirstFragment extends Fragment {
    private List<String>mStringList = new ArrayList<>();
    private RecyclerView mRecyclerView;
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.first_fragmnet,container,false);
        initNum();
        mRecyclerView = (RecyclerView)view.findViewById(R.id.first_recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        MyAdapter myAdapter = new MyAdapter(mStringList);
        mRecyclerView.setAdapter(myAdapter);
        return view;
    }
    public void initNum(){
        for (int i=0;i<100;i++){
            mStringList.add("随机数："+Math.random());
        }
    }
}

自定义适配器MyAdapter.java:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private List<String> mStringList;
    static class ViewHolder extends RecyclerView.ViewHolder{
        TextView textView;
        public ViewHolder(View view){
            super(view);
            textView = (TextView) view.findViewById(R.id.item_num);
        }
    }
    public MyAdapter(List<String>stringList){
        mStringList = stringList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item,parent,false);
        final ViewHolder holder = new ViewHolder(view);
        return holder;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(mStringList.get(position));
    }
    @Override
    public int getItemCount() {
        return mStringList.size();
    }
}

自定义list_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="50dp">
    <TextView
        android:id="@+id/item_num"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

first_fragment.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.support.v7.widget.RecyclerView
        android:id="@+id/first_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</LinearLayout>

上述的东西都很常规，如果不懂可以去我的上一篇博客学习，这里就不再作解释了。

接下来才是重点：

新建MyFragmentPagerAdapter.java:

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        if (position == 1){
            return new FirstFragment();
        }else if (position == 2){
            return new FirstFragment();
        }
        return new FirstFragment();
    }
    @Override
    public int getCount() {
        return 3;
    }
}

getItem()：这个方法很容易明白，表示viewpager的位置，默认位置从0开始，
在哪个位置调用哪个视图。

getcount():记录多少个viewPager的视图个数。

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView(){
        mViewPager = (ViewPager)findViewById(R.id.view_pager);
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(myFragmentPagerAdapter);
    }
}

activity_main.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.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

最后附上效果图：

那么如何实现导航的效果呢？其实很简单。
这里使用TabLayout

修改activity_main.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">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

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

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1.0"/>

        </LinearLayout>

</LinearLayout>

修改MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    //添加
    private TabLayout mTabLayout;

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

        initView();

    }

    private void initView(){
        mViewPager = (ViewPager)findViewById(R.id.view_pager);
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(myFragmentPagerAdapter);

        //添加
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);

    }
}

最后在MyFragmentPagerAdapter.java里添加：

private String[] mTitles = new String[]{"首页", "发现", "排行榜"};
@Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }

这样就实现了。


效果图：