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];    }

这样就实现了。


效果图：