手机安全卫士------手机防盗页面之完成向导页面的UI布局和动画

实现逻辑：

• 用户点击对话框的确定按钮，跳转页面的时候判断用户此前是否设置过手机防盗功能
• 如果设置过，直接跳转到防盗页面
• 如果没设置过，进入设置向导页面，进行相应的配置。

设置向导页面的效果图：

功能的技术点：
1.自定义文字风格
2.自定义按钮的背景
3.界面切换的动画
4.滑动屏幕切换页面

自定义文字风格
由于布局中有很多文字的颜色、字号、上边距、左边距等属性是相同的，因此，自定义一个文字风格，降低编码工作量

具体代码如下：

 <style name="LostFindText">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">#000</item>
        <item name="android:layout_marginTop">10dp</item>
        <item name="android:layout_marginLeft">10dp</item>
    </style>

同时被设置成自定义风格的还有每个页面左下角、右下角的按钮，在此不再赘述。

设置向导页面的布局思路：

• 上半部分 都是一个控件占一行的格式，因此，可以采用线性布局来实现。
• 中间的四个圆圈，用一个横向的线性布局来实现
• 下半部分 对控件的位置布局要求较高，因此，采用相对布局

界面中还有一些小图标，比如五角星、实心圆圈、空心圆圈等，这些都是android自身的图标。 使用安卓自带的图标可以减少软件的体积。

图片和文字横向排列的时候，不需要单独写线性布局，只需要给TextView设置drawableLeft（drawableRight）属性即可

自定义按钮的背景

通过自定义按钮的背景，可以把按钮被按下、被触摸、和平时分别设置成不同的图片背景。
采用的是selector选择器。
首先，在drawable目录下创建一个xml文件，具体代码实现：

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

分析： 根节点为selector ，设置命名空间为android本身。
设置状态背景时，每次要使用item,android:state_press=true代表按钮被按下时的状态。 android:drawable 表示在此状态下显示的图片背景

界面切换的动画

翻页动画的思路：
获取Activity在屏幕上的坐标，注意：屏幕坐标向下为Y轴正方向。

那么，点击下一步的时候，相当于当前页面左上角的点从（0,0）滑到（-100,0）；下一个页面左上角的点则是从（100,0）滑到了（0,0）
点击上一步的时候，左上角的点从（0,0）滑到（100,0），上一个页面左上角的点则是从（-100,0）滑到（0,0）

具体实现代码：

点击上一步，页面进入的动画：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="-100%p"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="0"
    >
</translate>

分析：

• 在res目录下创建anim文件夹
• 新建XML文件，根节点为translate
• 内部的属性：
  
  • fromXDelta X轴的起点坐标
  • fromYDelta Y轴起点坐标
  • toXDelta X轴终点坐标
  • toYDelta Y轴终点坐标
  • duration 动画持续时间

在代码中使用动画：
overridePendingTransition(页面进入的动画,页面退出的动画);
注意：这条语句只能在startActivity() 或者 finish() 之后调用

用户滑动屏幕时执行翻页动画

由于滑动屏幕执行动画的功能每一个防盗向导页面都会用到，
因此，把这个功能抽取到一个父类中，让四个向导页面继承这个父类即可。
四个向导页面都用到了toPreActivity() 和 toNextActivity()的方法，只是执行的内容不同，因此，我们创建两个抽象方法到父类，强制子类实现这两个方法：

实现滑动翻页的思路：

• 创建一个手势识别器： GestureDetector类

• 实例化GestureDetector类
  detector = new GestureDetector(Context,SimpleOnGestureListener);

• 实现onFling方法

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                if(e1.getRawX() - e2.getRawX() > 150)
                {
                    toNextActivity();
                    return true;
                }
                if(e2.getRawX() - e1.getRawX() > 150)
                {
                    toPreActivity();
                    return true;
                }

onFling方法中，e1代表起点，e2代表终点，通过getRawX和getRawY即可获得两点坐标。

最后，使用手势识别器：

public boolean onTouchEvent(MotionEvent event)
    {
        detector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }

搞定！！

整个基类代码如下：

package com.vincentliong.mobilesafe0722.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.widget.Toast;

public abstract class SetupBaseActivity extends Activity
{
    //创建手势识别器
    private GestureDetector detector ;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //实例化手势识别器
        detector = new GestureDetector(SetupBaseActivity.this,new GestureDetector.SimpleOnGestureListener(){

            //手指滑动时，执行的操作
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                if(e1.getRawX() - e2.getRawX() > 150)
                {
                    toNextActivity();
                    return true;
                }
                if(e2.getRawX() - e1.getRawX() > 150)
                {
                    toPreActivity();
                    return true;
                }
                if(Math.abs(e2.getRawY()-e1.getRawY()) > 200)
                {
                    Toast.makeText(SetupBaseActivity.this,"不能这样滑动", Toast.LENGTH_SHORT).show();
                }
                return super.onFling(e1, e2, velocityX, velocityY);
            }
        });

    }

    //使用手势识别器
    public boolean onTouchEvent(MotionEvent event)
    {
        detector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }

    //创建抽象方法，强制让子类实现跳转下一页
    public abstract void toNextActivity();

    //创建抽象方法，强制让子类实现跳转上一页
    public abstract void toPreActivity();

}