模仿美团团购第一次使用时候的引导界面(有动画效果图)
实现方式:ViewPager+PopupWindow。背景是透明的，先看下效果
进入程序后会以动画的方式弹出引导界面,可以左右横向拖动,在最后一张图片的立即体验上触摸后可以关闭引导,回到主界面
package com.zj.popupwindow2; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; 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.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.PopupWindow; import android.widget.TextView; import android.widget.Toast; /** * 用PopupWindow实现程序第一次安装的引导功能 * @author zj * 2012-5-25 上午11:04:11 */ public class MainActivity extends Activity { private ViewPager mViewPager; private ArrayList<View> mViews; private PopupWindow mPopupWindow; private View mPopupView; private MyHandler mMyHandler; private LinearLayout mIndicatorLayout; //用来装小圆点的Linearlayout private ArrayList<ImageView> mIndicatorList;//装小圆点的集合 private class MyHandler extends Handler{ @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 9: /* * 这里必须用handler来延迟启动不然会报异常 * android.view.WindowManager$BadTokenException: Unable to add window -- token null is not valid; is your activity running? */ mPopupWindow.setAnimationStyle(R.style.anim); mPopupWindow.showAtLocation(findViewById(R.id.txt_Activity), Gravity.CENTER, 0, 0); break; default: break; } } } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mMyHandler = new MyHandler(); mIndicatorList = new ArrayList<ImageView>(); iniView(); iniViewPager(); //初始化ViewPager new Thread(new Runnable() { @Override public void run() { mMyHandler.sendEmptyMessageDelayed(9, 200); } }).start(); } private void iniView() { mPopupView = getLayoutInflater().inflate(R.layout.popupwindow, null); mViewPager = (ViewPager)mPopupView.findViewById(R.id.pager); //包裹小圆点的LinearLayout mIndicatorLayout = (LinearLayout)mPopupView.findViewById(R.id.indicatorLayout); mPopupWindow = new PopupWindow( mPopupView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, true ); } private void iniViewPager() { View v1 = getLayoutInflater().inflate(R.layout.layout_1, null); View v2 = getLayoutInflater().inflate(R.layout.layout_2, null); View v3 = getLayoutInflater().inflate(R.layout.layout_3, null); View v4 = getLayoutInflater().inflate(R.layout.layout_4, null); View v5 = getLayoutInflater().inflate(R.layout.layout_5, null); View v6 = getLayoutInflater().inflate(R.layout.layout_6, null); View v7 = getLayoutInflater().inflate(R.layout.layout_7, null); ImageView img1 = (ImageView)v1.findViewById(R.id.img); ImageView img2 = (ImageView)v2.findViewById(R.id.img2); ImageView img3 = (ImageView)v3.findViewById(R.id.img3); ImageView img4 = (ImageView)v4.findViewById(R.id.img4); ImageView img5 = (ImageView)v5.findViewById(R.id.img5); ImageView img6 = (ImageView)v6.findViewById(R.id.img6); ImageView img7 = (ImageView)v7.findViewById(R.id.img7); //设置图片透明度 img1.setAlpha(180); img2.setAlpha(180); img3.setAlpha(180); img4.setAlpha(180); img5.setAlpha(180); img6.setAlpha(180); img7.setAlpha(180); //点击最后一张图片的立即体验后退出 TextView start = (TextView)v7.findViewById(R.id.txt_start); start.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "开始体验", 1).show(); mPopupWindow.dismiss(); } }); mViews = new ArrayList<View>(); mViews.add(v1); mViews.add(v2); mViews.add(v3); mViews.add(v4); mViews.add(v5); mViews.add(v6); mViews.add(v7); //设置适配器 mViewPager.setAdapter(new MyPagerAdapter()); //设置监听事件 mViewPager.setOnPageChangeListener(new MyPagerChangeListener()); //加入小圆点 for (int i = 0; i < mViews.size(); i++) { ImageView indicator = new ImageView(this); if (i == 0) { indicator.setImageResource(R.drawable.page_indicator_focused); }else { indicator.setImageResource(R.drawable.page_indicator); } indicator.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); mIndicatorLayout.addView(indicator); //把小圆点图片存入集合,好让切换图案片的时候动态改变小圆点背景 mIndicatorList.add(indicator); } } private class MyPagerAdapter extends PagerAdapter{ @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager)arg0).removeView(mViews.get(arg1)); } @Override public void finishUpdate(View arg0) { } @Override public int getCount() { return mViews.size(); } @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager)arg0).addView(mViews.get(arg1)); return mViews.get(arg1); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { for (int i = 0; i < mViews.size(); i++) { } } @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } } private class MyPagerChangeListener implements OnPageChangeListener{ @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int position) { Log.i("zj", "onPagerChange position="+position); for (int i = 0; i < mViews.size(); i++) { mIndicatorList.get(i).setImageResource(R.drawable.page_indicator); } mIndicatorList.get(position).setImageResource(R.drawable.page_indicator_focused); } } }
XML：
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/linearLayout" > <TextView android:id="@+id/txt_Activity" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Activity" android:textSize="80sp" android:gravity="center" android:background="#33b5e5" android:textColor="#ffffff" /> </LinearLayout>
popupwindow.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#a0000000"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/pager" /> <LinearLayout android:id="@+id/indicatorLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" /> </RelativeLayout>
