App 引导界面

App 引导界面

1、前言

　　最近在学习实现App的引导界面，本篇文章对设计流程及需要注意的地方做一个浅显的总结。

　　附上项目链接，供和我水平类似的初学者参考——http://files.cnblogs.com/files/tgyf/Tutorial.rar。

　　对于有引导界面的App，刚安装或使用后将其数据清除（Setting-Apps-...），启动后就会出现引导界面，目的是向用户介绍本款应用的使用方法或主要功能。

　　App引导过程的页面数一般为为3到6个，特殊的如刷机后的SetupWizard设置页面将近10个。除了非常必要，放过多页面会影响用户体验，虽然可以在界面上添加“跳过”按钮（最近较为常用的按钮为“立即体验”）为不需要被引导的用户提供进入App的捷径。

　　有两种操作方式让用户左/右翻动页面：点击按钮和手势滑动。前者需要在界面上添加两个按钮（一般以左/右箭头图标作为显示内容），而后者直接识别用户手指在屏幕上的滑动操作，不过两者最终实现的页面切换方法是相同的。随着时间的推移，很多App为了界面的简洁及美观而只为用户提供手势滑动来翻动页面，当然还是有一些App仍然同时提供了上述的两种操作方式。

　　先给出一张常见的引导界面图（网络上找的）：

2、判断是否是第一次启动

　　无论之前有没有这方面的开发经验，都不难想到：要判断App是否是第一次启动，需要从某个地方读取一个记录启动状态（或者说启动次数）的变量值，而且这个变量值不能随着应用的关闭而消失，除非将其数据清除或卸载。将这种类型的数据保存在文件中是不错的方法，但这里不用File类，因为Android提供了一个非常好用的类——SharedPreferences。

　　记录启动状态的数据是在App启动后的类中进行读写的（非引导界面相关类），这里是主类MainActivity。直接上代码：

package com.example.tutorial;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        SharedPreferences googleActivitySP = getSharedPreferences("Tutorial", Context.MODE_PRIVATE);
        boolean firstStart = googleActivitySP.getBoolean("first_start", true);
        if(firstStart == true){
            
            Intent intent = new Intent(this, TutorialIntroPageActivity.class);
            startActivity(intent);
            
            Toast.makeText(this, "Tutorial first start", Toast.LENGTH_SHORT).show();
            Editor edit = googleActivitySP.edit();
            edit.putBoolean("first_start", false);
            edit.commit();
        }

    }
    
}

　　如代码中所示，记录App启动状态的变量为boolean型first_start，约定第一次启动时其值为true，否则为false。

　　刚开始这样使用SharedPreferences类的时候，相信也有人和我一样会疑惑：如代码18、19行，一上来就是获取文件与变量值，原来不存在怎么办？这就是该类智能的地方，类似File又胜于File，当文件不存在时就创建，当变量不存在时就返回给定的默认值。即：

　　a、App初次启动时会在相应目录中新建一个文件，这里是data/data/com.example.tutorial/Tutorial.xml，私有模式。注意默认是xml格式，文件名称与模式分别由方法getSharedPreferences()的第一、二参数决定。若想看其是否生成可以通过Eclipse的DDMS，若想看其内容可以通过在CMD下的adb shell命令进入Shell模式，cd定位到目录后用cat filename查看。

　　b、初次启动时start_first变量并不存在，所以返回值为给定的默认值true，方法getBoolean()第一、二参数分别指定了需要获取的变量名与默认返回值，若变量存在就返回实际值，不存在就返回给定的默认值，不会因为变量不存在而报异常。不过该类还提供了判断变量是否存在的方法，感兴趣的朋友可以自己研究。

　　第一次启动App，获取的start_first变量值为true，所以如代码22、23行利用Intent类打开引导界面——TutorialIntroPageActivity类实现的Activity（稍候会讲解）。接着如代码26-28行将变量值设置为false，以后运行该App获取的start_first变量值均为false，就不会打开引导界面了。

　　实现过后会发现，这些曾不敢触碰以为会很高深的点也不过如此。所以，要成长就要勇于探索、犯错、总结。

3、引导界面的实现

　　常见Activity的差别除了打开次数外，引导界面做的事情简单，主要是向用户展示App的使用说明与主要功能，做多加上几个按钮。

　　引导界面Activity在类TutorialIntroPageActivity中进行实现，先给出代码：

　　1、布局文件

