Android 开始画面以及第一次引导（自动播放以及手势滑动）

先上福利：

动画过度效果：

最后完成的效果：

splash界面布局：

<?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="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/splash_img_str"
        android:scaleType="fitXY"
        android:src="@drawable/spalsh" />

</LinearLayout>

splash界面代码：

import com.viewfliper.util.PreferencesUtils;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;

/**
 * 
 * TODO splash screen
 * 
 * @author ITWANG
 */
public class SplashActivity extends Activity
{

	boolean isFirstIn = false;

	private static final int GO_HOME = 1000;
	private static final int GO_GUIDE = 1001;
	// delay 3 seconds
	private static final long SPLASH_DELAY_MILLIS = 3000;

	@SuppressLint("HandlerLeak")
	private Handler mhandler = new Handler()
	{

		@Override
		public void handleMessage(Message msg)
		{
			switch (msg.what) {
			case GO_GUIDE:

				goToPage(GuideActivity.class);
				break;

			case GO_HOME:

				goToPage(MainActivity.class);
				break;

			default:
				break;
			}
			super.handleMessage(msg);
		}

	};

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.splash_activty);

		init();
	}

	/**
	 * initialize view
	 */
	private void init()
	{
		isFirstIn = PreferencesUtils.getBoolean(this, "isFirstIn", true);
		if (isFirstIn)
		{
			mhandler.sendEmptyMessageDelayed(GO_GUIDE, SPLASH_DELAY_MILLIS);
		} else
		{
			mhandler.sendEmptyMessageDelayed(GO_HOME, SPLASH_DELAY_MILLIS);
		}
	}

	private void goToPage(Class<?> cls)
	{
		if (cls != null)
		{
			Intent intent = new Intent(this, cls);
			startActivity(intent);
			this.finish();
		}
	}
}

GuideActivity引导界面布局：

<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="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/viewflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </ViewFlipper>

    <Button
        android:id="@+id/btn_gomain"
        android:layout_width="120dp"
        android:layout_height="35dp"
        android:layout_above="@+id/lv_spot"
        android:layout_centerHorizontal="true"
        android:background="@drawable/btn_bg_set"
        android:text="@string/btn_guideactivity_gomain_str"
        android:visibility="gone" />

    <LinearLayout
        android:id="@+id/lv_spot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@string/guideactivity_spot_str"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@string/guideactivity_spot_str"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@string/guideactivity_spot_str"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:contentDescription="@string/guideactivity_spot_str"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot" />
    </LinearLayout>

</RelativeLayout>

GuideActivity的界面代码：

<pre name="code" class="java">import com.viewfliper.util.PreferencesUtils;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;

/**
 * 
      * <p>Time: 2014-7-6下午9:53:28</p>
      * <p>Title: 引导界面</p>
      * <p>Description: 代码描述</p>
      * @author: itwang
 */
public class GuideActivity extends Activity implements android.view.GestureDetector.OnGestureListener
{
	private int[] views = { R.drawable.guide1, R.drawable.guide2, R.drawable.guide3, R.drawable.guide4 };

