【Android】首次進入應用時加載引導界面

http://www.cnblogs.com/Amandaliu/archive/2012/12/03/2800072.html

參考文章：

【1】http://blog.csdn.net/wsscy2004/article/details/7611529

【2】http://www.androidlearner.net/android-use-viewflow-lift-right-slide.html

這個不同于上一篇文章【Android】每個Activity中加入引導界面（每個Activity動态加載ImageView的方式）。這個引導界面是在初次進入應用時，加載引導頁面（采用Activity的方式），進入應用後，不再需要提供引導。

功能需求：首次進入應用時加載引導界面

思路：

1、首次進入，怎麼判斷？檢視SharedPreferences中某個字段

2、基本上每個應用都有個進入實際功能是的動畫加載頁面，我們可以在該Activity中加入判斷，看是否需要跳轉到引導Activity

3、引導界面，采用現在比較主流的方式：左右滑動加載；小圓點提示；在最後一個頁面，點選button，進入功能界面

實作功能：左右手勢滑屏

    底部小圓點随目前顯示頁跳動

    浮動按鈕顯示。當觸屏事件發生顯示，否則就漸漸消失

先轉個文章：http://blog.csdn.net/feng88724/article/details/6973662

第一種： ViewFlipper + GestureDetector

第二種： ActivityGroup +   GestureDetector

第三種： ViewPager (Android3.0+)

第四種： ViewFlow (開源項目)

當你需要在一系列不确定數目的view中滑動時，可以考慮使用ViewFlow。如果你的view數目确定，你應該使用Fragments 或相容庫裡的ViewPager 。

綜合考慮代碼複雜度以及以及加載的引導view個數可确定性，我們就采用第三種方案ViewPager吧。

好了，上代碼。

（1）修改應用的動畫加載頁面SplashActivity.java

package com.example.guidepagetest2; 
  
import android.app.Activity; 
import android.content.Context; 
import android.content.Intent; 
import android.os.Bundle; 
import android.os.Handler; 
import android.os.Message; 
  
/** 
 * 功能：使用ViewPager實作初次進入應用時的引導頁 
 *  
 * (1)判斷是否是首次加載應用--采取讀取SharedPreferences的方法 
 * (2)是，則進入引導activity；否，則進入MainActivity 
 * (3)5s後執行(2)操作 
 *  
 * @author sz082093 
 * 
 */ 
public class SplashActivity extends Activity { 
  
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_splash); 
          
        boolean mFirst = isFirstEnter(SplashActivity.this,SplashActivity.this.getClass().getName()); 
        if(mFirst) 
            mHandler.sendEmptyMessageDelayed(SWITCH_GUIDACTIVITY,5000); 
        else 
            mHandler.sendEmptyMessageDelayed(SWITCH_MAINACTIVITY,5000); 
    }    
      
    //**************************************************************** 
    // 判斷應用是否初次加載，讀取SharedPreferences中的guide_activity字段 
    //**************************************************************** 
    private static final String SHAREDPREFERENCES_NAME = "my_pref"; 
    private static final String KEY_GUIDE_ACTIVITY = "guide_activity"; 
    private boolean isFirstEnter(Context context,String className){ 
        if(context==null || className==null||"".equalsIgnoreCase(className))return false; 
        String mResultStr = context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE) 
                 .getString(KEY_GUIDE_ACTIVITY, "");//取得所有類名 如 com.my.MainActivity 
        if(mResultStr.equalsIgnoreCase("false")) 
            return false; 
        else 
            return true; 
    } 
      
      
    //************************************************* 
    // Handler:跳轉至不同頁面 
    //************************************************* 
    private final static int SWITCH_MAINACTIVITY = 1000; 
    private final static int SWITCH_GUIDACTIVITY = 1001; 
    public Handler mHandler = new Handler(){ 
        public void handleMessage(Message msg) { 
            switch(msg.what){ 
            case SWITCH_MAINACTIVITY: 
                Intent mIntent = new Intent(); 
                mIntent.setClass(SplashActivity.this, MainActivity.class); 
                SplashActivity.this.startActivity(mIntent); 
                SplashActivity.this.finish(); 
                break; 
            case SWITCH_GUIDACTIVITY: 
                mIntent = new Intent(); 
                mIntent.setClass(SplashActivity.this, GuideActivity.class); 
                SplashActivity.this.startActivity(mIntent); 
                SplashActivity.this.finish(); 
                break; 
            } 
            super.handleMessage(msg); 
        } 
    }; 
}

