一起学android之ViewPager讲解（11）

时间：2014-12-31 01:09:58 阅读：276 评论：0 收藏：0 [点我收藏+]

标签：android viewpager android开发 android教程微信

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 情绪控_

一起学android之ViewPager讲解（11）

标签：android viewpager android开发 android教程微信

原文地址：http://blog.csdn.net/hai_qing_xu_kong/article/details/42277073

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行