超酷的计步器APP（一）——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
超酷的计步器APP（一）——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
好久没写博客了，没给大家分享技术了，真是有些惭愧。这段时间我在找工作，今年Android的行情也不怎么好，再加上我又是一个应届生，所以呢，更是不好找了。但是我没有放弃，经过自己的不懈努力，还是找到了自己喜欢的Android工作，心里的一块石头终于落下了。但是迎接我来的是更多的挑战，我喜欢那种不断的挑战自我，在困难中让自己变得更强大的感觉。相信阳光总在风雨后，因为每一个你不满意的现在，都有一个你没有努力的曾经。所以我们一起努力，为了生活，生下来、活下去。
今天我们来一起学习一个很酷的小项目——计步器。
关于这个项目我想分两篇博客来和大家分享，一篇先来学习界面和功能中用到的自定义控件，下篇来实现动画和计步器连接起来开始计算步数的效果
我们先来看效果图。
是不是很酷很炫呢，哈哈，我觉得酷酷哒。
那么我们今天先来学习那个很酷的效果图的实现。
点击开始按钮，出现结束和暂停按钮，开始按钮隐藏，横线变波浪的效果
我们先新建一个Android项目，开始在main_activity.xml中书写布局
先来看这个布局的Component Tree
我们来写他的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg4_dark_blackish_green"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/activity_walking_backgroud"
android:orientation="vertical">
<include layout="@layout/top_bar" />
<TextView
android:id="@+id/step_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="90dp"
android:textColor="@color/white"
android:textSize="70sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="18dp"
android:text="计算步数"
android:textColor="@color/white"
android:textSize="13sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="35dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="50dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="@+id/iv_calories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="@mipmap/calories" />
<TextView
android:id="@+id/calories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@id/iv_calories"
android:textColor="@color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/tv_calories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/calories"
android:layout_toRightOf="@id/iv_calories"
android:text="热量：千卡"
android:textColor="@color/white"
android:textSize="10sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="@+id/iv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@mipmap/time" />
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@id/iv_time"
android:text="0"
android:textColor="@color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/time"
android:layout_toRightOf="@id/iv_time"
android:text="时间：分钟"
android:textColor="@color/white"
android:textSize="10sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<com.adu.running.view.WaveView
android:id="@+id/wave_view"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="27dp">
<com.adu.running.view.CircleButton
android:id="@+id/stop"
android:layout_width="94dp"
android:layout_height="94dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="结束"
android:textColor="@color/white"
android:visibility="gone"/>
<com.adu.running.view.CircleWaveButton
android:id="@+id/start"
android:layout_width="94dp"
android:layout_height="94dp"
android:layout_centerInParent="true"
android:textColor="@color/white"/>
<com.adu.running.view.CircleButton
android:id="@+id/bt_continue"
android:layout_width="94dp"
android:layout_height="94dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:text="暂停"
android:textColor="@color/white"
android:visibility="gone"/>
</RelativeLayout>
</LinearLayout>如果你直接复制上面的代码到你的项目中肯定会报错的，因为上面的布局中我们引用了一个自定义的toolbar布局和几个颜色值，还有几个自定义View
一会我会把代码给大家传上去，或者直接看我GitHub上面的源码
我们现在看下面的三个自定义View怎么来完成的
WaveView.java自定义波纹类
package com.adu.running.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
/** * Created by adu on 2016/10/30. */
public class WaveView extends View {
//波纹颜色
private int waveColor = 0xff0099CC;
// 振幅
private float swing = 0;
private int height;
private int width;
private int ms = 30;
private float isPause=0f;
private boolean isRun = false;
//绘制波纹的画笔
private Paint wavePaint;
//Path类可以预先在View上将N个点连成一条"路径"
// 然后调用Canvas的drawPath(path,paint)即可沿着路径绘制图形
private Path path1;
private Path path2;
private Path path3;
public WaveView(Context context) {
super(context);
init();
}
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
// 初始绘制波纹的画笔
wavePaint = new Paint();
// 去除画笔锯齿
wavePaint.setAntiAlias(true);
//设置画笔颜色
wavePaint.setColor(waveColor);
//设置线宽
wavePaint.setStrokeWidth(5);
//设置风格为空心
wavePaint.setStyle(Paint.Style.STROKE);
path1 = new Path();
path2 = new Path();
path3 = new Path();
}
/** * 计算view高度宽度大小 * @param widthMeasureSpec * @param heightMeasureSpec */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
initLayoutParams();
}
private void initLayoutParams() {
height = this.getHeight();
width = this.getWidth();
}
@Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
setPath();
wavePaint.setStrokeWidth(6);
wavePaint.setAlpha(100);//设置透明度
canvas.drawPath(path1, wavePaint);
wavePaint.setStrokeWidth(3);
wavePaint.setAlpha(80);
canvas.drawPath(path2, wavePaint);
wavePaint.setAlpha(60);
canvas.drawPath(path3, wavePaint);
}
/** * 设置三个线条上下震动的振幅 */
private void setPath() {
int x = 0;
int y = 0;
path1.reset();//清除掉path里的线条和曲线
for (int i = 0; i < width; i++) {
x = i;
y = (int) (isPause*40* Math.sin(i * 2*0.7f * Math.PI / width+swing) + height*0.5);
if (i == 0) {
path1.moveTo(x, y);//定位绘画开始位置
}
//绘制圆滑曲线，即贝塞尔曲线；(x, y)为控制点，(x + 1, y)为结束点
path1.quadTo(x, y, x + 1, y);
}
path2.reset();
for (int i = 0; i < width; i++) {
x = i;
y = (int) (isPause*40* Math.sin(i * 2*0.7f * Math.PI / width+swing+0.3f) + height*0.5);
if (i == 0) {
path2.moveTo(x, y);
}
path2.quadTo(x, y, x + 1, y);
}
path3.reset();
for (int i = 0; i < width; i++) {
x = i;
y = (int) (isPause*40* Math.sin(i * 2*0.7f * Math.PI / width+swing+0.3f) + height*0.5);
if (i == 0) {
path3.moveTo(x, y);
}
path3.quadTo(x, y, x + 1, y);
}
path1.close();//回到初始点形成封闭的曲线
path2.close();
path3.close();
}
public void start(){
this.isRun=true;
this.isPause=1.0f;
new MyThread().start();//让波纹在子线程中运行
}
public void stop(){
this.isRun=false;
this.isPause=0.0f;
invalidate();//请求重新绘制的界面
}
private class MyThread extends Thread {
@Override
public void run() {
while (isRun) {
swing+=-0.25f;
mHandler.sendEmptyMessage(1);
try {
Thread.sleep(ms);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
if (msg.what == 1) {
invalidate();//请求重新绘制的界面
}
}
};
}
让我们在MainActivity的布局中新建两个Button按钮开对自定义波纹类进行测试，分别调用它的start( )和stop( )方法，运行结果如下：
点击开始，波纹会上下起伏，点击停止，它会恢复到停止状态
接着，我们看下面的三个按钮是怎么实现的，其实是两个自定义的Button
CircleWaveButton.java 开始按钮
package com.adu.running.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.Button;
import com.adu.running.R;
/** * Created by adu on 2016/10/30. */
public class CircleWaveButton extends Button{
//这是默认颜色
private int paintColor= R.color.circle_bule_bbd4e7;
//画圆的画笔
private Paint paint = new Paint();
//画字的画笔
private Paint textPaint = new Paint();
private int radiusInt = 0;
//这是默认文字内容
private String text="开始";
private Boolean isStart = false;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
invalidate();
if (isStart) {
radiusInt++;
if (radiusInt > 50) {
radiusInt = 0;
}
sendEmptyMessageDelayed(0, 20);
}
}
};
public CircleWaveButton(Context context) {
super(context);
init();
}
public CircleWaveButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CircleWaveButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setBackgroundColor(getResources().getColor(R.color.running));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centre = getWidth() / 2;
int radius = centre;
//绘制圆的画笔
Paint newPaint = new Paint();
newPaint.setAntiAlias(true); // 去除画笔锯齿
newPaint.setStyle(Paint.Style.FILL);// 设置风格为实线
//用来进行环形渲染
Shader shader = new RadialGradient(centre, centre, radius, getResources().getColor(paintColor), getResources().getColor(R.color.running), Shader.TileMode.CLAMP);
//设置图像效果，使用Shader可以绘制出各种渐变效果
newPaint.setShader(shader);
//绘制圆形（圆心的x坐标，圆心的y坐标，圆的半径，绘制时所使用的画笔）
canvas.drawCircle(centre, centre, radius, newPaint);
paint.setColor(getResources().getColor(paintColor));
paint.setStyle(Paint.Style.FILL); //设置风格为实线
paint.setAntiAlias(true); // 去除画笔锯齿
for(int i=1;i<=5;i++){
paint.setAlpha(20*i);//设置绘制图形的透明度
//绘制圆形（圆心的x坐标，圆心的y坐标，圆的半径，绘制时所使用的画笔）
canvas.drawCircle(centre, centre, radius * (10- i)/ 10, paint);
}
paint.setColor(getResources().getColor(paintColor));
paint.setStyle(Paint.Style.STROKE); //设置风格为空心
paint.setStrokeWidth(radius * 2 / 12); //设置线宽
for(int i=0;i<3;i++) {
paint.setAlpha(60-i*20);//设置绘制图形的透明度
//绘制圆形（圆心的x坐标，圆心的y坐标，圆的半径，绘制时所使用的画笔）
canvas.drawCircle(centre, centre, radius * (14-i*2 + radiusInt / 50.0f) / 16, paint);
}
textPaint.setTextSize(getTextSize());
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(getTextColors().getDefaultColor());
//获取文字的宽度值
float length = textPaint.measureText(text);
//绘制文字
canvas.drawText(text, centre - length / 2, centre + getTextSize() / 3, textPaint);
}
public void start() {
isStart = true;
handler.sendEmptyMessage(0);
}
public void stop() {
isStart = false;
handler.removeMessages(0);
}
}
我们在MainActivity设置CircleWaveButton的点击事件调用它的start( )方法，会看到下面的效果
下面我们看最后一个自定义Button，结束的Button和暂停的Button只是颜色不一样，其他都是一样的。
CircleButton.xml暂停结束按钮
package com.adu.running.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.Button;
import com.adu.running.R;
/** * Created by adu on 2016/10/30. */
public class CircleButton extends Button {
//画圆
private Paint paint = new Paint();
//画字
private Paint textPaint = new Paint();
private int color;
public CircleButton(Context context) {
super(context);
init();
}
public CircleButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CircleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setBackgroundColor(getResources().getColor(R.color.running));
color=getResources().getColor(R.color.running);
}
@Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centre = getWidth() / 2;
int radius = centre;
paint.setColor(color);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
//绘制圆形（圆心的x坐标，圆心的y坐标，圆的半径，绘制时所使用的画笔）
canvas.drawCircle(centre, centre, radius, paint);
textPaint.setTextSize(getTextSize());
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(getTextColors().getDefaultColor());
float length = textPaint.measureText(getText().toString());
//绘制文字
canvas.drawText(getText().toString(), centre - length / 2, centre + getTextSize() / 3, textPaint);
}
//改变文字颜色
public void setPaintColor(int color) {
this.color = getResources().getColor(color);
}
}
我们就不在测试这个Button了，直接写开始的那个效果
点击开始按钮，然后隐藏它，一个动画的效果出现结束和暂停按钮，并且开启波纹，点暂停波纹停止，点击结束退出。
我们之间在MainActivity中写代码
package com.adu.running;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Point;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.DecelerateInterpolator;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import com.adu.running.view.CircleButton;
import com.adu.running.view.CircleWaveButton;
import com.adu.running.view.WaveView;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.wave_view) WaveView waveView;
@BindView(R.id.startButton) CircleWaveButton startButton; //开始
@BindView(R.id.stop) CircleButton stopButton; //停止
@BindView(R.id.bt_continue) CircleButton btContinue; //暂停继续
private boolean isPause = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initView();
}
private void initView() {
btContinue.setPaintColor(R.color.text_color_1e78be);
startButton.setPaintColor(R.color.circle_bule_bbd4e7);
stopButton.setPaintColor(R.color.circle_red_cd3a33);
startButton.start();
}
@OnClick({ R.id.stop, R.id.startButton, R.id.bt_continue })
public void onClick(View view) {
switch (view.getId()) {
case R.id.stop: //停止并退出
System.exit(0);
break;
case R.id.startButton: //开始
startAnimation();
waveView.start();
break;
case R.id.bt_continue: //暂停继续
if (isPause){
btContinue.setText("暂停");
isPause = false;
waveView.start();
}else {
btContinue.setText("继续");
isPause = true;
waveView.stop();
}
break;
}
}
/** * 按钮动画效果实现的方法 */
private void startAnimation() {
btContinue.setVisibility(View.VISIBLE);//显示暂停按钮
stopButton.setVisibility(View.VISIBLE);//显示停止按钮
//获取屏幕的大小，并把屏幕的宽也就是x赋值给width
WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
//属性动画，传入"alpha"参数，将开始按钮从不透明改变为透明
Animator animatorStart = ObjectAnimator.ofFloat(startButton, "alpha", 1.0f, 0f);
AnimatorSet animatorSetStart = new AnimatorSet();//组合动画
animatorSetStart.playTogether(animatorStart);
animatorSetStart.setInterpolator(new DecelerateInterpolator());//动画效果设置为减速
animatorSetStart.setDuration(1000);//设置动画时长
//将暂停按钮由透明改变为不透明
Animator animatorContinue1 = ObjectAnimator.ofFloat(btContinue, "alpha", 0f, 1.0f);
animatorContinue1.setDuration(3000);//设置动画时长
//将暂停按钮从中间向右边移动
Animator animatorContinue2 = ObjectAnimator.ofFloat(btContinue, "translationX", -width / 3, btContinue.getX());
animatorContinue2.setDuration(2000);//设置动画时长
AnimatorSet animatorSetContinue = new AnimatorSet();
animatorSetContinue.playTogether(animatorContinue1, animatorContinue2);// 并行
animatorSetContinue.setInterpolator(new DecelerateInterpolator());//动画效果设置为减速
//将结束按钮由透明改变为不透明
Animator animatorStop1 = ObjectAnimator.ofFloat(stopButton, "alpha", 0f, 1.0f);
animatorStop1.setDuration(3000);//设置动画时长
//将结束按钮从中间向左边移动
Animator animatorStop2 = ObjectAnimator.ofFloat(stopButton, "translationX", width / 3, 0);
animatorStop2.setDuration(2000);//设置动画时长
AnimatorSet animatorSetStop = new AnimatorSet();
animatorSetStop.playTogether(animatorStop1, animatorStop2);// 并行
animatorSetStop.setInterpolator(new DecelerateInterpolator());//动画效果设置为减速
//启动三个按钮动画
animatorSetStart.start();
animatorSetStop.start();
animatorSetContinue.start();
startButton.setVisibility(View.GONE);
}
}
我们运行代码，看看效果
我们就简单的完成了一个这样的动画效果，看起来还是蛮酷的嘛。
这篇博客，我们主要学习了三个自定义View的实现，然后组合在一起形成一个很酷的效果。
下篇博客，我开始给大家讲这个动画和计步器连接起来开始计算步数的效果我把这篇博客的Demo上传到这里，如果想直接看完整的动画和计步器的代码，请大家看我的GitHub，如果喜欢的话可以star一下，谢谢大家的支持
欢迎有兴趣的同学加我朋友的QQ群：点击直接加群555974449 我们一起来玩吧。
点击下载Demo