ViewFlipper + GestureDetector 实现App首次使用显示引导页

最新推荐文章于 2017-01-11 10:06:26 发布

@Agony

最新推荐文章于 2017-01-11 10:06:26 发布

阅读量1.1k

点赞数

分类专栏： Android 文章标签： ViewFlipper Gesture 通过手势切换界面 App首次使用显示引导页图片Drawable数组资源引用

本文链接：https://blog.youkuaiyun.com/CrystalDestiny/article/details/42238543

版权

Android 专栏收录该内容

27 篇文章

订阅专栏

参考1：http://blog.youkuaiyun.com/panxiangxing/article/details/12391661

<span style="font-size:14px;">参考2：http://www.2cto.com/kf/201409/331829.html</span>

1.首先是启动界面

splash_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/viewcontentdescription"
        android:scaleType="centerCrop"
        android:src="@drawable/start" />

</LinearLayout>

SplashActivity.java

public class SplashActivity extends Activity{
	private boolean isFirst = false;  //Whether  the first time enter the app
	private final int SPLASH_DELAY_MILLILS = 3000;  //Delay time 
	private final String SHAREDPREFERENCES_NAME = "first_pre";
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// FullScreen and no title 
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.splash_layout);
		init(); 
	}

	
	private void init() {
		//record the times of the app have been used.
		SharedPreferences preferences = getSharedPreferences(SHAREDPREFERENCES_NAME, MODE_PRIVATE);
		//obtain  equivalents value,  default value is true if the value have not been written in.
		isFirst = preferences.getBoolean("isFirst", true);  
		
		new Handler().postDelayed(new Runnable(){  
            public void run(){  
            	if (!isFirst) {
            		// if not the first time to use
            		   goHome();   
				}else{
					//if the first time to use
					 goGuide();   
				}        
            } }, SPLASH_DELAY_MILLILS);
	}
	
	private void goHome() {
		Intent  intent = new Intent(SplashActivity.this,MainActivity.class);                   
		   startActivity(intent);  
		   finish();
	}  
	
	private void goGuide() {
		Intent  intent = new Intent(SplashActivity.this,GuideActivity.class);                   
		 startActivity(intent);  
		 finish();
	}
}

</pre><pre name="code" class="java"><strong><span style="font-size:18px;">2.引导界面</span></strong>

<strong><span style="font-size:18px;">   引导界面main布局 guide_layout.xml</span></strong>

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

	<ViewFlipper 
	    android:id="@+id/guide_images_viewflipper"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:inAnimation="@anim/left_in"
	    android:outAnimation="@anim/left_out"/>
	
	<!-- 底部指示栏 -->
    <LinearLayout
        android:id="@+id/dots_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="25.0dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:contentDescription="@string/viewcontentdescription"
            android:padding="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/dot_blue" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:contentDescription="@string/viewcontentdescription"
            android:padding="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/dot_white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:contentDescription="@string/viewcontentdescription"
            android:padding="5dp"
            android:scaleType="centerCrop"
            android:src="@drawable/dot_white" />
    </LinearLayout>

</RelativeLayout>

</pre><pre name="code" class="html"><strong><span style="font-size:18px;">引导界面item布局（这里每个界面都是显示一张图片）:</span></strong>

  guide_page_layout.xml

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/viewcontentdescription"
    android:scaleType="centerCrop"
    />

</pre><pre name="code" class="java"><strong><span style="font-size:18px;">GuideActivity.java</span></strong>

