动态画折线图,暂停与继续

最近要做一个频道搜索时的动态波浪形的UI,百度了很多,总结一下,写了个Demo,实现动态折线图的暂停与继续。


布局文件:Fragemt_main.xml

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.hy.linechart.MainActivity$PlaceholderFragment" >


            android:id="@+id/draw_line_chart"
        android:layout_width="match_parent"
        android:layout_height="300dip"
        android:orientation="vertical" >
   


            android:id="@+id/btn_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/draw_line_chart"
        android:layout_below="@+id/draw_line_chart"
        android:layout_marginTop="32dp"
        android:text="确定" />


            android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/btn_ok"
        android:layout_alignRight="@+id/draw_line_chart"
        android:layout_marginRight="50dp"
        android:text="取消" />




主界面MianActivity:

public class MainActivity extends Activity {


private DrawChart view;//自定义的视图  先点随机点并画线
private MyTimerTask task;//任务
private Button btnOk;
private Button btnCancel;
private Timer timer;//计时器  用来过一定时间调度任务执行
public TimerHandler timerHandler;//更新界面显示视图
LinearLayout layout;//DrawChart的存放区域


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_main);
timerHandler = new TimerHandler();
initView();
view = new DrawChart(this);
view.invalidate();
layout.addView(view);

}
public void initView() {
btnOk = (Button) findViewById(R.id.btn_ok);
btnCancel = (Button) findViewById(R.id.btn_cancel);


btnOk.setOnClickListener(btnListener);
btnCancel.setOnClickListener(btnListener);
layout = (LinearLayout) findViewById(R.id.draw_line_chart);
}


/** 实时更新频道搜索的波纹图 */
private class MyTimerTask extends TimerTask {
@Override
public void run() {
timerHandler.sendEmptyMessage(0);
}
}


OnClickListener btnListener = new OnClickListener() {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btn_ok:
task = new MyTimerTask();
timer = new Timer(true);
timer.schedule(task, 0, 100);
break;
case R.id.btn_cancel:
task.cancel();
break;
}
}
};
// 定义一个handler更新UI
@SuppressLint("HandlerLeak")
public class TimerHandler extends Handler {
@Override
public void handleMessage(Message msg) {
view.invalidate();
}
}
}

DrawChart.java:


public class DrawChart extends View{

private int CHARTH = 200;
private int CHARTW = 600;
private int OFFSET_LEFT = 70;
private int OFFSET_TOP = 20;
private int X_INTERVAL = 10;//线条之间最宽的间距

private List plist;
public DrawChart(Context context) {
super(context);
plist = new ArrayList();
//initPlist();
}


@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
prepareLine();
drawCurve(canvas);
}

/**画波纹线条*/
private void drawCurve(Canvas canvas){
Paint paint = new Paint();

paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
paint.setAntiAlias(true);

if(plist.size() >= 2){
for(int i = 0; icanvas.drawLine(plist.get(i).x, plist.get(i).y, plist.get(i+1).x, plist.get(i+1).y, paint);//画线
}
}
}

//准备线条所需要的点
private void prepareLine(){
int py = OFFSET_TOP + (int)(Math.random()*(CHARTH - OFFSET_TOP));//随机生成点的纵坐标位置
Point p = new Point(OFFSET_LEFT + CHARTW , py );//随机生成点
if(plist.size() > 90){//用来画线的点的个数
plist.remove(0);//清除第一个点
for(int i = 0; i<89; i++){
if(i == 0) plist.get(i).x -= (X_INTERVAL - 2);
else plist.get(i).x -= X_INTERVAL;
}
plist.add(p);
}
else{
for(int i = 0; iplist.get(i).x -= X_INTERVAL;
}
plist.add(p);
}
}
}

动态画折线图,暂停与继续_第1张图片


资源下载:http://download.csdn.net/detail/hongyi787200/7671859


你可能感兴趣的:(动态画折线图,暂停与继续)