最近项目中做到一个帮助的功能,具体就是点击帮助按钮后,出现仿新浪客户端的帮助功能的效果,是使用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文件中注册一下,运行起来,就会出现上述的效果图了。
另外,抱歉不能给出项目的附件下载,因为这个是我们内部的项目,我只能把这一效果单独拿出来,分享给大家。要是看过我别的文章的朋友就会知道,我一般是都会提供项目的附件的,所以希望大家多多谅解。