该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html

一、知识点讲解

当我们点击系统自带的按钮时,按钮的外观会发生变化。上篇博文中我们画了一个三角形按钮,但点击还不能变色,下面我们就来实现点击变色功能。

从知识体系上我们需要了解以下两个知识点

  • 1.如何知道手指点击了我们的控件?

办法是重写View中的onTouchEvent方法。当手指触摸到我们的控件时,系统会通过该方法告诉我们。该方法还有一个类型为MotionEvent的参数,通过该参数我们就能知道当前触摸事件的具体类型,比如按下、移动、抬起等。
我们可以让按钮在正常情况下显示一个较暗的颜色,按下时显示一个较亮的颜色,抬起后再恢复到较暗的颜色。这样就实现了点击变色的效果了。

  • 2.如何变色?

View中提供了一个叫invalidate的方法,每次调用该方法,系统都会重新调用onDraw方法来重绘本控件。我们要做的就是在onDraw中判断当前的触摸动作,如果是按下就画一个高亮的三角形,没有触摸或按下抬起后就画一个较暗的三角形。

了解了相关的知识点,下面我们就通过代码来实现。

二、代码实现

以下是当前DirectionKeys类的全部代码:

package net.chengyujia.happysnake;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View; /**
* Created by ChengYuJia on 2016/8/19.
* 屏幕上的虚拟方向键
*/
public class DirectionKeys extends View {
//左三角形按压时的颜色(较亮)
private int leftPressedColor = 0xFFFF0000;
//左三角形正常显示的颜色(较暗)
private int leftNormalColor = 0xFFAA0000;
//手触摸屏幕的动作,初始值用一个MotionEvent中没有用到的action值,比如-10,表示还没有任何触屏动作发生。
private int action = -10;
//画布的宽
private int width;
//画布的高
private int height;
//画左三角形的路径
private Path pathLeft = new Path();
//画笔
private Paint paint = new Paint();
//初始化方法是否执行过,确保初始化方法只执行一次。
private boolean initDone = false; //只有一个参数的构造方法是我们在程序中通过“new”关键字创建实例时调用。
public DirectionKeys(Context context) {
super(context);
} //有两个参数的构造方法是系统在XML布局文件中创建实例时调用。
public DirectionKeys(Context context, AttributeSet attrs) {
super(context, attrs);
} //初始化方法
private void init(Canvas canvas) {
/*获取画布的长和宽*/
width = canvas.getWidth();
height = canvas.getHeight();
/*
(小提示:在计算机中一般都是将左上角作为坐标原点的)
画布上四个顶点和中心点的坐标如下:
左上点 0,0
左下点 0,height
右上点 width,0
右下点 width,height
中心点 width/2,height/2
*/ /*设置左三角形的路径数据*/
//从画布左上点开始
pathLeft.moveTo(0, 0);
//画直线到画布中心点
pathLeft.lineTo(width / 2, height / 2);
//再画直线到画布左下点
pathLeft.lineTo(0, height);
//自动闭合图形。从最后一个点(左下点)画直线到第一个点(左上点)。
pathLeft.close();
} /**
* 通过重写父类的onDraw方法来绘制我们需要的图形
* 该方法会在控件第一次显示时被系统调用,并在之后每次调用invalidate方法后被系统调用。
*
* @param canvas 这里的canvas是系统提供的一块矩形画布,我们要做的就是在这块画布上画我们想要的东西。
*/
@Override
protected void onDraw(Canvas canvas) {
if (!initDone) {
init(canvas);
//确保初始化方法只执行一次
initDone = true;
} if (action == MotionEvent.ACTION_DOWN) {
//手按压时高亮显示
paint.setColor(leftPressedColor);
} else {
//没有按或按下抬起后显示较暗的颜色
paint.setColor(leftNormalColor);
}
//画左三角形
canvas.drawPath(pathLeft, paint);
} /**
* 如果手触摸到我们的控件,系统会通过该方法告诉我们
*
* @param event 系统给我们传递的触摸事件参数
* @return 如果该触摸事件被我们处理了返回true,反之返回false。
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
action = event.getAction();
//ACTION_DOWN表示手按到屏幕,ACTION_UP表示手从屏幕上抬起。我们只处理这两种动作。
if (action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_UP) {
//invalidate方法是告诉系统当前控件需要重绘,系统会再次调用onDraw方法来实现重绘。
invalidate();
return true;
}
return false;
}
}

上面注释比较详细,主要就3个方法onDraw(绘图)、onTouchEvent(监听触摸事件)、invalidate(让系统调用onDraw方法实现重绘)。

另外Path对象和Paint对象只要初始化一次就可以了,没必要每次onDraw的时候重新创建,提高程序性能。

三、运行效果

正常时显示暗色:

按下时显示亮色:

测试的时候会发现,点击非三角形区域也会变色,这因为我们还没有对点击的位置做判断,这个会在后面讲解。

先到这里,下文继续。:)

Android快乐贪吃蛇游戏实战项目开发教程-04虚拟方向键(三)三角形按钮效果的更多相关文章

  1. Android快乐贪吃蛇游戏实战项目开发教程-05虚拟方向键(四)四个三角形按钮

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.如何判断点击的是哪个方向键按钮 在上篇教程中我们实现了左边的三角形按钮效果, ...

  2. Android快乐贪吃蛇游戏实战项目开发教程-02虚拟方向键(一)自定义控件概述

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.自定义控件简介 在本项目中,无论是游戏主区域还是虚拟方向键都是通过自定义控件 ...

  3. Android快乐贪吃蛇游戏实战项目开发教程-06虚拟方向键(五)绘制方向键箭头

    本系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html本系列教程项目源码GitHub地址:https://github.com/jack ...

  4. Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.绘制三角形 在上一篇文章中,我们已经新建了虚拟方向键的自定义控件Direct ...

  5. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  6. 原生Js贪吃蛇游戏实战开发笔记

    前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...

  7. Android实现贪吃蛇游戏

    [绥江一百]http://www.sj100.net                                                  欢迎,进入绥江一百感谢点击[我的小网站,请大家多 ...

  8. 【C语言项目】贪吃蛇游戏(上)

    目录 00. 目录 01. 开发背景 02. 功能介绍 03. 欢迎界面设计 3.1 常用终端控制函数 3.2 设置文本颜色函数 3.3 设置光标位置函数 3.4 绘制字符画(蛇) 3.5 欢迎界面函 ...

  9. 使用Love2D引擎开发贪吃蛇游戏

    今天来介绍博主近期捣腾的一个小游戏[贪吃蛇],贪吃蛇这个游戏相信大家都不会感到陌生吧.今天博主将通过Love2D这款游戏引擎来为大家实现一个简单的贪吃蛇游戏,在本篇文章其中我们将会涉及到贪吃蛇的基本算 ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom(7):索引器

    在开始正题之前,先补充一点前面的内容. 在方法中,如果要引用方法参数,前面的示例中,老周使用的是 CodeVariableReferenceExpression 类,它用于引用变量,也适用于引用方法参 ...

  2. android自定义控件一站式入门

    自定义控件 Android系统提供了一系列UI相关的类来帮助我们构造app的界面,以及完成交互的处理. 一般的,所有可以在窗口中被展示的UI对象类型,最终都是继承自View的类,这包括展示最终内容的非 ...

  3. spark处理大规模语料库统计词汇

    最近迷上了spark,写一个专门处理语料库生成词库的项目拿来练练手, github地址:https://github.com/LiuRoy/spark_splitter.代码实现参考wordmaker ...

  4. Yeoman 官网教学案例:使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  5. const extern static 终极指南

    const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...

  6. AJAX操作数据

    本文使用AJAX访问数据库文件,并显示在网页中.另外还有AJAX对数据库的删除操作,网页不加载,只刷新数据. 随意使用数据库中的一张表: 使用AJAX显示表中内容,首先打入body代码: <h1 ...

  7. 【开源毕设】一款精美的家校互动APP分享——爱吖校推 [你关注的,我们才推](持续开源更新3)附高效动态压缩Bitmap

    一.写在前面 爱吖校推如同它的名字一样,是一款校园类信息推送交流平台,这么多的家校互动类软件,你选择了我,这是我的幸运.从第一次在博客园上写博客到现在,我一次一次地提高博文的质量和代码的可读性,都是为 ...

  8. dotNet Core开发环境搭建及简要说明

    一.安装 .NET Core SDK 在 Windows 上使用 .NET Core 的最佳途径:使用Visual Studio. 免费下载地址: Visual Studio Community 20 ...

  9. Effective前端2:优化html标签

    div { float: left; } .keyboard > div + div { margin-left: 8px; } --> div{display:table-cell;ve ...

  10. WPF 捕获键盘输入事件

    最近修改的一个需求要求捕获键盘输入的 Text,包括各种标点符号. 最开始想到的是 PreviewKeyDown 或者 PreviewKeyUp 这样的键盘事件. 但是这两个事件的对象 KeyEven ...