<?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" >   
    
    <LinearLayout android:id="@+id/tutorial_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/image_tutorial"
            android:layout_width="310dp"
            android:layout_height="564dp"
            android:background="@drawable/image1" />
        
    </LinearLayout>
    
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:layout_marginBottom="20dp" >
        
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="horizontal" >
            
            <ImageView
                android:id="@+id/tutorial_indicator1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/indicator_page" />
            
            <ImageView
                android:id="@+id/tutorial_indicator2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/indicator_dot" />
                    
            <ImageView
                android:id="@+id/tutorial_indicator3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/indicator_dot" />
                            
            <ImageView
                android:id="@+id/tutorial_indicator4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/indicator_dot" />
        
        </LinearLayout>
            
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:orientation="horizontal" >
  
            <Button 
                android:id="@+id/skip_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="skip"
                android:textSize="20dp"
                android:textColor="#323232"
                android:background="@android:color/transparent"
                android:drawableRight="@drawable/skip"
                android:drawablePadding="10dp" />
            
            <Button 
                android:id="@+id/done_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="done"
                android:textSize="20dp"
                android:textColor="#323232"
                android:background="@android:color/transparent"
                android:drawableRight="@drawable/done"
                android:drawablePadding="10dp"
                android:visibility="gone" />

        </LinearLayout>
    
    </RelativeLayout>
    
</RelativeLayout>

　　界面上的组件很简单：

　　　　a、中间为一个显示主要信息的ImageView，页面切换时只需要改变其显示的图片；

　　　　b、下方为四个指示点+一个按钮，四个指示点对应着有四个页面，按钮用来结束该引导界面；

　　注意在文件的最后其实放置了两个按钮，当页面在前三页时显示前者——“跳过”（Skip），第四页时显示后者——完成（Done），默认将完成按钮隐藏，切换在Java代码中随着页面的改变而进行。当然，也可以只放置一个按钮，在Java中另加文本及图标的改变。

　　2、Java实现文件

package com.example.tutorial;

import com.example.tutorial.R;

import android.app.Activity;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class TutorialIntroPageActivity extends Activity implements OnTouchListener{
    private static final float LIMIT_ANGLE_TAN = 1.5f;
    
    private ImageView mTutorialImage;
    
    private ImageView mIndicator1;
    private ImageView mIndicator2;
    private ImageView mIndicator3;
    private ImageView mIndicator4;
    
    private Button mSkipButton;
    private Button mDoneButton;
    
    private GestureDetector mDetector = null;
    private int mStep = 0;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.tutorial_info_page);
        
        mIndicator1 = (ImageView)findViewById(R.id.tutorial_indicator1);
        mIndicator2 = (ImageView)findViewById(R.id.tutorial_indicator2);
        mIndicator3 = (ImageView)findViewById(R.id.tutorial_indicator3);
        mIndicator4 = (ImageView)findViewById(R.id.tutorial_indicator4);
        
        mTutorialImage = (ImageView)findViewById(R.id.image_tutorial);
        mDetector = new GestureDetector(this, new TutorialImageGesture());
        mTutorialImage.setOnTouchListener(this);

        mSkipButton = (Button) findViewById(R.id.skip_button);
        mSkipButton.setOnClickListener(mOnSkipOrDoneButtonClickListener);
        mDoneButton = (Button) findViewById(R.id.done_button);
        mDoneButton.setOnClickListener(mOnSkipOrDoneButtonClickListener);
        
        if(savedInstanceState != null)
        {
            mStep = savedInstanceState.getInt("pageStep");
        }
        
        boolean isLandscape = getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE;
        
        switch(mStep){
        case 0:
            break;
        case 1:
            mIndicator1.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator2.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            break;
        case 2:
            mIndicator1.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator3.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            break;
        case 3:
            mIndicator1.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator4.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image4);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image4);
            mDoneButton.setVisibility(View.VISIBLE);
            mSkipButton.setVisibility(View.GONE);
            break;
        }
    }
    
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);    
        outState.putInt("pageStep", mStep);
    }
    
    private void showPrePage(){
        boolean isLandscape = getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE;

        if(mStep == 3){
            mIndicator3.setBackgroundResource(R.drawable.indicator_page);
            mIndicator4.setBackgroundResource(R.drawable.indicator_dot);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            mDoneButton.setVisibility(View.GONE);
            mSkipButton.setVisibility(View.VISIBLE);
            mStep--;
        }else if(mStep == 2){
            mIndicator2.setBackgroundResource(R.drawable.indicator_page);
            mIndicator3.setBackgroundResource(R.drawable.indicator_dot);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            mStep--;
        }else if(mStep == 1){
            mIndicator1.setBackgroundResource(R.drawable.indicator_page);
            mIndicator2.setBackgroundResource(R.drawable.indicator_dot);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image1);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image1);
            mStep--;
        }
    }
    
    private void showNextPage(){
        boolean isLandscape = getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE;

        if(mStep == 0){
            mIndicator1.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator2.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image2);
            mStep++;
        }else if(mStep == 1){
            mIndicator2.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator3.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image3);
            mStep++;
        }else if(mStep == 2){
            mIndicator3.setBackgroundResource(R.drawable.indicator_dot);
            mIndicator4.setBackgroundResource(R.drawable.indicator_page);
            if(isLandscape)
                mTutorialImage.setBackgroundResource(R.drawable.image4);
            else
                mTutorialImage.setBackgroundResource(R.drawable.image4);
            mDoneButton.setVisibility(View.VISIBLE);
            mSkipButton.setVisibility(View.GONE);
            mStep++;
        }
    }
    
    private OnClickListener mOnSkipOrDoneButtonClickListener = new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            Intent intent = new Intent(TutorialIntroPageActivity.this, MainActivity.class);
            if(getIntent().getParcelableExtra(Intent.EXTRA_INTENT) != null){
                intent.putExtra(Intent.EXTRA_INTENT, getIntent().getParcelableExtra(Intent.EXTRA_INTENT));
            }
            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            //finish();
        }
        
    };
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mDetector.onTouchEvent(event);
        return true;
    }
    
    public class TutorialImageGesture implements OnGestureListener {

        @Override
        public boolean onDown(MotionEvent arg0) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            float ver = Math.abs(e1.getY() - e2.getY());
            float hor = Math.abs(e1.getX() - e2.getX());
                if ( ver / hor > LIMIT_ANGLE_TAN || Math.abs(velocityX)<500) {
                    return false;
                }

                if (e2.getX() - e1.getX() < 0) {
                    showNextPage();
                }
                else {
                    showPrePage();
                }
                return true;
        }

        @Override
        public void onLongPress(MotionEvent arg0) {
            // TODO Auto-generated method stub
            
        }

        @Override
        public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
                float arg3) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public void onShowPress(MotionEvent arg0) {
            // TODO Auto-generated method stub
            
        }

        @Override
        public boolean onSingleTapUp(MotionEvent arg0) {
            // TODO Auto-generated method stub
            return false;
        }
        
    }

    @Override
    public boolean onTouch(View arg0, MotionEvent arg1) {
        // TODO Auto-generated method stub
        return false;
    }
}

