超酷的计步器APP（一）——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
2016-10-31 00:50
1136 查看
超酷的计步器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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 加载自定义属性实现app换肤功能
- iOS开发UIImage和UIImageView属性介绍，实现图片动画，实现开始/停止按钮效果
- 【iOS开发-9】UIImage和UIImageView属性介绍，实现图片动画，实现开始/停止按钮效果
- 模块管理常规功能自定义系统的设计与实现(38--终级阶段 综合查询[5])
- ASP.NET MVC 自定义过滤属性实现Enterprise的log功能
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- 利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效
- Core Animation 五 （美化图层，用动作实现自定义动画、为自定义的属性添加动画以及线程）
- CSS3实现超酷的图像动画变换特效
- 模块管理常规功能自定义系统的设计与实现(35--终级阶段 综合查询[2])
- 模块管理常规功能自定义系统的设计与实现(40--终级阶段 综合查询[7])
- EasyUI DataGrid使用formatter属性实现自定义功能
- Android自定义按钮实现长按功能
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- ios动画-新浪微博app点击发微博按钮动画的实现
- CSS3 Transitions属性打造动画的下载按钮特效
- 模块管理常规功能自定义系统的设计与实现(39--终级阶段 综合查询[6])
- android 自定义ListView实现元素前移后退的动画特效
- CSS3实现超酷的图像动画变换特效
- css3实现的4种动画特效按钮