手机安全卫士------手机防盗页面之完成向导页面的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();

}