	private GestureDetector gestureDetector = null;
	private ViewFlipper viewFlipper = null;
	private LinearLayout lv_spot;
	private Button btn_gomain;
	private ImageView[] dots;
	private Activity mActivity = null;
	private int count = 0;
	private int currentIndex;

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.guide_activity);

		mActivity = this;

		viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
		btn_gomain = (Button) findViewById(R.id.btn_gomain);
		gestureDetector = new GestureDetector(this, this); // 声明检测手势事件
		initDots();
		addViews();
		viewFlipper.setAutoStart(true); // 设置自动播放功能（点击事件，前自动播放）
		viewFlipper.setFlipInterval(3000);
		setUnGestureAnimation();
		if (viewFlipper.isAutoStart() && !viewFlipper.isFlipping())
		{
			viewFlipper.startFlipping();
			autoStop();
		}
		setGuided();

	}

	@Override
	public boolean onTouchEvent(MotionEvent event)
	{
		viewFlipper.stopFlipping(); // 点击事件后，停止自动播放
		viewFlipper.setAutoStart(false);
		return gestureDetector.onTouchEvent(event); // 注册手势事件
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
	{
		if ((e2.getX() - e1.getX() > 120) && count > 0)
		{ // 从左向右滑动（左进右出）
			Animation rInAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_right_in);
			Animation rOutAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_right_out);

			viewFlipper.setInAnimation(rInAnim);
			viewFlipper.setOutAnimation(rOutAnim);
			viewFlipper.showPrevious();
			Animation animation = viewFlipper.getOutAnimation();
			animation.setAnimationListener(new AnimationListener()
			{

				@Override
				public void onAnimationStart(Animation animation)
				{
					count--;
					if (count < views.length - 1 && btn_gomain.getVisibility() == View.VISIBLE)
					{
						btn_gomain.setVisibility(View.GONE);
					}
				}

				@Override
				public void onAnimationRepeat(Animation animation)
				{

				}

				@Override
				public void onAnimationEnd(Animation animation)
				{
					setCurrentDot(count);
				}
			});
			return true;
		} else if ((e2.getX() - e1.getX() < -120) && count < views.length - 1)
		{ // 从右向左滑动（右进左出）
			Animation lInAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_left_in);
			Animation lOutAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_left_out);
			viewFlipper.setInAnimation(lInAnim);
			viewFlipper.setOutAnimation(lOutAnim);
			viewFlipper.showNext();
			Animation animation = viewFlipper.getInAnimation();
			animation.setAnimationListener(new AnimationListener()
			{

				@Override
				public void onAnimationStart(Animation animation)
				{
					count++;
				}

				@Override
				public void onAnimationRepeat(Animation animation)
				{

				}

				@Override
				public void onAnimationEnd(Animation animation)
				{
					setCurrentDot(count);
					if (count == views.length - 1)
					{
						btn_gomain.setVisibility(View.VISIBLE);
					}
				}
			});
			return true;
		}
		return true;
	}

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

	@Override
	public void onLongPress(MotionEvent e)
	{
	}

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

	@Override
	public void onShowPress(MotionEvent e)
	{
	}

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

	public void setUnGestureAnimation()
	{
		Animation lInAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_left_in);
		Animation lOutAnim = AnimationUtils.loadAnimation(mActivity, R.anim.push_left_out);
		viewFlipper.setInAnimation(lInAnim);
		viewFlipper.setOutAnimation(lOutAnim);
	}

	public void addViews()
	{
		for (int i = 0; i < views.length; i++)
		{ // 添加图片源
			ImageView iv = new ImageView(this);
			iv.setImageResource(views[i]);
			iv.setScaleType(ImageView.ScaleType.FIT_XY);
			viewFlipper.addView(iv, new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
		}
	}

	private void setCurrentDot(int position)
	{
		if (position < 0 || position > views.length - 1 || currentIndex == position)
		{
			return;
		}

		dots[position].setEnabled(false);
		dots[currentIndex].setEnabled(true);

		currentIndex = position;
	}

	private void initDots()
	{
		lv_spot = (LinearLayout) findViewById(R.id.lv_spot);

		dots = new ImageView[views.length];

		// 获取点数
		for (int i = 0; i < views.length; i++)
		{
			dots[i] = (ImageView) lv_spot.getChildAt(i);
			// 所有点设置为灰点
			dots[i].setEnabled(true);
		}

		currentIndex = 0;
		// 当前图片设置为白点
		dots[currentIndex].setEnabled(false);
	}

	public void autoStop()
	{
		Animation animation = viewFlipper.getInAnimation();
		animation.setAnimationListener(new AnimationListener()
		{

			@Override
			public void onAnimationStart(Animation animation)
			{
				count++;
			}

			@Override
			public void onAnimationRepeat(Animation animation)
			{

			}

			@Override
			public void onAnimationEnd(Animation animation)
			{
				setCurrentDot(count);
				if (count > views.length - 2)
				{
					viewFlipper.stopFlipping(); // 点击事件后，停止自动播放
					viewFlipper.setAutoStart(false);
					btn_gomain.setVisibility(View.VISIBLE);
				}
			}
		});
	}

	public void setGuided()
	{
		btn_gomain.setOnClickListener(new OnClickListener()
		{

			@Override
			public void onClick(View v)
			{
				// PreferencesUtils.putBoolean(getApplicationContext(), "isFirstIn", false);
				Intent intent = new Intent(getApplicationContext(), MainActivity.class);
				startActivity(intent);
				finish();

			}
		});
	}
}

ps:如果引导一次后就不显示第二次，请将// PreferencesUtils.putBoolean(getApplicationContext(), "isFirstIn", false);<span style="font-family: Arial, Helvetica, sans-serif;">还原</span>

主界面什么的就是一个单独界面就可以

获取preference的代码：

    public static boolean putBoolean(Context context, String key, boolean value) {
        SharedPreferences settings = context.getSharedPreferences(PREFERENCE_NAME, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = settings.edit();
        editor.putBoolean(key, value);
        return editor.commit();
    }

    /**
     * get boolean preferences, default is false
     * 
     * @param context
     * @param key The name of the preference to retrieve
     * @return The preference value if it exists, or false. Throws ClassCastException if there is a preference with this
     * name that is not a boolean
     * @see #getBoolean(Context, String, boolean)
     */
    public static boolean getBoolean(Context context, String key) {
        return getBoolean(context, key, false);
    }

哪个引导完成的Button背景的xml设置：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true"><shape>
            <gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ff8c00" />

            <corners android:radius="7dp" />

            <solid android:color="#00FA9A" />

            <stroke android:width="0.5dp" android:color="#33000000" />
        </shape></item>
    <item android:state_pressed="true"><shape>
            <gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ff8c00" />

            <corners android:radius="7dp" />

            <solid android:color="#00FA9A" />

            <stroke android:width="0.5dp" android:color="#33000000" />
        </shape></item>
    <item><shape>
            <gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ff8c00" />

            <corners android:radius="7dp" />

            <solid android:color="#3CB371" />

            <stroke android:width="0.5dp" android:color="#33000000" />
        </shape></item>

</selector>

白点黑点的控制xml：

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/guideactivity_white_dot" android:state_enabled="true"/>
    <item android:drawable="@drawable/guideactivity_dark_dot" android:state_enabled="false"/>

</selector>

几个进入和退出的动画xml：

push_left_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="400"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="400"
        android:fromXDelta="0"
        android:toXDelta="-10%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.9" />
</set>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="-70%p"
        android:toXDelta="0" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
</set>

两个小点的图片（前面一个是灰色，后面一个白色貌似看不到）：

Android 开始画面以及第一次引导（自动播放以及手势滑动）

猜你喜欢