CN109032700A - 一种基于状态控制的按钮交互方法 - Google Patents

Abstract

本发明涉及一种基于状态控制的按钮交互方法，包括如下步骤：设定一状态控制机；设定一状态处理控制机；设定一处理算法控制机；当用户发起或App发起的交互事件被触发，依次确定交互状态、处理算法，调用处理算法控制机，执行或禁用处理算法，提示处理算法的运行情况，处理算法被调用时，向状态控制机反馈必要数据，供状态控制机实时分析交互状态的变化，根据交互状态的变化，切换处理算法，完成交互控制等。本发明，根据交互过程的不同，预设若干按钮的交互状态，基于交互状态对按钮的动画效果进行控制，既能避免按钮的重复点击，也能提升网络加载的过程和结果，系统开销小，用户体验好，有利于App的开发效率及增强交互的及时提示性。

Description

一种基于状态控制的按钮交互方法

技术领域

本发明涉及交互界面设计技术领域，具体说是一种基于状态控制的按钮交互方法。

背景技术

现有的交互界面（例如App中的交互界面，网页中的交互界面，等等），在向远端提交数据时，都需要至少一个按钮用于发出提交请求。

向远端提交数据需要经过网络，因此一般都需要一定的时间来等待、获取返回信息（提交结果），在此期间需要屏蔽用户继续点击以免发送多次提交请求。

在Android系统中，提供了Button点击按钮控件，但是不能根据提交时的不同状态进行UI相应的更新，也不能很好的避免用户多次点击。需要进一步对按钮控件进行优化。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种基于状态控制的按钮交互方法，根据交互过程的不同，预设若干按钮的交互状态，基于交互状态对按钮的动画效果进行控制，既能避免按钮的重复点击，也能提升网络加载的过程和结果，系统开销小，用户体验好，有利于App的开发效率及增强交互的及时提示性。

为达到以上目的，本发明采取的技术方案是：

一种基于状态控制的按钮交互方法，其特征在于，包括如下步骤：

设定一状态控制机，用于根据交互过程的不同，预设若干交互状态，预设交互状态适用的控件，预设交互状态间的顺序关系；

设定一状态处理控制机，用于根据交互过程的不同，预设交互状态对应的处理算法；

设定一处理算法控制机，用于根据交互过程的不同，预设处理算法的版本，预设处理算法的处理函数及代码，预设处理算法生效或失效状态，预设处理算法调用权限管理；

当用户发起或App发起的交互事件被触发，根据交互事件，调用状态控制机，确定交互状态，

根据交互状态，调用状态处理控制机，确定处理算法，

根据处理算法，调用处理算法控制机，执行或禁用处理算法，提示处理算法的运行情况，

处理算法被调用时，向状态控制机反馈必要数据，供状态控制机实时分析交互状态的变化，根据状态控制机实时反馈的交互状态的变化，切换处理算法，完成交互控制和/或控件动画效果展现。

在上述技术方案的基础上，默认交互状态适用的控件为按钮控件，

所述交互状态包括：

初始状态，呈现圆角矩形按钮，

网络加载过程状态，呈现圆形进度条，

网络加载结果状态，呈现带对号的圆角矩形，

过渡状态，用于初始化数据及前述状态间切换时的相应数据处理。

在上述技术方案的基础上，所述按钮控件，为自定义带提交状态按钮类SubmitView，继承Android系统提供的View类，用来绘制按钮及在按钮中呈现网络加载的过程和结果，

网络加载的过程用于向用户呈现提交状态，

网络加载的结果用于向用户呈现提交结果。

在上述技术方案的基础上，定义枚举AniState，通过枚举值预设若干交互状态，具体包括：

INIT，初始状态，

FIRST_START，背景和字体颜色开始改变，

FIRST_STOP，背景和字体颜色改变结束，

SECOND_START，字体大小开始改变，

SECOND_STOP，字体大小改变结束，

THIRD_START，圆角矩形按钮转变圆形进度条，

THIRD_STOP，已完成转变圆形进度条，

FOURTH_START，圆形进度条呈现进度，

FOURTH_STOP，已完成呈现进度，

FIFTH_START，圆形进度条转变带对号的圆角矩形，

FIFTH_STOP，圆角矩形按钮转变带对号的圆角矩形。

在上述技术方案的基础上，预设交互状态对应的处理算法如下：

设定变量mAniState，是自定义AniState枚举类型的实例，用来记录当前状态类型，根据不同的状态值调用相应的方法进行绘制，

状态类型为INIT则调用drawInit(canvas)处理算法；

