最近项目中做到一个帮助的功能，具体就是点击帮助按钮后，出现仿新浪客户端的帮助功能的效果，是使用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-Idea博客：Android中如何使用ViewPager实现类似laucher左右拖动效果源码
现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面，这样会获得很好的用户体验，能够帮助用户更好使用应用的某些功能。 资源文件例子中附带android-support-v4.jar
使用ViewPager实现高仿launcher拖动效果.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
主要为大家详细介绍了Android使用ViewPager实现类似laucher左右拖动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个自定义控件，实现ViewPager中拖动功能，并自定义相关控制事件
ViewPager是实现左右两个屏幕平滑地切换的一个类，它是Google提供的。 使用ViewPager首先需要引入android-support-v4.jar这个jar包。具体ViewPager的用法，这里不做介绍，自己从网上搜索吧！ 下面先看一下效果： ...
android viewpager指示器滑动标题以及标签管理拖动排序
Android ViewPager功能实例源码，实现手机左右滑屏切换效果，这种效果在Android手机中非常常见，界面UI设计必备的小技巧，本效果使用ViewPager实现，在安卓虚拟机上打开本源码后，可用鼠标来模拟拖动界面。
仿zaker效果的拖拽排序。可以动态设置列数，动态...项目地址：https://github.com/zzhouj/Android-DraggableGridViewPager 效果图： 如何使用：xml中创建<com.coco.draggablegridviewpager.DraggableGridViewPager>...
主要为大家详细介绍了Android原生ViewPager控件实现卡片翻动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ViewPager滑动跟随的指示器
简单实现 一条线 跟随 viewpager 滚动源代码，是一个很不错的Android源码，有兴趣的伙伴们抽时间可以看一下把
android 拖拽 gridview拖动+自动移位效果 zaker
这是一个仿窗帘效果 和 登录界面拖动效果，蛮适用的，下载即可放进项目中。
高仿微信图片浏览，支持放大，拖动，双击缩放，并可嵌套在viewPager中
Android中利用ViewPager实现视图切换 Android泡泡聊天界面的源码实现 android 实现EditText震动效果 Touch Index Bar （有锤子有真相） Android数据库最基础的一个例子（本人已测试，可以运行） 为launcher添加一个...
需要做一个仿淘宝客户端ViewPager滑动到最后一页，再拖动的时候跳到详情的功能，刚开始没什么思路，后来搜了一下，发现有好几种实现方法，最好的一种就是在ViewPager图片的后面再加一个view，然后滑动viewpager的...
6.13 SeekBar拖动控件的使用 6.14 ImageView的基本用法 6.15 ImageView实现适屏和裁剪图片 6.16 ImageView实现图片旋转和缩放 6.17 ImageView从网络上获取图像 6.18 DatePicker输入日期控件的使用 6.19 时间对话框的...
前言 最近在做项目的时候，有个需求就是实现自动轮播式的ViewPager，最直观的例子就是知乎日报顶部的ViewPager，它内部有着好几个子view，每...从上面的动态图可以看到，当我们手指拖动ViewPager的时候，下方的指示器随