使用ViewPager能够得到不同view的切换效果

例如以下图,实现了四个view间的相互滑动

ViewPager 入门一_xmlViewPager 入门一_xml_02

一、新建项目,引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类,能够用来实现屏幕间的切换。

<LinearLayout 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"
android:orientation="vertical"
tools:context="com.skyfin.viewpage.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</android.support.v4.view.ViewPager>
</LinearLayout>


2、新建四个LinearLayout,用于滑动切换的视图
<?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:background="@color/antiquewhite"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2"
android:textSize="20dp"
android:textColor="@color/black"
/>
</LinearLayout>


3加载代码段将视图加载Viewpager中
import android.R.id;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

ViewPager ViewPager = null;
public String TAG = "tag";
ArrayList<View> viewContainter = new ArrayList<View>();
ArrayList<String> titleContainer = new ArrayList<String>();

@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager = (ViewPager)findViewById(R.id.pager);

View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
//viewpager開始加入view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);


ViewPager.setAdapter(new PagerAdapter() {

//viewpager中的组件数量
@Override
public int getCount() {
return viewContainter.size();
}
//滑动切换的时候销毁当前的组件
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
}
//每次滑动的时候生成的组件
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}

});

ViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrollStateChanged(int arg0) {
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {

}
});

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}


代码具体解释

1.定义一个ViewPager的容器

ViewPager ViewPager = null;
ArrayList<View> viewContainter = new ArrayList<View>();


2.初始化换View和ViewPager且加入到View的容器viewContainter中

View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
//viewpager開始加入view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);


3.加入到PagerAdapter中而且设置监听

ViewPager.setAdapter(new PagerAdapter() {

//viewpager中的组件数量
@Override
public int getCount() {
return viewContainter.size();
}
//滑动切换的时候销毁当前的组件
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
}
//每次滑动的时候生成的组件
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}

@Override
public CharSequence getPageTitle(int position) {
return titleContainer.get(position);
}
});

ViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrollStateChanged(int arg0) {
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {

}
});


PageAdapter 必须重写的四个函数:


  • boolean isViewFromObject(View arg0, Object arg1)
  • int getCount() 
  • void destroyItem(ViewGroup container, int position,Object object)
  • Object instantiateItem(ViewGroup container, int position)


先看看各个函数,我们上面都做了什么吧:





​​



  1. @Override  
  2. public int getCount() {  
  3.     // TODO Auto-generated method stub  
  4.     return viewList.size();  
  5. }  

getCount():返回要滑动的VIew的个数






​​



  1. @Override  
  2. public void destroyItem(ViewGroup container, int position,  
  3.         Object object) {  
  4.     // TODO Auto-generated method stub  
  5.     container.removeView(viewList.get(position));  
  6. }  

destroyItem():从当前container中删除指定位置(position)的View;



​​



  1. @Override  
  2. public Object instantiateItem(ViewGroup container, int position) {  
  3.     // TODO Auto-generated method stub  
  4.         container.addView(viewList.get(position));  
  5.           
  6.           
  7.         return viewList.get(position);  
  8.     }  
  9. };  

instantiateItem():做了两件事,第一:将当前视图加入到container中,第二:返回当前View



​​



  1. @Override  
  2. public boolean isViewFromObject(View arg0, Object arg1) {  
  3.     // TODO Auto-generated method stub  
  4.     return arg0 == arg1;  
  5. }  

isViewFromObject():对于这个函数就先不做解说,大家眼下先知道它要这样重写即可了