状态类型为FIRST_START则调用drawFirstStart(canvas)处理算法；

状态类型为SECOND_START则调用drawSecondStart(canvas)处理算法；

状态类型为THIRD_START则调用drawThirdStart(canvas)处理算法；

状态类型为FOURTH_START则调用drawFourthStart(canvas)处理算法；

状态类型为FIFTH_START则调用drawFifthStart(canvas)处理算法；

状态类型为FIFTH_STOP则调用drawFirst(canvas)处理算法。

在上述技术方案的基础上，通过变量mAniState，中的方法isPlaying来判断当前动画是否继续进行，如果进行调用View中的invalidata方法进行刷新重新绘制。

在上述技术方案的基础上，drawInit处理算法用来绘制初始控件的状态，具体包括：

在用来绘制的画布canvas中，初始以下信息：

变量mBorderPaint是用来绘制圆角边框的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mBackPaint是用来绘制背景颜色的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mTextPaint是用来绘制文字的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

调用画布canvas中的方法drawRoundRect来绘制圆角矩形，

调用画笔mTextPaint中的方法setTextSize来设置字体的大小mTextPaint.setTextSize(mRadius/2)，

调用画笔mTextPaint中的方法getTextBounds来获取绘制字体所需的空间大小mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds)，参数mText是要绘制的文字，

调用画布canvas中的方法drawText来绘制文字。

在上述技术方案的基础上，drawFirst处理算法用来改变背景和字体的颜色，具体包括：

在用来绘制的画布canvas中，设定以下信息：

调用绘制背景的画笔mBackPaint中的方法setColor，设定新的背景颜色，新颜色通过getFirstColor方法获取，

调用绘制文字的画笔mTextPaint中的方法setColor，设定新的文字颜色，新颜色通过getFirstTextColor方法获取，

getFirstColor方法和getFirstTextColor方法根据当前动画的时间计算出新颜色的取值。

在上述技术方案的基础上，定义以下变量，用来控制按钮的交互响应：

变量mCanClick，用来控制按钮的点击事件，是Android系统提供的布尔数据类型，

定义变量mIfReset，用来控制按钮的重置事件，是Android系统提供的布尔数据类型；

定义方法onClick，用来处理点击事件。

在上述技术方案的基础上，在方法onClick中，通过布尔数据类型的变量mCanClick，判断是否可以点击，当点击一次后，则把mCanClick设置为不可点击，

通过Android系统提供的View类中的方法invalidate来重新绘制控件。

本发明所述的基于状态控制的按钮交互方法，根据交互过程的不同，预设若干按钮的交互状态，基于交互状态对按钮的动画效果进行控制，既能避免按钮的重复点击，也能提升网络加载的过程和结果，系统开销小，用户体验好，有利于App的开发效率及增强交互的及时提示性。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1所示，本发明所述的基于状态控制的按钮交互方法，包括如下步骤：

设定一状态控制机，用于根据交互过程的不同，预设若干交互状态，预设交互状态适用的控件，预设交互状态间的顺序关系；

设定一状态处理控制机，用于根据交互过程的不同，预设交互状态对应的处理算法；

设定一处理算法控制机，用于根据交互过程的不同，预设处理算法的版本，预设处理算法的处理函数及代码，预设处理算法生效或失效状态，预设处理算法调用权限管理；

当用户发起或App发起的交互事件被触发，根据交互事件，调用状态控制机，确定交互状态，

根据交互状态，调用状态处理控制机，确定处理算法，

根据处理算法，调用处理算法控制机，执行或禁用处理算法，提示处理算法的运行情况，

处理算法被调用时，向状态控制机反馈必要数据，供状态控制机实时分析交互状态的变化，根据状态控制机实时反馈的交互状态的变化，切换处理算法，完成交互控制和/或控件动画效果展现。

在上述技术方案的基础上，默认交互状态适用的控件为按钮控件，

所述交互状态包括：

初始状态，呈现圆角矩形按钮，

网络加载过程状态，呈现圆形进度条，

网络加载结果状态，呈现带对号的圆角矩形，

过渡状态，用于初始化数据及前述状态间切换时的相应数据处理。

在上述技术方案的基础上，所述按钮控件，为自定义带提交状态按钮类SubmitView，继承Android系统提供的View类，用来绘制按钮及在按钮中呈现网络加载的过程和结果，

网络加载的过程用于向用户呈现提交状态，

网络加载的结果用于向用户呈现提交结果。

在上述技术方案的基础上，定义枚举AniState，通过枚举值预设若干交互状态，具体包括：

INIT，初始状态，