(2)添加引導Activity的布局檔案activity_guide.xml

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" > 
      
    <LinearLayout 
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"> 
          
        <android.support.v4.view.ViewPager
            android:id="@+id/guidePages"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/> 
    </LinearLayout> 
      
    <LinearLayout 
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"> 
          
        <RelativeLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"> 
              
            <LinearLayout 
                android:id="@+id/viewGroup"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="40dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal"> 
                  
            </LinearLayout> 
        </RelativeLayout> 
          
    </LinearLayout> 
  
</FrameLayout>

(3)添加引導時，左右滑動時的view，這裡示例兩個：

viewpager_page1.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"> 
      
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:text="@string/guide_begin"
        /> 
  
</LinearLayout>

viewpager_page2.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"
    android:gravity="center"> 
      
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/guide_end"/> 
    <Button
        android:id="@+id/btn_close_guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_close_guide"/> 
      
  
</LinearLayout>

(4)修改引導Activity：GuideActivity.java

package com.example.guidepagetest2; 
  
import java.util.ArrayList; 
  
import android.app.Activity; 
import android.content.Intent; 
import android.content.SharedPreferences; 
import android.os.Bundle; 
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.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.ViewGroup.LayoutParams; 
import android.widget.Button; 
import android.widget.ImageView; 
  
public class GuideActivity extends Activity { 
    private ViewPager viewPager; 
      
    /**裝分頁顯示的view的數組*/
    private ArrayList<View> pageViews;     
    private ImageView imageView; 
      
    /**将小圓點的圖檔用數組表示*/
    private ImageView[] imageViews; 
      
    //包裹滑動圖檔的LinearLayout 
    private ViewGroup viewPics; 
      
    //包裹小圓點的LinearLayout 
    private ViewGroup viewPoints; 
      
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
          
        //将要分頁顯示的View裝入數組中 
        LayoutInflater inflater = getLayoutInflater(); 
        pageViews = new ArrayList<View>(); 
        pageViews.add(inflater.inflate(R.layout.viewpager_page1, null)); 
        pageViews.add(inflater.inflate(R.layout.viewpager_page2, null)); 
          
        //建立imageviews數組，大小是要顯示的圖檔的數量 
        imageViews = new ImageView[pageViews.size()]; 
        //從指定的XML檔案加載視圖 
        viewPics = (ViewGroup) inflater.inflate(R.layout.activity_guide, null); 
          
        //執行個體化小圓點的linearLayout和viewpager 
        viewPoints = (ViewGroup) viewPics.findViewById(R.id.viewGroup); 
        viewPager = (ViewPager) viewPics.findViewById(R.id.guidePages); 
          
        //添加小圓點的圖檔 
        for(int i=0;i<pageViews.size();i++){ 
            imageView = new ImageView(GuideActivity.this); 
            //設定小圓點imageview的參數 
            imageView.setLayoutParams(new LayoutParams(20,20));//建立一個寬高均為20 的布局 
            imageView.setPadding(20, 0, 20, 0); 
            //将小圓點layout添加到數組中 
            imageViews[i] = imageView; 
              
            //預設選中的是第一張圖檔，此時第一個小圓點是選中狀态，其他不是 
            if(i==0){ 
                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused); 
            }else{ 
                imageViews[i].setBackgroundResource(R.drawable.page_indicator); 
            } 
              
