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 secondsprivate static final long SPLASH_DELAY_MILLIS = 3000;@SuppressLint("HandlerLeak")private Handler mhandler = new Handler(){@Overridepublic 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);}};@Overrideprotected 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;@Overridepublic 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();}@Overridepublic boolean onTouchEvent(MotionEvent event){viewFlipper.stopFlipping(); // 点击事件后，停止自动播放viewFlipper.setAutoStart(false);return gestureDetector.onTouchEvent(event); // 注册手势事件}@Overridepublic 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(){@Overridepublic void onAnimationStart(Animation animation){count--;if (count < views.length - 1 && btn_gomain.getVisibility() == View.VISIBLE){btn_gomain.setVisibility(View.GONE);}}@Overridepublic void onAnimationRepeat(Animation animation){}@Overridepublic 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(){@Overridepublic void onAnimationStart(Animation animation){count++;}@Overridepublic void onAnimationRepeat(Animation animation){}@Overridepublic void onAnimationEnd(Animation animation){setCurrentDot(count);if (count == views.length - 1){btn_gomain.setVisibility(View.VISIBLE);}}});return true;}return true;}@Overridepublic boolean onDown(MotionEvent e){return false;}@Overridepublic void onLongPress(MotionEvent e){}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY){return false;}@Overridepublic void onShowPress(MotionEvent e){}@Overridepublic 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(){@Overridepublic void onAnimationStart(Animation animation){count++;}@Overridepublic void onAnimationRepeat(Animation animation){}@Overridepublic 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(){@Overridepublic 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>

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