一、ViewPager简介
ViewPager 如其名所述,是负责翻页的一个 View。准确说是一个 ViewGrop,包含多个 View 页,在手指横向滑动屏幕时,其负责对 View 进行切换。为了生成这些 View 页,需要提供一个 PagerAdapter 来进行和数据绑定以及生成最终的 View 页。
二、实现三个view间的相互滑动
本例创建三个view,实现相互滑动,三个view分别为:one.xml、two.xml、three.xml。
三、新建项目,引入ViewPager控件
ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。
1.在主布局文件里加入
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> </RelativeLayout>
其中 <Android.support.v4.view.ViewPager /> 是ViewPager对应的组件,要将其放到想要滑动的位置。
2、新建三个layout,用于滑动切换的视图
我们的三个视图都非常简单,里面只添加了textView视图,当然大家可以往里添加各种控件,这里只是个DEMO,所以我这里仅仅使用textView区别不同layout布局。
布局代码分别如下:
one.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one"/> </LinearLayout>
two.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two"/> </LinearLayout>
three.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="three"/> </LinearLayout>
四、代码实战
1.主活动:
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;//对应的viewPager
private List<Fragment> mFragments;//view数组 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); OneFragment oneFragment = new OneFragment();
TwoFragment twoFragment = new TwoFragment();
ThreeFragment threeFragment = new ThreeFragment();
mFragments = new ArrayList<>();
mFragments.add(oneFragment);
mFragments.add(twoFragment);
mFragments.add(threeFragment); mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
} @Override
public int getCount() {
return mFragments.size();
}
});
}
}
设置mFragments = new ArrayList<>(),是要分页显示的View装入数组中 。
mFragments.add()方法是将实例化的三个view添加到list中。
ViewPager 通过 setAdapter() 来建立与 PagerAdapter 的联系。
PageAdapter 是 ViewPager 的支持者,ViewPager 将调用它来取得所需显示的页,而 PageAdapter 也会在数据变化时,通知 ViewPager。这个类也是FragmentPagerAdapter 以及 FragmentStatePagerAdapter 的基类。如果使用FragmentStatePagerAdapter类需要实现 getItem()和getCount() 方法。
如果使用PageAdapter至少需要实现 instantiateItem(), destroyItem(), getCount() 以及 isViewFromObject()四个方法。
2.加载one.xml视图的fragment(OneFragment):
public class OneFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.one,container,false);
}
}
3.加载two.xml视图的fragment(TwoFragment):
public class TwoFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.two,container,false);
}
}
4.加载three.xml视图的fragment(ThreeFragment):
public class ThreeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.three,container,false);
}
}