FIRST_START，背景和字体颜色开始改变，

FIRST_STOP，背景和字体颜色改变结束，

SECOND_START，字体大小开始改变，

SECOND_STOP，字体大小改变结束，

THIRD_START，圆角矩形按钮转变圆形进度条，

THIRD_STOP，已完成转变圆形进度条，

FOURTH_START，圆形进度条呈现进度，

FOURTH_STOP，已完成呈现进度，

FIFTH_START，圆形进度条转变带对号的圆角矩形，

FIFTH_STOP，圆角矩形按钮转变带对号的圆角矩形。

在上述技术方案的基础上，预设交互状态对应的处理算法如下：

设定变量mAniState，是自定义AniState枚举类型的实例，用来记录当前状态类型，根据不同的状态值调用相应的方法进行绘制，

状态类型为INIT则调用drawInit(canvas)处理算法；

状态类型为FIRST_START则调用drawFirstStart(canvas)处理算法；

状态类型为SECOND_START则调用drawSecondStart(canvas)处理算法；

状态类型为THIRD_START则调用drawThirdStart(canvas)处理算法；

状态类型为FOURTH_START则调用drawFourthStart(canvas)处理算法；

状态类型为FIFTH_START则调用drawFifthStart(canvas)处理算法；

状态类型为FIFTH_STOP则调用drawFirst(canvas)处理算法。

在上述技术方案的基础上，通过变量mAniState，中的方法isPlaying来判断当前动画是否继续进行，如果进行调用View中的invalidata方法进行刷新重新绘制。

例如，可采用如下代码：

private void onDraw(Canvas canvas){

switch (mAniState) {

case INIT: drawInit(canvas); break;

case FIRST_START: drawFirstStart(canvas); break;

case SECOND_START: drawSecondStart(canvas); break;

case THIRD_START: drawThirdStart(canvas); break;

case F OURTH_START: drawFourthStart(canvas); break;

case FIFTH_START: drawFifthStart(canvas); break;

case FIFTH_STOP: drawFirst(canvas); break;

}

if (mAniState.isPlaying()) invalidate();

}。

在上述技术方案的基础上，drawInit处理算法用来绘制初始控件的状态，具体包括：

在用来绘制的画布canvas中，初始以下信息：

变量mBorderPaint是用来绘制圆角边框的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mBackPaint是用来绘制背景颜色的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mTextPaint是用来绘制文字的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

调用画布canvas中的方法drawRoundRect来绘制圆角矩形，

调用画笔mTextPaint中的方法setTextSize来设置字体的大小mTextPaint.setTextSize(mRadius/2)，

调用画笔mTextPaint中的方法getTextBounds来获取绘制字体所需的空间大小mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds)，参数mText是要绘制的文字，

调用画布canvas中的方法drawText来绘制文字。

变量mBorderPaint，是Android系统提供的画笔Paint类型的变量，用来绘制自定义控件的边框，

变量mBackPaint，是Android系统提供的画笔Paint类型的变量，用来绘制圆角矩形的背景，

变量mTextPaint，是Android系统提供的画笔Paint类型的变量，用来绘制自定义控件的文字。

默认通过两个常量COLOR_BACK和COLOR_GREY提供颜色的十六进制值，是Android系统提供的int数据类型。

例如，可采用如下代码：

private void drawInit(Canvas canvas){

mBorderPaint.setColor(mColor);

mBackPaint.setColor(mColor);

mTextPaint.setColor(mColor);

canvas.drawRoundRect(mRect, mRadius, mRadius, mBorderPaint); 参数mRect是圆角矩形的位置，参数mRadius是圆角矩形的角度，

mTextPaint.setTextSize(mRadius/2);

mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds);

canvas.drawText(mText, mWidth / 2 - mTextBounds.width() / 2, mHeight/ 2 + mTextBounds.height() / 2, mTextPaint);

}。

在上述技术方案的基础上，drawFirst处理算法用来改变背景和字体的颜色，具体包括：

在用来绘制的画布canvas中，设定以下信息：

调用绘制背景的画笔mBackPaint中的方法setColor，设定新的背景颜色，新颜色通过getFirstColor方法获取，

调用绘制文字的画笔mTextPaint中的方法setColor，设定新的文字颜色，新颜色通过getFirstTextColor方法获取，

getFirstColor方法和getFirstTextColor方法根据当前动画的时间计算出新颜色的取值。

例如，可采用如下代码：

private void drawFirst(Canvas canvas){

mBackPaint.setColor(getFirstColor());

mTextPaint.setColor(getFirstTextColor());

}。