<pre name="code" class="java">public class GuideActivity extends Activity implements
		android.view.GestureDetector.OnGestureListener {

	private ViewFlipper viewFlipper;
	private GestureDetector gestureDetector;
	private LinearLayout dotsGroup;
	private ImageView[] dots;
	private final String SHAREDPREFERENCES_NAME = "first_pre";
	private static final int FLING_MIN_DISTANCE = 100;
	private static final int FLING_MIN_VELOCITY = 200;
	private int[] guideImages;
	private int[] dotImages;
	private int currentIndex;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.guide_layout);
		init();
	}

	private void init() {
		viewFlipper = (ViewFlipper) findViewById(R.id.guide_images_viewflipper);
		gestureDetector = new GestureDetector(this, this);
		guideImages = <strong><span style="color:#ff0000;">ArrayResourceUtils</span></strong>.getDrawableArray(this,
				R.array.guide_images, 3);
		dotImages = ArrayResourceUtils.getDrawableArray(this,
				R.array.dot_images, 2);

		for (int i = 0; i < guideImages.length; i++) {
			viewFlipper.addView(createGuideView(guideImages[i]));
		}
		currentIndex = 0;
		initDots();
	}

	/**
	 *  Create the guide view to show
	 * @param resId    -- the image resource Id
	 * @return imageview
	 */
	@SuppressLint("InflateParams")
	private ImageView createGuideView(int resId) {
		ImageView iv = (ImageView) LayoutInflater.from(this).inflate(
				R.layout.guide_page_layout, null);
		iv.setImageResource(resId);
		return iv;
	}

	// Initialize the dots of the bottom
	private void initDots() {
		dotsGroup = (LinearLayout) findViewById(R.id.dots_group);
		dots = new ImageView[guideImages.length];
		for (int i = 0; i < guideImages.length; i++) {
			dots[i] = (ImageView) dotsGroup.getChildAt(i);
		}
	}

	// Set the dot of the bottom
	private void setCurrentDot() {
		if (currentIndex < 0 || currentIndex > (guideImages.length - 1)) {
			return;
		}
		for (int i = 0; i < guideImages.length; i++) {
			dots[i].setImageResource(dotImages[1]);
		}
		dots[currentIndex].setImageResource(dotImages[0]);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// Let the gestureDetector handle touch events generally, it will be
		// very trouble if you do these by yourself.
		return gestureDetector.onTouchEvent(event);
	}
	
	//set has guided,then will not guide again
	private void setGuided() {
        SharedPreferences preferences = getSharedPreferences(
                SHAREDPREFERENCES_NAME, Context.MODE_PRIVATE);
        Editor editor = preferences.edit();
        editor.putBoolean("isFirst", false);
        editor.commit();
    }

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		if ((e1.getX() - e2.getX()) > FLING_MIN_DISTANCE
				&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {
			 // slide to the left											
			if (currentIndex < guideImages.length - 1) {
				currentIndex++;
				setCurrentDot();
				viewFlipper.setInAnimation(this, R.anim.left_in);
				viewFlipper.setOutAnimation(this, R.anim.left_out);
				viewFlipper.showNext();
			} else {
				startActivity(new Intent(GuideActivity.this, MainActivity.class));
				setGuided();
				this.finish();
			}
		} else if ((e2.getX() - e1.getX()) > FLING_MIN_DISTANCE
				&& Math.abs(velocityX) > FLING_MIN_VELOCITY) { 
			// slide to the right											
			if (currentIndex > 0 && currentIndex < guideImages.length) {
				currentIndex--;
				setCurrentDot();
				viewFlipper.setInAnimation(this, R.anim.right_in);
				viewFlipper.setOutAnimation(this, R.anim.right_out);
				viewFlipper.showPrevious();
			}
		}
		return false;
	}

	@Override
	public boolean onDown(MotionEvent e) {
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {

	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		return false;
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {

	}

}

</pre><pre name="code" class="java"><strong><span style="font-size:18px;">PS:</span></strong>

<strong><span style="font-size:18px;">   界面切换动画<span style="font-family: Arial, Helvetica, sans-serif;">/res/anim</span></span></strong>

1.left_in.xml<span style="font-family: Arial, Helvetica, sans-serif;">	</span>

<span style="white-space:pre"></span><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="100%"
		android:toXDelta="0"
		android:duration="500"/>
</set>

2.left_out.xml

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
	xmlns:android="http://schemas.android.com/apk/res/android">	
	<translate android:fromXDelta="0"
		android:toXDelta="-100%"
		android:duration="500"/>
</set>

3.right_in.xml

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<translate android:fromXDelta="-100%"
		android:toXDelta="0"
		android:duration="500"/>
</set>

4.right_out.xml

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
	xmlns:android="http://schemas.android.com/apk/res/android">	
	<translate android:fromXDelta="0"
		android:toXDelta="100%"
		android:duration="500"/>
</set>

</pre><pre name="code" class="html">

<strong><span style="color:#ff0000;"><span style="font-size:18px;">ArrayResourceUtils.java</span></span></strong>

<pre name="code" class="java"><span style="font-size:14px;"><span style="color:#ff0000;">import android.content.Context;
</span>import android.content.res.TypedArray;

/**
 * 此工具类用于解析drawable数组资源、id数组资源
 *  参考：http://www.2cto.com/kf/201409/331829.html
 */
public class ArrayResourceUtils {

	/**
	 * 用XML 图片（drawable）数组资源初始化数组
	 * 
	 * @param context
	 * @param arrayId
	 *            引用的数组资源Id
	 * @param targetLength
	 *            要进行初始化的数组的长度
	 * 
	 * @return 返回 tempArray（初始化之后图片的id将保存在tempArray数组中）
	 */
	public static int[] getDrawableArray(Context context, int arrayId,
			int targetLength) {
		int[] tempArray;
		TypedArray ta = context.getResources().obtainTypedArray(arrayId);
		if (targetLength > 0 && targetLength < ta.length()) {
			tempArray = new int[targetLength];
			for (int i = 0; i < targetLength; i++) {
				tempArray[i] = ta.getResourceId(i, 0);
			}
			ta.recycle();
		} else {
			// 当targetLength越界，默认长度为xml资源数组的长度
			tempArray = new int[ta.length()];
			for (int i = 0; i < ta.length(); i++) {
				tempArray[i] = ta.getResourceId(i, 0);
			}
		}
		return tempArray;
	}
}</span>

<span style="font-size:14px;"><strong>图片（drawable）数组资源 example:</strong></span>

<span style="font-size:14px;"><strong>/res/values/arrays.xml</strong></span>

<span style="font-size:14px;"></span><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<resources>

    <string-array name="guide_images">
        <item>@drawable/guide01</item>
        <item>@drawable/guide02</item>
        <item>@drawable/guide03</item>
    </string-array>
    <string-array name="dot_images">
        <item>@drawable/dot_blue</item>
        <item>@drawable/dot_white</item>
    </string-array>

</resources>

<span style="font-size:14px;">
</span>