歡迎介面+引導進入經典案例，介面經典案例

歡迎介面+引導進入經典案例，介面經典案例

看引導介面效果

先看歡迎介面的布局（動畫效果）

activity_welcome.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/rl_root"    android:background="@drawable/splash_bg_newyear" >    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/splash_horse_newyear" /></RelativeLayout>

再看歡迎介面的activity

WelcomeActivity.java

package com.example.bjnews.activity;import com.example.bjnews.R;import com.example.bjnews.util.SPUtil;import android.os.Bundle;import android.util.Log;import android.view.animation.AlphaAnimation;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationSet;import android.view.animation.RotateAnimation;import android.view.animation.ScaleAnimation;import android.widget.RelativeLayout;import android.widget.Toast;import android.app.Activity;import android.content.Intent;public class WelcomeActivity extends Activity {private RelativeLayout rl_root;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_welcome);init();}private void init() {rl_root = (RelativeLayout) findViewById(R.id.rl_root);//旋轉RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setDuration(2000);rotateAnimation.setFillAfter(true);//縮放ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);scaleAnimation.setDuration(2000);scaleAnimation.setFillAfter(true);//透明度AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);alphaAnimation.setDuration(2000);alphaAnimation.setFillAfter(true);//添加動畫AnimationSet animationSet = new AnimationSet(false);animationSet.addAnimation(rotateAnimation);animationSet.addAnimation(scaleAnimation);animationSet.addAnimation(alphaAnimation);rl_root.startAnimation(animationSet);//動畫監聽事件animationSet.setAnimationListener(new MyAnimation());}class MyAnimation implements AnimationListener{@Overridepublic void onAnimationEnd(Animation animation) {//是否已經進入過主介面（預設沒有進入過）boolean isEnterMain = SPUtil.getInstance(WelcomeActivity.this).getboolean("isEnterMain", false);Log.e("TAG", "isEnterMain"+isEnterMain);if (isEnterMain) {//進入過，進入到主介面startActivity(new Intent(WelcomeActivity.this,MainActivity.class ));Log.e("TAG", "Main");}else {//沒進入過，計入嚮導介面Log.e("TAG", "guide");startActivity(new Intent(WelcomeActivity.this,GuideActivity.class ));}finish();}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationStart(Animation animation) {}}}

另外為上對象提供一個工具類（用來儲存是否是第一次進入應用）

SPUtil.java

package com.example.bjnews.util;import android.content.Context;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;public class SPUtil {// 構造器私人private SPUtil() {}// 私人、靜態執行個體private static SPUtil instance = new SPUtil();// 公用、靜態方法擷取執行個體public static SPUtil getInstance(Context context) {if (sp == null) {sp = context.getSharedPreferences("atguigu", Context.MODE_PRIVATE);}return instance;}private static SharedPreferences sp;// 儲存資料的方法public void put(String key, Object defValue) {Editor edit = sp.edit();if (defValue instanceof Boolean) {edit.putBoolean(key, (Boolean) defValue);}if (defValue instanceof String) {edit.putString(key, (String) defValue);}if (defValue instanceof Integer) {edit.putInt(key, (Integer) defValue);}edit.commit();}// 擷取資料public String getString(String key, String defValue) {return sp.getString(key, defValue);}public int getInt(String key, int defValue) {return sp.getInt(key, defValue);}public boolean getboolean(String key, boolean defValue) {return sp.getBoolean(key, defValue);}}

接下來開始進行引導介面的操作了 

先看布局

activity_guide.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="fill_parent"        android:layout_height="fill_parent" >    </android.support.v4.view.ViewPager>    <Button        android:id="@+id/btn_enterMain"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="100dp"        android:background="@drawable/enter_main_button_selector_bg"        android:text="開始體驗"        android:textColor="@drawable/enter_main_button_text_selector"        android:visibility="gone" />    <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="80dp" >        <LinearLayout            android:id="@+id/ll_point_group"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal" >        </LinearLayout>        <View            android:id="@+id/red_point"            android:layout_width="10dp"            android:layout_height="10dp"            android:background="@drawable/point_red"/>    </RelativeLayout></RelativeLayout>

針對引導介面還需要提供4個xml檔案（進入體驗button的按下效果切換，以及還有3個狀態切換圓點）
enter_main_button_selector_bg.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_checked="true" android:drawable="@drawable/button_red_pressed"></item>    <item android:state_checked="false" android:drawable="@drawable/button_red_normal"></item></selector>

enter_main_button_text_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_checked="true" android:color="@android:color/black"></item>    <item android:state_checked="false" android:color="@android:color/white"></item></selector>

point_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">    <solid android:color="#55000000"/></shape>

point_red.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">    <solid android:color="#ff0000"/></shape>

接下來就該注意的嚮導介面代碼了

GuideActivity.java

package com.example.bjnews.activity;import java.util.ArrayList;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.ViewGroup;import android.view.ViewTreeObserver.OnGlobalLayoutListener;import android.widget.Button;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.LinearLayout.LayoutParams;import android.widget.RelativeLayout;import com.example.bjnews.R;import com.example.bjnews.util.SPUtil;public class GuideActivity extends Activity {private ViewPager viewpager;// 三個滑動的頁面private ArrayList<ImageView> imageViews;// 三個滑動頁面對應的圖片集合private Button btn_enterMain;// 開始體驗按鈕private LinearLayout ll_point_group;// 下方的三個顯示圓點為private View red_point;// 當前頁面的高亮顯示圓點private int leftMax;// 2個原點之前的距離@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_guide);// 擷取點的集合ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);// 擷取高亮的紅點red_point = findViewById(R.id.red_point);// 擷取viewpagerviewpager = (ViewPager) findViewById(R.id.viewpager);// 擷取button(開始體驗)btn_enterMain = (Button) findViewById(R.id.btn_enterMain);// 建立集合imageViews = new ArrayList<ImageView>();// 準備資料int[] ids = { R.drawable.guide_1, R.drawable.guide_2,R.drawable.guide_3 };for (int i = 0; i < ids.length; i++) {ImageView imageView = new ImageView(this);// 建立圖片對象imageView.setBackgroundResource(ids[i]);// 為圖片設定背景imageViews.add(imageView);// 添加圖片View point = new View(this);// 添加下標點-建立點擊LayoutParams params = new LayoutParams(10, 10);// 建立布局參數// 除開第0個點，其他的都要距離左邊有10個像素if (i != 0) {params.leftMargin = 10;}point.setBackgroundResource(R.drawable.point_normal);// 添加背景圖片point.setLayoutParams(params);// 設定布局參數ll_point_group.addView(point);// 添加指示點擊}// 設定適配器viewpager.setAdapter(new viewpagerAdapter());// 監聽當onLayout方法執行的時候再去red_point.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {// 取消註冊監聽--因為孩子也會調用red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);// 兩點間的間距leftMax = ll_point_group.getChildAt(1).getLeft()- ll_point_group.getChildAt(0).getLeft();}});/** * 設定頁面改變監聽 */viewpager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {//只有第三種頁面顯示進入按鈕if (position == 2) {btn_enterMain.setVisibility(View.VISIBLE);} else {btn_enterMain.setVisibility(View.GONE);}}/* * 位置 螢幕上滑動的百分比 滑動的顯示 */@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {// 計算要滑動的距離=間距*在螢幕上滑動的百分比int distance = (int) (leftMax * (positionOffset + position));RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(10, 10);params.leftMargin = distance;red_point.setLayoutParams(params);}@Overridepublic void onPageScrollStateChanged(int arg0) {}});/** * 為開始體驗button添加點擊事件 */btn_enterMain.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 標記為trueSPUtil.getInstance(GuideActivity.this).put("isEnterMain", true);// 進入主介面startActivity(new Intent(GuideActivity.this, MainActivity.class));// 幹掉自己finish();}});}class viewpagerAdapter extends PagerAdapter {@Overridepublic int getCount() {return imageViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return (arg0 == arg1);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView imageView = imageViews.get(position);container.addView(imageView);return imageView;}}}

另外最後還有一個主介面測試用（布局檔案沒有東西）

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" ></RelativeLayout>

MainActivity.java

package com.example.bjnews.activity;import com.example.bjnews.R;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}