getFirstColor方法定义如下

private int getFirstColor() {

return Color.argb(getFirstRatio()==1 问号 0xff : (int)(getFirstRatio() * 0xff), Color.red(mColor), Color.green(mColor), Color.blue(mColor));

}

getFirstRatio是获取动画进度，如果动画完成了，就返回0xff白色，否则，就根据进度乘以0xff白色来设置颜色。

private float getFirstRatio() {

long now = System.currentTimeMillis();

if (now >= mFirstStopT) {

mAniState = AniState.FIRST_STOP;

mAniState = AniState.SECOND_START;

return 1;

}

float ratio = (float)(now - mFirstStartT) / (float) FIRST_DURATION;

return ratio > 1 问号 1 : ratio;

}

这个函数的作用是获取第一次播放动画时候的播放比例，其中，now获取当前的时间戳，如果当前时间戳大于等于第一次动画结束时间mFirstStopT，就设置一下当前的动画状态值，返回1；否则，就根据当前时间和动画持续时间，计算出动画的执行进度ratio，并返回，这个函数在绘制文字的时候，会根据进度值来改变文字的颜色，有个渐变的过程。

在上述技术方案的基础上，定义以下变量，用来控制按钮的交互响应：

变量mCanClick，用来控制按钮的点击事件，是Android系统提供的布尔数据类型，

定义变量mIfReset，用来控制按钮的重置事件，是Android系统提供的布尔数据类型；

定义方法onClick，用来处理点击事件。

在上述技术方案的基础上，在方法onClick中，通过布尔数据类型的变量mCanClick，判断是否可以点击，当点击一次后，则把mCanClick设置为不可点击，

通过Android系统提供的View类中的方法invalidate来重新绘制控件。

在上述技术方案的基础上，方法onClick，具体包括：

设定变量mCanClick，是Android系统提供的布尔数据类型的变量，用来判断是否可以点击，

点击后把mCanClick设置为不可点击，把当前的状态标志设置为开始，

调用方法firstAniStart，是自定义的方法用来设置动画的开始时间和动画第一阶段的结束时间，

调用方法invalidate，是Android系统提供的View类中的方法用来重新绘制控件。

例如，可采用如下代码：

public void onClick(View v) {

if (mCanClick) {

mCanClick = false;

if (mAniState == AniState.INIT) {

mAniState = AniState.FIRST_START;

firstAniStart();

invalidate();

}

}

}。

方法firstAniStart，用来记录动画开始执行的时间和设置动画第一阶段结束的时间，具体包括：

设定变量mFirstStartT，是Android系统提供的的长整型数据类型的变量，用来记录动画开始的时间戳，该时间戳通过Android系统提供的System类中的方法currentTimeMillis来获取系统当前的时间戳，

设定变量mFirstStopT，是Android系统提供的长整型数据类型的变量，用来计算动画第一阶段结束的时间，mFirstStopT = mFirstStartT + FIRST_DURATION，FIRST_DURATION是第一次动画执行的时间，单位是毫秒，值为300，开发者可以根据不同的项目需求，修改这个时间。

例如，可采用如下代码：

private void firstAniStart() {

mFirstStartT = System.currentTimeMillis();

mFirstStopT = mFirstStartT + FIRST_DURATION;

}。

在上述技术方案的基础上，定义接口OnProgressDone和其中的抽象方法progressDown，用来监听回调加载成功后的操作，

定义接口OnProgressStart和其中的抽象方法progressStart，用来监听回调开始加载的过程。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (10)

1.一种基于状态控制的按钮交互方法，其特征在于，包括如下步骤：

设定一状态控制机，用于根据交互过程的不同，预设若干交互状态，预设交互状态适用的控件，预设交互状态间的顺序关系；

设定一状态处理控制机，用于根据交互过程的不同，预设交互状态对应的处理算法；

设定一处理算法控制机，用于根据交互过程的不同，预设处理算法的版本，预设处理算法的处理函数及代码，预设处理算法生效或失效状态，预设处理算法调用权限管理；

当用户发起或App发起的交互事件被触发，根据交互事件，调用状态控制机，确定交互状态，

根据交互状态，调用状态处理控制机，确定处理算法，

根据处理算法，调用处理算法控制机，执行或禁用处理算法，提示处理算法的运行情况，

处理算法被调用时，向状态控制机反馈必要数据，供状态控制机实时分析交互状态的变化，根据状态控制机实时反馈的交互状态的变化，切换处理算法，完成交互控制和/或控件动画效果展现。

2.如权利要求1所述的基于状态控制的按钮交互方法，其特征在于：默认交互状态适用的控件为按钮控件，