            //将imageviews添加到小圓點視圖組 
            viewPoints.addView(imageViews[i]); 
        } 
          
        //顯示滑動圖檔的視圖 
        setContentView(viewPics); 
          
        //設定viewpager的擴充卡和監聽事件 
        viewPager.setAdapter(new GuidePageAdapter()); 
        viewPager.setOnPageChangeListener(new GuidePageChangeListener());         
    } 
      
    private Button.OnClickListener  Button_OnClickListener = new Button.OnClickListener() { 
        public void onClick(View v) { 
            //設定已經引導 
            setGuided(); 
              
            //跳轉 
            Intent mIntent = new Intent(); 
            mIntent.setClass(GuideActivity.this, MainActivity.class); 
            GuideActivity.this.startActivity(mIntent); 
            GuideActivity.this.finish(); 
        } 
    };  
      
    private static final String SHAREDPREFERENCES_NAME = "my_pref"; 
    private static final String KEY_GUIDE_ACTIVITY = "guide_activity"; 
    private void setGuided(){ 
        SharedPreferences settings = getSharedPreferences(SHAREDPREFERENCES_NAME, 0); 
        SharedPreferences.Editor editor = settings.edit(); 
        editor.putString(KEY_GUIDE_ACTIVITY, "false"); 
        editor.commit(); 
    } 
      
      
    class GuidePageAdapter extends PagerAdapter{ 
  
        //銷毀position位置的界面 
        @Override
        public void destroyItem(View v, int position, Object arg2) { 
            // TODO Auto-generated method stub 
            ((ViewPager)v).removeView(pageViews.get(position)); 
              
        } 
  
        @Override
        public void finishUpdate(View arg0) { 
            // TODO Auto-generated method stub 
              
        } 
          
        //擷取目前窗體界面數 
        @Override
        public int getCount() { 
            // TODO Auto-generated method stub 
            return pageViews.size(); 
        } 
  
        //初始化position位置的界面 
        @Override
        public Object instantiateItem(View v, int position) { 
            // TODO Auto-generated method stub 
            ((ViewPager) v).addView(pageViews.get(position));   
              
             // 測試頁卡1内的按鈕事件   
            if (position == 1) {   
                Button btn = (Button) v.findViewById(R.id.btn_close_guide);   
                btn.setOnClickListener(Button_OnClickListener);   
            }   
              
            return pageViews.get(position);   
        } 
  
        // 判斷是否由對象生成界面 
        @Override
        public boolean isViewFromObject(View v, Object arg1) { 
            // TODO Auto-generated method stub 
            return v == arg1; 
        } 
  
  
  
        @Override
        public void startUpdate(View arg0) { 
            // TODO Auto-generated method stub 
              
        } 
  
        @Override
        public int getItemPosition(Object object) { 
            // TODO Auto-generated method stub 
            return super.getItemPosition(object); 
        } 
  
        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) { 
            // TODO Auto-generated method stub 
              
        } 
  
        @Override
        public Parcelable saveState() { 
            // TODO Auto-generated method stub 
            return null; 
        } 
    } 
      
      
    class GuidePageChangeListener 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) { 
            // TODO Auto-generated method stub 
            for(int i=0;i<imageViews.length;i++){ 
                imageViews[position].setBackgroundResource(R.drawable.page_indicator_focused); 
                //不是目前選中的page，其小圓點設定為未選中的狀态 
                if(position !=i){ 
                    imageViews[i].setBackgroundResource(R.drawable.page_indicator); 
                } 
            } 
              
        } 
    }    
 }

(5)大體上OK了，再貼上幾張圖檔吧

動畫加載頁面：

【Android】首次進入應用時加載引導界面

引導頁面：

【Android】首次進入應用時加載引導界面

點選“關閉引導界面”或者非首次進入應用後的功能頁面：

【Android】首次進入應用時加載引導界面

Done！

附源碼：http://pan.baidu.com/share/link?shareid=412792&uk=1796216265

作者：風傾清淩出處： http://www.cnblogs.com/Amandaliu/

【Android】首次進入應用時加載引導界面

繼續閱讀

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

Android電視機（機頂盒）初次開發的一些經驗分享

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