android中使用ViewPager实现图片左右拖动

jackjobs

浏览: 553880 次
性别:
来自: 武汉

最近访客更多访客>>

钱小白

yzjd19900517

szjszj

suncathay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

android

android ViewPager 实现图片左右滑动

最近项目中做到一个帮助的功能，具体就是点击帮助按钮后，出现仿新浪客户端的帮助功能的效果，是使用android的ViewPager来完成的，上网大概查了下相关的博客和资料，效果都不是太理想，估摸着这个又很常用，所以记录下来，希望能帮助到正在学习它的同学，也以免自己今后忘记了，算是一举两得吧。具体效果图如下：

图一

图二

图三

图四

首先我贴上这个项目的结构图：

图五

第一步，展示图一布局，编辑activity_main.xml，代码如下(jar包什么的，我就不多说了，工程图中libs有标出了，没有自己去下载个，不然我下面也有附件提供下载)：

<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" 
    android:background="@drawable/tip2_2"
    >
 <LinearLayout
     	android:layout_alignParentBottom="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:clickable="false"
        android:focusable="false"
      >
         <Button  
            android:id="@+id/btn_my_menu"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:gravity="center"  
            android:layout_weight="1"  
            android:paddingTop="12dp"  
            android:paddingBottom="12dp"  
            android:textSize="15sp"  
            android:textColor="@android:color/white"
            android:background="@drawable/my3_menu_button"
            android:textStyle="bold" 
            android:focusable="true"/>  
        
       
        <Button
            android:id="@+id/btn_help"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/help3_menu_button"
            android:gravity="center"
            android:paddingBottom="12dp"
            android:paddingTop="12dp"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:textStyle="bold" 
            android:focusable="true"/>
  
           
           <Button  
            android:id="@+id/btn_share"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:background="@drawable/share3_menu_button"
            android:gravity="center"  
            android:paddingTop="12dp"  
            android:paddingBottom="12dp"  
            android:layout_weight="1"  
            android:textSize="15sp"  
            android:textColor="@android:color/white"
            android:textStyle="bold"
            android:focusable="true" 
           />  
    </LinearLayout>

</RelativeLayout>

第二步，新建图五中的help.xml布局文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guidePages"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
       
    <RelativeLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:orientation="vertical" >
    <LinearLayout  
        android:id="@+id/viewGroup"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_marginBottom="30dp"  
        android:gravity="center_horizontal"  
        android:orientation="horizontal" >  
    </LinearLayout>  
    </RelativeLayout>

</FrameLayout>

第三步，新建图五中的item01-item06.xml，因为它们是用来放置你左右滑动的图片的，如效果图我们可以看到，我的这个滑动，是支持六张图片的左右滑动的，所以这边儿我新建了item01-item06.xml，因为每个item.xml布局除了图片不一样，其他都一样，所以这里我就偷下懒，放item01.xml的代码，其余的几个xml大家自己复制item01后，改变下图片就行了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <ImageView  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:background="@drawable/feature_guide_1" >  
    </ImageView>
    
</LinearLayout>

第四步：新建图五中的helpActivity.java，代码如下：

package com.test.citylist;


import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;



public class HelpActivity extends Activity {
	 private ViewPager viewPager;  
	 private ArrayList<View> pageViews;  
	 private ViewGroup main, group;  
	 private ImageView imageView;  
	 private ImageView[] imageViews; 
     private int currPage =0;
     private GestureDetector gestureDetector;
	 /** Called when the activity is first created. */
	    @Override
	    public void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
	        
	        gestureDetector = new GestureDetector(new MyOnGestureListener());
	        
	        LayoutInflater inflater = getLayoutInflater();  
	        pageViews = new ArrayList<View>();  
	        pageViews.add(inflater.inflate(R.layout.item01, null));  
	        pageViews.add(inflater.inflate(R.layout.item02, null));  
	        pageViews.add(inflater.inflate(R.layout.item03, null));  
	        pageViews.add(inflater.inflate(R.layout.item04, null));   
	        pageViews.add(inflater.inflate(R.layout.item05, null));   
	        pageViews.add(inflater.inflate(R.layout.item06, null));   
	  
	        imageViews = new ImageView[pageViews.size()];  
	        main = (ViewGroup)inflater.inflate(R.layout.help, null);  
	        
	        // group是R.layou.main中的负责包裹小圆点的LinearLayout.  
	        group = (ViewGroup)main.findViewById(R.id.viewGroup);  
	  
	        viewPager = (ViewPager)main.findViewById(R.id.guidePages);  
	  