　　实现过程没有特别复杂的地方，接下来对几个地方值得回味的进行讲解，以后也许会用到。

　　a、代码61、102、134行对设备方向的获取，因为一般Activity会随着设备的横/竖屏切换时而重启，且两种状态下的布局样式往往是不一样的，所以需要根据方向来实时调整显示的界面组件。本例给出的图像是一样的，所以看不出差别。

　　b、showprePage()和showNextPage()除了判断设备方向以外，主要负责引导页面、页面指示点及按钮状态的切换。

　　c、前面a中提到横/竖屏转换时Activity会重启（再次调用onCreate()方法，还有其他一些原因也会引起该结果），那么就需要暂时记录重启前用户看到哪个页面，以便重启后能马上恢复。代码95-99行重载了Acticity的onSaveInstanceState()，利用变量mStep作为页面的索引。Activity重启后，获取mStep值并恢复引导界面的工作由onCreate()方法完成。

　　d、手势识别类TutorialImageGesture重载的方法onFling()，当手势滑动的斜率大于1.5或水平距离小于500时，设定此种情形为不满足页面切换条件，不进行页面切换；否则，根据水平方向上的X坐标来判断向左还是向右切换页面。

4、结果图

　　虽然界面寒酸，还是拉出来溜溜。

　　四张引导界面（细心的朋友会发现其实是一张图片截成了四部分）：

          

            

　　手指在屏幕的图片上进行滑动时，页面会进行相应的切换；按SKIP、DONE按钮或Back键时引导过程结束，App界面出现。

　　注意，当点击界面上的SKIP或者DONE按钮时，如代码169-178行打开App对应的Activity，并设置其Flag属性为Intent.FLAG_ACTIVITY_CLEAR_TOP，效果和按手机Back类似，将引导Activity彻底销毁。

 

5、后记

　　上面的实现过程在显示主要引导信息（图片）时采用的是ImageView组件，那么当页面向左/右变动时只能靠很笨的方法。后来改用ViewPager组件再次进行了实现，当用户在屏幕上进行左/右滑动时可以调用其showNext()/showPrevious()方法来进行页面的跳转。

　　同时，还有几个地方可以进行简化处理。

　　1、页面下方指示点的变换，将四个ImageView变量（mIndicate1/mIndicate2/mIndicate3/mIndicate4）写成一个数组mIndicates[]，在页面变化时只需要两句代码就可以实现指示点做相应的改变，而不是通过if来判断3-4次。如页面左滑的处理代码：

mIndicates[mStep].setBackgroundResource(R.drawable.asus_tutorial_indicator_dot);
mIndicates[mStep-1].setBackgroundResource(R.drawable.asus_tutorial_indicator_page);

　2、在横/竖屏切换时，ViewFlipper组件的显示页面也要进行相应的改变，因为其初始化时是显示自身包含的第一个元素。ViewPager类提供了一个很好用的方法setDisplayedChild(int index)，可以让其直接显示指定位置的子元素。而不用傻傻地通过循环来进行页面的跳转，虽然也可以达到目的。如用for循环实现的代码为：

for(int i=0;i<mStep;++i){
　　mViewFlipperImage.showNext();
}