Android之ViewPager讲解

 

ViewPager的功能提供界面切换的效果,我们可以定义一组VIEW,在当前界面中进行左右切换它们。

使用ViewPager时我们需要以下准备:

1、准备适配器:

 

<span style="font-size:18px;">PagerAdapter mPagerAdapter=new PagerAdapter() {
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0==arg1;
			}
			
			@Override
			public int getCount() {
				return viewList.size();
			}
			@Override
			public void destroyItem(View container, int position, Object object) {
				// TODO Auto-generated method stub
				((ViewPager)container).removeView(viewList.get(position));
			}
			@Override
			public Object instantiateItem(View container, int position) {
				((ViewPager)container).addView(viewList.get(position));
				return  viewList.get(position);
			}
		};</span>

 

 

 

 

 

 

看下 ViewPager的适配器继承于PagerAdapter基类,并且实现了以上几种方法:

 

判断是否由对象生产界面

 

<span style="font-size:18px;">public boolean isViewFromObject(View arg0, Object arg1){}</span>

 

 

获取当前需要显示的总View数

 

<span style="font-size:18px;">public int getCount() {}</span>

 


销毁position位置的界面

 

 

 

<span style="font-size:18px;">public void destroyItem(View container, int position, Object object) {}</span>

 


初试化position位置的界面

 

 

 

<span style="font-size:18px;">public Object instantiateItem(View container, int position) {}</span>

 


2、注册监听事件

 

 

 

<span style="font-size:18px;">public class PageChangeListener implements OnPageChangeListener{

			
		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}


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


		@Override
		public void onPageSelected(int arg0) {
			
		}
		
	}

</span>


实现的方法:

 

 

<span style="font-size:18px;">public void onPageScrollStateChanged(int arg0) {}</span>

 

 

这个方法是在状态改变的时候调用,arg0共有三种状态(0,1,2),当为0时,代表当前什么都没做;当为1时,代表正在滑动;当为2时,代表滑动完毕。

 

 

 

 

<span style="font-size:18px;">public void onPageScrolled(int arg0, float arg1, int arg2) {}</span>

这个方法是在滑动的时候调用,在滑动停止之前,一直保持调用,arg0代表当前点击滑动的页面,arg1代表页面偏移的百分比,arg2代表页面偏移的像素位置

 

 

 

<span style="font-size:18px;">public void onPageSelected(int arg0) {}</span>

这个方法是在跳转完后调用,arg0是当前选中的页面。

 

 

接下来我们实现微信中的登陆后的界面,效果如下:

        

    

 

login_anim.xml布局文件:

 

<span style="font-size:18px;"><FrameLayout 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/vp_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal" >

            <ImageView
                android:id="@+id/iv_page0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:src="@drawable/page_now" />
            <ImageView 
                android:id="@+id/iv_page1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:scaleType="matrix"
                android:src="@drawable/page"/>
            <ImageView 
                android:id="@+id/iv_page2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:scaleType="matrix"
                android:src="@drawable/page"/>
            <ImageView 
                android:id="@+id/iv_page3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:scaleType="matrix"
                android:src="@drawable/page"/>
            <ImageView 
                android:id="@+id/iv_page4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:scaleType="matrix"
                android:src="@drawable/page"/>
            <ImageView 
                android:id="@+id/iv_page5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:scaleType="matrix"
                android:src="@drawable/page"/>
        </LinearLayout>
    </LinearLayout>

</FrameLayout></span>


上面定义的几个ImageView就是效果图中的下方的小圆点,后面通过监听ViewPager的滑动事件来改变这些ImageView的图标,来强调当前显示的View。

 

 