	        for (int i = 0; i < pageViews.size(); i++) {  
	            imageView = new ImageView(HelpActivity.this);  
	            imageView.setLayoutParams(new LayoutParams(20,20));  
	            imageView.setPadding(20, 0, 20, 0);  
	            imageViews[i] = imageView;  
	            if (i == 0) {  
	                //默认选中第一张图片
	                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);  
	            } else {  
	                imageViews[i].setBackgroundResource(R.drawable.page_indicator);  
	            }  
	            group.addView(imageViews[i]);  
	        }  
	  
	        setContentView(main);  
	  
	        viewPager.setAdapter(new GuidePageAdapter());  
	        viewPager.setOnPageChangeListener(new GuidePageChangeListener());  
	    }
	    
	    /** 指引页面Adapter */
	    class GuidePageAdapter extends PagerAdapter {  
	    	  
	        @Override  
	        public int getCount() {  
	            return pageViews.size();  
	        }  
	  
	        @Override  
	        public boolean isViewFromObject(View arg0, Object arg1) {  
	            return arg0 == arg1;  
	        }  
	  
	        @Override  
	        public int getItemPosition(Object object) {  
	            // TODO Auto-generated method stub  
	            return super.getItemPosition(object);  
	        }  
	  
	        @Override  
	        public void destroyItem(View arg0, int arg1, Object arg2) {  
	        	Log.i("voice", arg1 + "----------------destroyItem");
	            ((ViewPager) arg0).removeView(pageViews.get(arg1));  
	        }  
	  
	        @Override  
	        public Object instantiateItem(View arg0, int arg1) {  
	            
	        	Log.i("voice", arg1 + "----------------instantiateItem");
	            ((ViewPager) arg0).addView(pageViews.get(arg1));  
	            return pageViews.get(arg1);  
	        }  
	  
	        @Override  
	        public void restoreState(Parcelable arg0, ClassLoader arg1) {  
	            // TODO Auto-generated method stub  
	  
	        }  
	  
	        @Override  
	        public Parcelable saveState() {  
	            // TODO Auto-generated method stub  
	            return null;  
	        }  
	  
	        @Override  
	        public void startUpdate(View arg0) {  
	            // TODO Auto-generated method stub  
	  
	        }  
	  
	        @Override  
	        public void finishUpdate(View arg0) {  
	            // TODO Auto-generated method stub  
	  
	        }  
	    } 
	    
	    /** 指引页面改监听器 */
	    class GuidePageChangeListener implements OnPageChangeListener {  
	  
	        @Override  
	        public void onPageScrollStateChanged(int arg0) {  
	        	//Log.i("voice", arg0+ "-------------onPageScrollStateChanged");
	        	
	        }  
	  
	        @Override  
	        public void onPageScrolled(int arg0, float arg1, int arg2) {  
	            // TODO Auto-geneLog.i("voice", arg0+ " " + arg1 +"  " + arg2  +"-------------onPageScrolled");
//	        	if(currPage==5){
//	        		HelpActivity.this.finish();
//	        	}rated method stub  
//	        	
	        }  
	  
	        @Override  
	        public void onPageSelected(int arg0) {  
	        	currPage = arg0;
	            for (int i = 0; i < imageViews.length; i++) {  
	                imageViews[arg0]  
	                        .setBackgroundResource(R.drawable.page_indicator_focused);  
	                if (arg0 != i) {  
	                    imageViews[i]  
	                            .setBackgroundResource(R.drawable.page_indicator);  
	                }  
	            }
	            
	         
	        }  
	  
	    }  
	    
//	    @Override
//	    public boolean onTouchEvent(MotionEvent event) {
//	    	// TODO Auto-generated method stub
//	    	return this.gestureDetector.onTouchEvent(event);
//	    }
	    
	    @Override
	    public boolean dispatchTouchEvent(MotionEvent ev) {
	           if(gestureDetector.onTouchEvent(ev)){
	        	    ev.setAction(MotionEvent.ACTION_CANCEL);
	           }
	           
	           return super.dispatchTouchEvent(ev);
	    }
	    
	    private class MyOnGestureListener extends SimpleOnGestureListener{
	    	@Override
	    	public boolean onFling(MotionEvent e1, MotionEvent e2,
	    			float velocityX, float velocityY) {
	    		Log.i("voice", e1.getX() + "　　　" + e2.getX());
	    		if(currPage==pageViews.size()-1 && (e1.getX() - e2.getX()>0)){
		    		HelpActivity.this.finish();
		    		return true;
	    		}
	    		return false;
	    	}
	    }
}

第五步，编辑MainActivity.java ，使其发生点击事件的时候，跳转到帮主页面，代码如下：

package com.test.citylist;


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

	private Button btn_help;
	
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        btn_help=(Button)findViewById(R.id.btn_help);
        btn_help.setOnClickListener(this);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.btn_help:
			Intent intent=new Intent();
			intent.setClass(MainActivity.this, HelpActivity.class);
			startActivity(intent);
			break;
		default:
			break;
		}
	}

    
}

最后，我们把HelpActivity在Mainfest文件中注册一下，运行起来，就会出现上述的效果图了。

另外，抱歉不能给出项目的附件下载，因为这个是我们内部的项目，我只能把这一效果单独拿出来，分享给大家。要是看过我别的文章的朋友就会知道，我一般是都会提供项目的附件的，所以希望大家多多谅解。