所述交互状态包括：

初始状态，呈现圆角矩形按钮，

网络加载过程状态，呈现圆形进度条，

网络加载结果状态，呈现带对号的圆角矩形，

过渡状态，用于初始化数据及前述状态间切换时的相应数据处理。

3.如权利要求2所述的基于状态控制的按钮交互方法，其特征在于：所述按钮控件，为自定义带提交状态按钮类SubmitView，继承Android系统提供的View类，用来绘制按钮及在按钮中呈现网络加载的过程和结果，

网络加载的过程用于向用户呈现提交状态，

网络加载的结果用于向用户呈现提交结果。

4.如权利要求2所述的基于状态控制的按钮交互方法，其特征在于：定义枚举AniState，通过枚举值预设若干交互状态，具体包括：

INIT，初始状态，

FIRST_START，背景和字体颜色开始改变，

FIRST_STOP，背景和字体颜色改变结束，

SECOND_START，字体大小开始改变，

SECOND_STOP，字体大小改变结束，

THIRD_START，圆角矩形按钮转变圆形进度条，

THIRD_STOP，已完成转变圆形进度条，

FOURTH_START，圆形进度条呈现进度，

FOURTH_STOP，已完成呈现进度，

FIFTH_START，圆形进度条转变带对号的圆角矩形，

FIFTH_STOP，圆角矩形按钮转变带对号的圆角矩形。

5.如权利要求4所述的基于状态控制的按钮交互方法，其特征在于：预设交互状态对应的处理算法如下：

设定变量mAniState，是自定义AniState枚举类型的实例，用来记录当前状态类型，根据不同的状态值调用相应的方法进行绘制，

状态类型为INIT则调用drawInit(canvas)处理算法；

状态类型为FIRST_START则调用drawFirstStart(canvas)处理算法；

状态类型为SECOND_START则调用drawSecondStart(canvas)处理算法；

状态类型为THIRD_START则调用drawThirdStart(canvas)处理算法；

状态类型为FOURTH_START则调用drawFourthStart(canvas)处理算法；

状态类型为FIFTH_START则调用drawFifthStart(canvas)处理算法；

状态类型为FIFTH_STOP则调用drawFirst(canvas)处理算法。

6.如权利要求5所述的基于状态控制的按钮交互方法，其特征在于：通过变量mAniState，中的方法isPlaying来判断当前动画是否继续进行，如果进行调用View中的invalidata方法进行刷新重新绘制。

7.如权利要求5所述的基于状态控制的按钮交互方法，其特征在于：drawInit处理算法用来绘制初始控件的状态，具体包括：

在用来绘制的画布canvas中，初始以下信息：

变量mBorderPaint是用来绘制圆角边框的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mBackPaint是用来绘制背景颜色的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

变量mTextPaint是用来绘制文字的画笔，根据传入的颜色mColor，调用设置画笔的颜色的方法setColor，

调用画布canvas中的方法drawRoundRect来绘制圆角矩形，

调用画笔mTextPaint中的方法setTextSize来设置字体的大小mTextPaint.setTextSize(mRadius/2)，

调用画笔mTextPaint中的方法getTextBounds来获取绘制字体所需的空间大小mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds)，参数mText是要绘制的文字，

调用画布canvas中的方法drawText来绘制文字。

8.如权利要求5所述的基于状态控制的按钮交互方法，其特征在于：drawFirst处理算法用来改变背景和字体的颜色，具体包括：

在用来绘制的画布canvas中，设定以下信息：

调用绘制背景的画笔mBackPaint中的方法setColor，设定新的背景颜色，新颜色通过getFirstColor方法获取，

调用绘制文字的画笔mTextPaint中的方法setColor，设定新的文字颜色，新颜色通过getFirstTextColor方法获取，

getFirstColor方法和getFirstTextColor方法根据当前动画的时间计算出新颜色的取值。

9.如权利要求5所述的基于状态控制的按钮交互方法，其特征在于：定义以下变量，用来控制按钮的交互响应：

变量mCanClick，用来控制按钮的点击事件，是Android系统提供的布尔数据类型，

定义变量mIfReset，用来控制按钮的重置事件，是Android系统提供的布尔数据类型；

定义方法onClick，用来处理点击事件。

10.如权利要求9所述的基于状态控制的按钮交互方法，其特征在于：在方法onClick中，通过布尔数据类型的变量mCanClick，判断是否可以点击，当点击一次后，则把mCanClick设置为不可点击，

通过Android系统提供的View类中的方法invalidate来重新绘制控件。