效果图:
实现了三个view间的相互滑动
第一个VIEW向第二个VIEW滑动 第二个VIEW向第三个VIEW滑动
一、新建项目,引入ViewPager控件
ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换.
1.在主布局文件里加入:
其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件,要将其放到想要滑动的位置
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> </RelativeLayout>
2.新建三个layout,用于滑动切换视图
布局代码分别如下:
layout_one.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#edf2e70e"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是第一个布局" android:textColor="#da0a34" android:textSize="18dip" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>
layout_two.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#2ce297"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是第二个布局" android:textSize="18dip" android:textColor="#be21d2" android:layout_gravity="center_horizontal" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="195dp" /> </RelativeLayout>
layout_three.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#2f8bc9"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是第三个布局" android:textSize="18dip" android:textColor="#ffffff" android:layout_gravity="center_horizontal" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="206dp" /> </RelativeLayout>
二.代码实战
package com.nyl.viewpager.activity.viewpager; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MainActivity extends Activity { //view1,view2,view3对应我们的三个layout,既layout_one.xml;layout_two.xml;layout_three.xml private View view1,view2,view3; //viewList是一个View数组,盛装上面三个View private List<View> viewList; //对应的viewPager private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //获取控件 viewPager = (ViewPager) findViewById(R.id.viewpager); LayoutInflater inflater = getLayoutInflater(); view1 = inflater.inflate(R.layout.layout_one,null); view2 = inflater.inflate(R.layout.layout_two,null); view3 = inflater.inflate(R.layout.layout_three,null); //将要分布显示的view装入数组中 viewList = new ArrayList<View>(); //将实例化的view1,view2,view3添加的viewList中 viewList.add(view1); viewList.add(view2); viewList.add(view3); PagerAdapter pagerAdapter = new PagerAdapter() { @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } //返回要滑动的View的个数 @Override public int getCount() { return viewList.size(); } //从当前container(容器)中删除指定位置(position)的View @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(viewList.get(position)); } //instantiateItem()做了两件事,第一:将当前视图添加到container中,第二:返回当前View @Override public Object instantiateItem(ViewGroup container, int position){ container.addView(viewList.get(position)); return viewList.get(position); } }; viewPager.setAdapter(pagerAdapter); } }