基于Android的计步器(Pedometer)的讲解(二)——柱状图分析 – Android移动开发技术文章_手机开发 – 红黑联盟

写正文之前，小小的吐槽一下，还有一个月就放假了，作业、考试、还有实习（研一，下半学期课不多，也不想在实验室）的考虑，最近基于hadoop的数据分析马上也要验收了，真的忙的“外焦里嫩”啊！目前定的方向是Android开发，所以想过年来了找一个Android的实习工作，提高一点在真正的项目中的经验。

好了，说了这么多废话，开始进入正题吧。

整个计步器的项目已经上传到github上了，感兴趣的朋友可以去看看（最好能给小弟我打颗星星哦~）

www.2cto.com

首先，这是两张今天要实现的效果图：

height=300 height=300

最主要的实现自己写的一个HistogramView的类（柱状图类）

HistogramView的代码如下：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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 = (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类

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
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 + );
        }
    }
}

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <linearlayout android:layout_height="50dp" android:layout_width="match_parent" android:orientation="horizontal">
        <imageview android:contentdescription="@string/app_name" android:layout_gravity="left" android:layout_height="50dp" android:layout_marginleft="10dp" android:layout_width="50dp">
        <textview android:gravity="center" android:id="@+id/analysis" android:layout_gravity="center" android:layout_height="50dp" android:layout_weight="1" android:layout_width="0dp" android:text="@string/analysis" android:textcolor="#6DCAEC" android:textsize="20sp">
        <imageview android:contentdescription="@string/app_name" android:layout_gravity="left" android:layout_height="50dp" android:layout_marginleft="10dp" android:layout_width="50dp">
    </imageview></textview></imageview></linearlayout>
    <textview android:background="@android:color/darker_gray" android:layout_height="1dp" android:layout_width="match_parent">
    <linearlayout android:layout_height="wrap_content" android:layout_margintop="30dp" android:layout_width="match_parent" android:orientation="horizontal">
        <textview android:gravity="center" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" android:text="@string/sumstep" android:textsize="20sp">
        <textview android:gravity="center" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" android:text="@string/averagestep" android:textsize="20sp">
    </textview></textview></linearlayout>
    <linearlayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal">
        <textview android:gravity="center" android:id="@+id/sum_step" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" android:text="@string/_0" android:textcolor="#6DCAEC" android:textsize="30sp" android:typeface="normal">
        <textview android:gravity="center" android:id="@+id/average_step" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" android:text="@string/_0" android:textcolor="#6DCAEC" android:textsize="30sp">
    </textview></textview></linearlayout>
    <linearlayout android:layout_height="0dp" android:layout_weight="10" android:layout_width="match_parent" android:orientation="horizontal">
        <com.example.histogram.widet.histogramview android:id="@+id/map1" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="40dp" android:layout_margintop="30dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map2" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map3" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map4" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map5" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map6" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
        <com.example.histogram.widet.histogramview android:id="@+id/map7" android:layout_gravity="bottom" android:layout_height="250dp" android:layout_marginleft="5dp" android:layout_width="30dp">
    </com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></com.example.histogram.widet.histogramview></linearlayout>
    <linearlayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal">
        <textview android:layout_height="wrap_content" android:layout_marginleft="20dp" android:layout_width="wrap_content" android:text="@string/_0k" android:textsize="15sp">
        <textview android:background="@android:color/darker_gray" android:layout_gravity="center_vertical" android:layout_height="3dp" android:layout_marginleft="5dp" android:layout_marginright="40dp" android:layout_width="match_parent">
    </textview></textview></linearlayout>
    <linearlayout android:layout_height="wrap_content" android:layout_marginbottom="20dp" android:layout_margintop="5dp" android:layout_width="match_parent" android:orientation="horizontal">
        <textview android:id="@+id/Monday" android:layout_height="wrap_content" android:layout_marginleft="40dp" android:layout_width="30dp" android:text="@string/Monday" android:textsize="15sp">
        <textview android:id="@+id/Tuesday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Tuesday" android:textsize="15sp">
        <textview android:id="@+id/Wednesday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Wednesday" android:textsize="15sp">
        <textview android:id="@+id/Thursday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Thursday" android:textsize="15sp">
        <textview android:id="@+id/Friday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Friday" android:textsize="15sp">
        <textview android:id="@+id/Saturday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Saturday" android:textsize="15sp">
        <textview android:id="@+id/Sunday" android:layout_height="wrap_content" android:layout_marginleft="5dp" android:layout_width="30dp" android:text="@string/Sunday" android:textsize="15sp">
    </textview></textview></textview></textview></textview></textview></textview></linearlayout>
</textview></linearlayout>

 

 

相关文章：

基于Android的计步器(Pedometer)的讲解(一)——Fragment页面跳转 – Android移动开发技术文章_手机开发 – 红黑联盟

基于Android的计步器(Pedometer)的讲解(二)——柱状图分析 – Android移动开发技术文章_手机开发 – 红黑联盟

基于Android的计步器(Pedometer)的讲解—ExpandableListView – Android移动开发技术文章_手机开发 – 红黑联盟

基于Android的计步器(Pedometer)的讲解(四)——后台记步 – Android移动开发技术文章_手机开发 – 红黑联盟

基于Android的计步器(Pedometer)的讲解(五)——跟随界面滑动的指示器 – Android移动开发技术文章_手机开发 – 红黑联盟

 

 

来源URL：http://www.2cto.com/kf/201501/366461.html