`

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文件中注册一下，运行起来，就会出现上述的效果图了。

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

分享到：
| android调用webservice实现手机归属查询
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android中如何使用ViewPager实现类似laucher左右拖动效果源码

    现在，你已经具备了使用ViewPager实现类似启动器左右拖动效果的基础。在实际项目中，你可以根据需求调整代码，例如添加指示器、优化性能等。在提供的"GuideViewDemo"源码中，你可以找到更具体的实现细节和示例，这将...

    Android中使用ViewPager实现r左右拖动效果

    现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面，这样会获得很好的用户体验，能够帮助用户更好使用应用的某些功能。 资源文件例子中附带android-support-v4.jar

    安卓Launcher桌面相关-使用ViewPager实现高仿launcher拖动效果.rar

    ViewPager是Android SDK中的一个强大视图，主要用于展示多个页面并允许用户左右滑动切换这些页面。在实现Launcher桌面的滑动效果时，我们可以将每个主屏幕看作ViewPager的一个页面，通过滑动来切换不同的主屏幕。 1...

    使用ViewPager实现高仿launcher左右拖动效果

    ViewPager是Android开发中用于实现类似页面翻书效果的组件，它是Google提供的，包含在android-support-v4.jar库中。ViewPager主要用于在屏幕上左右滑动切换不同页面，常用于实现启动器(Launcher)、相册、指南页等...

    使用ViewPager实现高仿launcher拖动效果.rar

    "使用ViewPager实现高仿launcher拖动效果" 这个标题指出我们要讨论的是如何使用Android的ViewPager组件来创建一个类似手机启动器（launcher）的滑动界面。在Android开发中，ViewPager通常用于在多个页面之间进行平滑...

    Android-一个自定义控件实现ViewPager中拖动功能并自定义相关控制事件

    本文将深入探讨如何实现一个自定义控件，该控件扩展了ViewPager，增强了其拖动功能并提供了自定义的控制事件。这个自定义控件名为“DragInViewPager”，它适用于那些需要用户通过滑动来浏览多个页面的应用。 首先，...

    Android 利用ViewPager实现类微信的左右滑动效果

    在Android应用开发中，我们经常需要创建类似微信那样的滑动页面布局，用户可以通过左右滑动来切换不同的内容。这种效果通常通过使用`ViewPager`组件来实现。`ViewPager`是Android SDK中的一个强大视图，它允许用户在...

    ViewPager 实现gallery效果+无限循环滚动

    在Android开发中，ViewPager是一个非常重要的组件，常用于实现页面滑动切换的效果，类似于iOS中的UIPageViewController。在本教程中，我们将深入探讨如何利用ViewPager实现一个类似画廊（Gallery）的效果，并且让其...

    Android原生ViewPager控件实现卡片翻动效果

    本文将详细介绍如何使用Android原生ViewPager控件实现卡片翻动效果的步骤和代码实现。 一、了解ViewPager控件 ViewPager控件是Android的一个基本控件，用于实现屏幕之间的切换。它可以容纳多个屏幕，用户可以通过...

    android viewpager指示器滑动标题以及标签管理拖动排序

    在Android开发中，ViewPager是一个非常常用的组件，它用于展示多个Fragment或者View，并且可以左右滑动切换页面。在这个场景中，我们关注的是如何为ViewPager添加滑动标题指示器以及实现标签管理的拖动排序功能。 ...

    仿淘宝，京东商品详细图片的viewpager，点击图片放大，左右滑动

    在Android应用开发中，Viewpager是一个非常常用的组件，主要用于实现页面滑动的效果，常用于展示多个页面并可以平滑切换，比如在电商应用中展示商品的详细图片。本项目是针对"仿淘宝、京东商品详细图片的viewpager...

    Android学习记录使用Gallery实现炫丽的拖动效果

    在Android开发中，实现炫丽的拖动效果是提升用户体验的重要一环，特别是使用`Gallery`组件可以创建出类似轮播图或者选择器的效果。这篇博客"Android学习记录使用Gallery实现炫丽的拖动效果"深入探讨了如何利用`...

    ViewPager滑动跟随的指示器

    【标题】"ViewPager滑动跟随的指示器"指的是在Android应用开发中，使用ViewPager进行页面切换时，配合一种特殊的指示器来显示当前所处页面的一种交互设计。这种指示器会随着ViewPager的滑动动态更新，呈现出用户正在...

    Android 仿UC,墨迹天气左右拖动多屏幕显示效果源码.zip

    总的来说，"Android 仿UC,墨迹天气左右拖动多屏幕显示效果源码"是一个很好的学习资源，它涵盖了Android中关于ViewPager、Fragment和动画设计等多个关键知识点。通过阅读和分析源码，开发者可以更好地理解和掌握如何...

    viewPager的左右滑动事件

    在Android开发中，ViewPager是一个非常重要的组件，它用于展示可滑动的页面集合，通常用于实现类似TabLayout的效果，或者在应用中展示多个相关的视图。`ViewPager`的设计旨在提供流畅的滑动手势来切换页面，使用户...

    Android 仿UC,墨迹天气左右拖动多屏幕显示效果源码.rar

    这个压缩包文件"Android 仿UC,墨迹天气左右拖动多屏幕显示效果源码.rar"提供了一个实现这种效果的示例源代码，对于学习和理解Android滚动视图的实现非常有帮助。 首先，我们要了解这种效果的核心技术——ViewPager...

    Android ViewPager 手机左右滑屏切换效果.rar

    Android ViewPager功能实例源码，实现手机左右滑屏切换效果，这种效果在Android手机中非常常见，界面UI设计必备的小技巧，本效果使用ViewPager实现，在安卓虚拟机上打开本源码后，可用鼠标来模拟拖动界面。

Magicbox
Global site tag (gtag.js) - Google Analytics