模仿美团团购第一次使用时候的引导界面(有动画效果图)

实现方式: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>

 

 

 

你可能感兴趣的:(移动开发,Android开发,引导界面)