<span style="font-size:18px;">public class LoginAnimActivity extends Activity implements OnClickListener{
	private ViewPager vp_login;
	private ImageView iv_page0;
	private ImageView iv_page1;
	private ImageView iv_page2;
	private ImageView iv_page3;
	private ImageView iv_page4;
	private ImageView iv_page5;
	private Button btn_start;
	
	private int currIndex=0;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.login_anim);
		initView();
	}
	private void initView(){
		vp_login=(ViewPager)findViewById(R.id.vp_login);</span>
<span style="font-size:18px;">		//注册监听事件
		vp_login.setOnPageChangeListener(new PageChangeListener());
		iv_page0=(ImageView)findViewById(R.id.iv_page0);
		iv_page1=(ImageView)findViewById(R.id.iv_page1);
		iv_page2=(ImageView)findViewById(R.id.iv_page2);
		iv_page3=(ImageView)findViewById(R.id.iv_page3);
		iv_page4=(ImageView)findViewById(R.id.iv_page4);
		iv_page5=(ImageView)findViewById(R.id.iv_page5);</span>
<span style="font-size:18px;">                //绑定适配器
		vp_login.setAdapter(inflaterView());		
	}
	/*
	 * 装载数据VIEW
	 */
	private PagerAdapter inflaterView(){</span>
<span style="font-size:18px;">                LayoutInflater layoutInflater=LayoutInflater.from(this);
		View view1=layoutInflater.inflate(R.layout.login_anim1, null);//这些view就是我们需要显示的
		View view2=layoutInflater.inflate(R.layout.login_anim2, null);
		View view3=layoutInflater.inflate(R.layout.login_anim3, null);
		View view4=layoutInflater.inflate(R.layout.login_anim4, null);
		View view5=layoutInflater.inflate(R.layout.login_anim5, null);
		View view6=layoutInflater.inflate(R.layout.login_anim6, null);
		btn_start=(Button)view6.findViewById(R.id.btn_start);
		final ArrayList<View> viewList=new ArrayList<View>();//将这些View放入集合中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		viewList.add(view4);
		viewList.add(view5);
		viewList.add(view6);
		PagerAdapter mPagerAdapter=new PagerAdapter() {//装载这些View
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0==arg1;
			}
			
			@Override
			public int getCount() {
				return viewList.size();
			}
			@Override
			public void destroyItem(View container, int position, Object object) {
				// TODO Auto-generated method stub
				((ViewPager)container).removeView(viewList.get(position));
			}
			@Override
			public Object instantiateItem(View container, int position) {
				((ViewPager)container).addView(viewList.get(position));
				return  viewList.get(position);
			}
		};
		return mPagerAdapter;
	}
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_start://开始
			
			break;

		default:
			break;
		}
	}
	
	public class PageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}

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

		@Override
		public void onPageSelected(int arg0) {
			switch (arg0) {
			case 0:
				iv_page0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page));
				break;
			case 1:
				iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page0.setImageDrawable(getResources().getDrawable(R.drawable.page));
				iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page));
				break;
			case 2:
				iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page));
				iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page));
				break;
			case 3:
				iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page));
				iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page));				
				break;
			case 4:
				iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page));
				iv_page5.setImageDrawable(getResources().getDrawable(R.drawable.page));
				break;
			case 5:
				iv_page5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
				iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page));
				break;
			default:
				break;
			}
		}
		
	}
	
}</span>

 


login_anim1布局文件:

 

 

 

<span style="font-size:18px;"><?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:background="@drawable/w01" >
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="\n高仿\n是学习开发的最佳途径"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff"/>
</RelativeLayout></span>


login_anim2布局文件:

 

 

 

 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:background="@drawable/w02" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
  >
    
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center" 
        android:text="\n按住就能说话\n聊天是如此简单轻松" 
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff" 
        />
</RelativeLayout></span>

 

 

 

 

 

login_anim3布局文件:

 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:background="@drawable/w03" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
  >
    
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center" 
         
        android:text="透过视频聊天\n你甚至可以和朋友们\n面对面沟通" 
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff" 
        />
</RelativeLayout></span>

 

 

 

 

 

login_anim4布局文件:

 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:background="@drawable/w04" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
  >
    
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center" 
        android:text="摇一摇手机\n或者看看附近的人\n认识更多的朋友" 
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff" 
        />
</RelativeLayout></span>

 

 

 

 

 

login_anim5布局文件:

 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:background="@drawable/w05" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
  >
    
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center" 
        android:text="\n你还可以透过朋友圈\n和朋友们分享彼此的生活" 
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff" 
        />
</RelativeLayout></span>

 

 

 

 

 

login_anim6布局文件:

 

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:background="@drawable/w01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
  >
    
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center"         
        android:text=" \n \nOK,见证高仿的威力吧" 
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:textSize="22sp"
        android:textColor="#fff" 
        />
    <Button
              android:id="@+id/btn_start"
              android:layout_width="120dp"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"
              android:layout_centerHorizontal="true"
              android:layout_marginBottom="120dp"
              android:text="开始"
              android:textSize="18sp"
              android:textColor="#fff"
              android:background="@drawable/btn_style_green"              
			  android:layout_gravity="center_vertical"
              />
</RelativeLayout></span>

 

 

 

 

 

 

 

 

转载请注明出处:http://blog.csdn.net/hai_qing_xu_kong/article/details/42277073   情绪控_

 

 

 

 

 

 

©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页