基于Android的计步器(Pedometer)的讲解(二)——柱状图
发表时间：2020-10-19
发布人：葵宇科技
浏览次数：27
写正文之前，小小的吐槽一下，还有一个月就放假了，功课、测验、还有练习（研一，下半学期课不多，也不想在实验室）的┞峰酌，比来基于hadoop的数据分析立时也要验收了，真的忙的“外焦里嫩”啊！今朝定的偏向是Android开辟，所以想过年来了找一个Android的练习工作，进步一点在真正的项目中的经验。
好了，说了这么多废话，开端进入正题吧。
全部计步器的项目已经上传到github上了，感兴趣的同伙可以去看看（最好能给小弟我打倒星星哦~）
https://github.com/296777513/pedometer
项目整体介绍前面介绍过：http://blog.csdn.net/a296777513/article/details/42339693
起首，这是两张今天要实现的效不雅图：
（固然这个可以用没问题，我在另一篇的博文里已经进行优化了，界面加倍好看
http://blog.csdn.net/a296777513/article/details/42386769）
[img]http://img.blog.csdn.net/20150103185924361?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTI5Njc3NzUxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[img]http://img.blog.csdn.net/20150103190012484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTI5Njc3NzUxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
最重要的实现本身写的一个HistogramView的类（柱状图类）
HistogramView的代码如下：
package com.example.histogram.widet;
import com.example.changepage1.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
/**
* 这是从新写的一个柱状图的view
* Author: 李垭超 email:296777513@qq.com
* Date: 2015-1-3
* Time: 下昼6:15
*/
public class HistogramView extends View {
private boolean Text = false;//断定是否在柱状图上显示数字
private int Height;//控件高度
private int Width;//控件宽度
private Bitmap bitmap;//柱状图的样子
private int mHeight;//柱状图高度
private int AnimValue;//实现的动画
private double Progress;
private Canvas canvas;//画出柱状图的各个属性
private HistogramAnimation ani;
public void setText(boolean mText) {
this.Text = mText;
invalidate();
}
public HistogramView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
ani = new HistogramAnimation();//初始化自定义的动画类
ani.setDuration(1000);//设置全部动画在1秒内完成
}
public HistogramView(Context context, AttributeSet attrs) {
super(context, attrs);
ani = new HistogramAnimation();
ani.setDuration(1000);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//初始化控件和进度的条相干参数
Width = w;
Height = h;
mHeight = (int) (h * Progress * 0.9);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
Paint paint = new Paint();//设置矩形画笔，设置柱状图的信息
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(sp2px(getContext(),12));
paint.setColor(Color.parseColor("#6DCAEC"));
// 绘制 柱状图的外形 ：left,top,right,bottom
RectF dst = new RectF(0, Height - AnimValue, Width, Height);
//掏出图片，并且转换为bitmap类型
bitmap = BitmapFactory
.decodeResource(getResources(), R.drawable.column);
this.canvas.drawBitmap(bitmap, null, dst, paint);//画出柱状图
if (Text) {
if (Progress != 0) {
this.canvas.drawText((int) (Progress * 10000) + "", 0,
(Height - AnimValue) - 10, paint);
} else {
this.canvas.drawText((int) (Progress * 10000) + "", 0,
(Height - AnimValue) - 10, paint);
}
}
}
/**
* 对外供给接口来传进数值
* @param Progress
*/
public void setProgress(double Progress) {
if (Progress < 0.03 && Progress != 0) {
this.Progress = Progress;
Progress = 0.03;
}
this.Progress = Progress;
this.startAnimation(ani);
}
/**
* 集成animation的一个动画类
* @author 李垭超
*
*/
private class HistogramAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
super.applyTransformation(interpolatedTime, t);
if (interpolatedTime < 1.0f) {
AnimValue = http://www.sjsjw.com/100/000345MYM003870/(int) (mHeight * interpolatedTime);
} else {
AnimValue = mHeight;
}
postInvalidate();
}
}
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
}
重写FragmentAnalysis类
package com.example.histogram;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import com.example.changepage1.R;
import com.example.histogram.widet.HistogramView;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.annotation.SuppressLint;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.TextView;
/**
* 这是分析七天步数的碎片 Author: 李垭超 email:296777513@qq.com Date: 2015-1-2 Time: 下昼2:39
*/
public class FragmentAnalysis extends Fragment implements OnClickListener {
private HistogramView hv1, hv2, hv3, hv4, hv5, hv6, hv7;// 这是7个条形柱状图
private TextView day1, day2, day3, day4, day5, day6, day7;// 这是底部显示的一周7天
private TextView average_step;// 平均步数
private TextView sum_step;// 总共步数
private int average = 0;
private int sum = 0;
private int average1 = 0;
private int sum1 = 0;
private Calendar calendar;// 日期的操作
private String day;
private View view;
private AllAnimation ani;// 设置的动画
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.analysis, container, false);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
init();
setWeek();
setProgress();
view.startAnimation(ani);
}
/**
* 初始化一些对象
*/
private void init() {
average_step = (TextView) view.findViewById(R.id.average_step);
sum_step = (TextView) view.findViewById(R.id.sum_step);
ani = new AllAnimation();// 创建自定义的动画对象
ani.setDuration(1000);// 设置完成动画的时光为1秒
calendar = Calendar.getInstance();// 对日期进行实例化，显示当天的日期
hv1 = (HistogramView) view.findViewById(R.id.map1);
hv2 = (HistogramView) view.findViewById(R.id.map2);
hv3 = (HistogramView) view.findViewById(R.id.map3);
hv4 = (HistogramView) view.findViewById(R.id.map4);
hv5 = (HistogramView) view.findViewById(R.id.map5);
hv6 = (HistogramView) view.findViewById(R.id.map6);
hv7 = (HistogramView) view.findViewById(R.id.map7);
// 对7个柱状图设置点击时光，可以显示具体的数值
hv1.setOnClickListener(this);
hv2.setOnClickListener(this);
hv3.setOnClickListener(this);
hv4.setOnClickListener(this);
hv5.setOnClickListener(this);
hv6.setOnClickListener(this);
hv7.setOnClickListener(this);
// 显示对应的周数
day1 = (TextView) view.findViewById(R.id.Monday);
day2 = (TextView) view.findViewById(R.id.Tuesday);
day3 = (TextView) view.findViewById(R.id.Wednesday);
day4 = (TextView) view.findViewById(R.id.Thursday);
day5 = (TextView) view.findViewById(R.id.Friday);
day6 = (TextView) view.findViewById(R.id.Saturday);
day7 = (TextView) view.findViewById(R.id.Sunday);
}
@SuppressLint("SimpleDateFormat")
private void setProgress() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
day = sdf.format(calendar.getTime());
// Toast.makeText(getActivity(), day + "", Toast.LENGTH_LONG).show();
hv1.setProgress((5000 / 10000.0));
sum += 5000;
calendar.add(Calendar.DAY_OF_MONTH, -1);//把日期设置成为
day = sdf.format(calendar.getTime());
hv2.setProgress((3000 / 10000.0));
sum += 3000;
// Toast.makeText(getActivity(), day+"", Toast.LENGTH_LONG).show();
calendar.add(Calendar.DAY_OF_MONTH, -1);
day = sdf.format(calendar.getTime());
hv3.setProgress((2000 / 10000.0));
sum += 2000;
calendar.add(Calendar.DAY_OF_MONTH, -1);
day = sdf.format(calendar.getTime());
hv4.setProgress((7631 / 10000.0));
sum += 7631;
calendar.add(Calendar.DAY_OF_MONTH, -1);
day = sdf.format(calendar.getTime());
hv5.setProgress((4213 / 10000.0));
sum += 4213;
calendar.add(Calendar.DAY_OF_MONTH, -1);
day = sdf.format(calendar.getTime());
hv6.setProgress((8431/ 10000.0));
sum += 8431;
calendar.add(Calendar.DAY_OF_MONTH, -1);
day = sdf.format(calendar.getTime());
hv7.setProgress((9999 / 10000.0));
sum += 9999;
}
/**
* 设置礼拜
*/
private void setWeek() {
int day = calendar.get(Calendar.DAY_OF_WEEK);//当天的周数
// Toast.makeText(getActivity(), day + "", Toast.LENGTH_LONG).show();
day -= 1;
day1.setText(week(day));
day2.setText(week(day - 1));
day3.setText(week(day - 2));
day4.setText(week(day - 3));
day5.setText(week(day - 4));
day6.setText(week(day - 5));
day7.setText(week(day - 6));
}
@Override
public void onClick(View arg0) {
switch (arg0.getId()) {
case R.id.map1:
hv1.setText(true);
hv2.setText(false);
hv3.setText(false);
hv4.setText(false);
hv5.setText(false);
hv6.setText(false);
hv7.setText(false);
view.invalidate();
break;
case R.id.map2:
hv1.setText(false);
hv2.setText(true);
hv3.setText(false);
hv4.setText(false);
hv5.setText(false);
hv6.setText(false);
hv7.setText(false);
view.invalidate();
break;
case R.id.map3:
hv1.setText(false);
hv2.setText(false);
hv3.setText(true);
hv4.setText(false);
hv5.setText(false);
hv6.setText(false);
hv7.setText(false);
view.invalidate();
break;
case R.id.map4:
hv1.setText(false);
hv2.setText(false);
hv3.setText(false);
hv4.setText(true);
hv5.setText(false);
hv6.setText(false);
hv7.setText(false);
view.invalidate();
break;
case R.id.map5:
hv1.setText(false);
hv2.setText(false);
hv3.setText(false);
hv4.setText(false);
hv5.setText(true);
hv6.setText(false);
hv7.setText(false);
view.invalidate();
break;
case R.id.map6:
hv1.setText(false);
hv2.setText(false);
hv3.setText(false);
hv4.setText(false);
hv5.setText(false);
hv6.setText(true);
hv7.setText(false);
view.invalidate();
break;
case R.id.map7:
hv1.setText(false);
hv2.setText(false);
hv3.setText(false);
hv4.setText(false);
hv5.setText(false);
hv6.setText(false);
hv7.setText(true);
view.invalidate();
break;
default:
break;
}
}
/**
* 将礼拜由阿拉伯数字变为汉字
* @param day
* @return
*/
private String week(int day) {
if (day < 1) {
day += 7;
}
switch (day) {
case 1:
return "周一";
case 2:
return "周二";
case 3:
return "周三";
case 4:
return "周四";
case 5:
return "周五";
case 6:
return "周六";
case 7:
return "周日";
default:
return "";
}
}
/**
* 自定义的一个动画类
* @author 李垭超
*
*/
private class AllAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
super.applyTransformation(interpolatedTime, t);
if (interpolatedTime < 1.0f) {
sum1 = (int) (sum * interpolatedTime);
average1 = (int) (average * interpolatedTime);
} else {
sum1 = sum;
average1 = average;
}
view.postInvalidate();
sum_step.setText(sum1 + "");
average = sum / 7;
average_step.setText(average1 + "");
}
}
}
FragmentAnalysis对应的xml页面代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:contentDescription="@string/app_name" />
<TextView
android:id="@+id/analysis"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="@string/analysis"
android:textColor="#6DCAEC"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:contentDescription="@string/app_name" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/sumstep"
android:textSize="20sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/averagestep"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/sum_step"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/_0"
android:textColor="#6DCAEC"
android:textSize="30sp"
android:typeface="normal" />
<TextView
android:id="@+id/average_step"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="@string/_0"
android:textColor="#6DCAEC"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal" >
<com.example.histogram.widet.HistogramView
android:id="@+id/map1"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="40dp"
android:layout_marginTop="30dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map2"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map3"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map4"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map5"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map6"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
<com.example.histogram.widet.HistogramView
android:id="@+id/map7"
android:layout_width="30dp"
android:layout_height="250dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="@string/_0k"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="40dp"
android:background="@android:color/darker_gray" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/Monday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="@string/Monday"
android:textSize="15sp" />
<TextView
android:id="@+id/Tuesday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Tuesday"
android:textSize="15sp" />
<TextView
android:id="@+id/Wednesday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Wednesday"
android:textSize="15sp" />
<TextView
android:id="@+id/Thursday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Thursday"
android:textSize="15sp" />
<TextView
android:id="@+id/Friday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Friday"
android:textSize="15sp" />
<TextView
android:id="@+id/Saturday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Saturday"
android:textSize="15sp" />
<TextView
android:id="@+id/Sunday"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="@string/Sunday"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
