Android-自定义View（二）

预期总体效果图（模仿股票）：

先画底部时间：

效果图：

Activity

public class MainActivity extends Activity {
CustomView customView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        customView=(CustomView) findViewById(R.id.customView);
        customView.setData(getData());
    }
    //声明list里面存放数据
    public ArrayList<HashMap<String, String>> getData()
    {
        //list[
        //map  time:9  price:2000
        //map  time:10 price:3000
        //]

        ArrayList<HashMap<String, String>> list=new ArrayList<HashMap<String,String>>();
        HashMap<String, String> map1=new HashMap<String, String>();
        map1.put("time", "9");
        map1.put("price", "2000");
        list.add(map1);
        HashMap<String, String> map2=new HashMap<String, String>();
        map2.put("time", "10");
        map2.put("price", "3000");
        list.add(map2);
        HashMap<String, String> map3=new HashMap<String, String>();
        map3.put("time", "11");
        map3.put("price", "5000");
        list.add(map3);
        HashMap<String, String> map4=new HashMap<String, String>();
        map4.put("time", "13");
        map4.put("price", "6000");
        list.add(map4);
        return list;

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

自定义View

package com.tarena.customview1504_02;

import java.util.ArrayList;
import java.util.HashMap;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
    //控件的宽高
    int viewWidth, viewHeight;
    //创建集合存储  对应的时间对应的价格
    ArrayList<HashMap<String, String>> list = null;

    int xGap;

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    //自己设置接受数据的方法
    public void setData(ArrayList<HashMap<String, String>> list) {
        this.list = list;
    }

    //画控件的方法
    @Override
    protected void onDraw(Canvas canvas) {
        // 画背景,最好画矩形
        Paint paint = new Paint();
        paint.setColor(0xFF000000);
        paint.setTextSize(24);
        //矩形铺满
        Rect rectBackground = new Rect(0, 0, viewWidth, viewHeight);
        canvas.drawRect(rectBackground, paint);
        // 字符串的宽度跟字号，字体有关
        // 字符串的宽度用android提供的api得出来，正式是不能写死
        int lastPriceWidth = 48;
        xGap = (viewWidth - lastPriceWidth) / (list.size() - 1);

        // 画时间
        paint.setColor(0xFFFFFFFF);
        for (int i = 0; i < list.size(); i++) {
            HashMap<String, String> map = list.get(i);
            String time = map.get("time");
            int timeLeft = xGap * i;
            int timeTop = viewHeight;
            canvas.drawText(time, timeLeft, timeTop, paint);
        }
    }

    //控件的点击事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return super.onTouchEvent(event);
    }

    //控件的大小
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;

    }

}

画价格

import java.util.ArrayList;
import java.util.HashMap;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
    int viewWidth, viewHeight;
    ArrayList<HashMap<String, String>> list = null;

    int xGap;
    int maxPrice;

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public void setData(ArrayList<HashMap<String, String>> list) {
        this.list = list;
        for (int i = 0; i < this.list.size(); i++) {
            HashMap<String, String> map = list.get(i);
            int currentPrice = Integer.parseInt(map.get("price"));
            if (currentPrice > maxPrice) {
                maxPrice = currentPrice;
            }

        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try {
            // 画背景,最好画矩形
            Paint paint = new Paint();
            paint.setColor(0xFF000000);
            paint.setTextSize(24);

            Rect rectBackground = new Rect(0, 0, viewWidth, viewHeight);
            canvas.drawRect(rectBackground, paint);
            // 字符串的宽度跟字号，字体有关
            // 字符串的宽度用android提供的api得出来
            int lastPriceWidth = 48;
            int timeHeight = 40;
            int priceHeight = viewHeight - timeHeight;
            xGap = (viewWidth - lastPriceWidth) / (list.size() - 1);

            // 画时间
            paint.setColor(0xFFFFFFFF);

            for (int i = 0; i < list.size(); i++) {
                HashMap<String, String> map = list.get(i);
                String time = map.get("time");
                int timeLeft = xGap * i;
                int timeTop = viewHeight;
                canvas.drawText(time, timeLeft, timeTop, paint);

                // 画价格
                int currentPrice = Integer.parseInt(map.get("price"));
                int priceTop = currentPrice * priceHeight / maxPrice;   // 当前的价格/最大的价格*价格区的高度
                // 越大的显示在下面，应该显示在上面
                priceTop = priceHeight - priceTop;
                // 最大的价格显示在view的外面
                priceTop = priceTop + 24;

                canvas.drawText(map.get("price"), timeLeft, priceTop, paint);

                // 画线
                if (i < list.size() - 1) {
                    int startLeft = timeLeft;
                    int startTop = priceTop;
                    int endLeft = (i + 1) * xGap;
                    int endTop = 0;
                    int nextPrice = Integer.parseInt(list.get(i + 1).get(
                            "price"));
                    int nextTop = nextPrice * priceHeight / maxPrice;
                    nextTop = priceHeight - nextTop;
                    nextTop = nextTop + 24;
                    endTop = nextTop;
                    canvas.drawLine(startLeft, startTop, endLeft, endTop, paint);
                }
            }
        } catch (NumberFormatException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return super.onTouchEvent(event);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;

    }

}

增加需求：当点击时出现横线

import java.util.ArrayList;
import java.util.HashMap;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
    int viewWidth, viewHeight;
    ArrayList<HashMap<String, String>> list = null;

    int xGap;
    int maxPrice;

    int touchY;

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public void setData(ArrayList<HashMap<String, String>> list) {
        this.list = list;
        for (int i = 0; i < this.list.size(); i++) {
            HashMap<String, String> map = list.get(i);
            int currentPrice = Integer.parseInt(map.get("price"));
            if (currentPrice > maxPrice) {
                maxPrice = currentPrice;
            }

        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try {
            // 画背景,最好画矩形
            Paint paint = new Paint();
            paint.setColor(0xFF000000);
            paint.setTextSize(24);

            Rect rectBackground = new Rect(0, 0, viewWidth, viewHeight);
            canvas.drawRect(rectBackground, paint);
            // 字符串的宽度跟字号，字体有关
            // 字符串的宽度用android提供的api得出来
            int lastPriceWidth = 48;
            int timeHeight = 40;
            int priceHeight = viewHeight - timeHeight;
            xGap = (viewWidth - lastPriceWidth) / (list.size() - 1);

            // 画时间
            paint.setColor(0xFFFFFFFF);

            for (int i = 0; i < list.size(); i++) {
                HashMap<String, String> map = list.get(i);
                String time = map.get("time");
                int timeLeft = xGap * i;
                int timeTop = viewHeight;
                canvas.drawText(time, timeLeft, timeTop, paint);

                // 画价格
                int currentPrice = Integer.parseInt(map.get("price"));
                int priceTop = currentPrice * priceHeight / maxPrice;
                // 越大的显示在下面，应该显示在上面
                priceTop = priceHeight - priceTop;
                // 最大的价格显示在view的外面
                priceTop = priceTop + 24;

                canvas.drawText(map.get("price"), timeLeft, priceTop, paint);

                // 画线
                if (i < list.size() - 1) {
                    int startLeft = timeLeft;
                    int startTop = priceTop;
                    int endLeft = (i + 1) * xGap;
                    int endTop = 0;
                    int nextPrice = Integer.parseInt(list.get(i + 1).get(
                            "price"));
                    int nextTop = nextPrice * priceHeight / maxPrice;
                    nextTop = priceHeight - nextTop;
                    nextTop = nextTop + 24;
                    endTop = nextTop;
                    canvas.drawLine(startLeft, startTop, endLeft, endTop, paint);
                }
            }

            if (touchY > 0) {
                canvas.drawLine(0, touchY, viewWidth, touchY, paint);
            }
        } catch (NumberFormatException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        touchY = (int) event.getY();
        this.invalidate();
        return super.onTouchEvent(event);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;

    }

}

以Handler方式让数据控件实时变化：

import java.util.ArrayList;
import java.util.HashMap;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
    int viewWidth, viewHeight;
    ArrayList<HashMap<String, String>> list = null;

    int xGap;
    int maxPrice;
    Random random=new Random();
    Handler handler=new Handler();

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub

        handler.postDelayed(new Runnable){

            public void run(){
                customview.setData(getData);
                customview.invalidate();//使屏幕数据变换必须使用invalidata()注：invalidata就是调用onDraw()

                //不停的变循环
                 handler.postDelayed(this,1000);
            }
        },1000);

    }

    public void setData(ArrayList<HashMap<String, String>> list) {
        this.list = list;
        for (int i = 0; i < this.list.size(); i++) {
            HashMap<String, String> map = list.get(i);
            int currentPrice = Integer.parseInt(map.get("price"));
            if (currentPrice > maxPrice) {
                maxPrice = currentPrice;
            }

        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try {
            // 画背景,最好画矩形
            Paint paint = new Paint();
            paint.setColor(0xFF000000);
            paint.setTextSize(24);

            Rect rectBackground = new Rect(0, 0, viewWidth, viewHeight);
            canvas.drawRect(rectBackground, paint);
            // 字符串的宽度跟字号，字体有关
            // 字符串的宽度用android提供的api得出来
            int lastPriceWidth = 48;
            int timeHeight = 40;
            int priceHeight = viewHeight - timeHeight;
            xGap = (viewWidth - lastPriceWidth) / (list.size() - 1);

            // 画时间
            paint.setColor(0xFFFFFFFF);

            for (int i = 0; i < list.size(); i++) {
                HashMap<String, String> map = list.get(i);
                String time = map.get("time");
                int timeLeft = xGap * i;
                int timeTop = viewHeight;
                canvas.drawText(time, timeLeft, timeTop, paint);

                // 画价格
                int currentPrice = Integer.parseInt(map.get("price"));
                int priceTop = currentPrice * priceHeight / maxPrice;   // 当前的价格/最大的价格*价格区的高度
                // 越大的显示在下面，应该显示在上面
                priceTop = priceHeight - priceTop;
                // 最大的价格显示在view的外面
                priceTop = priceTop + 24;

                canvas.drawText(map.get("price"), timeLeft, priceTop, paint);

                // 画线
                if (i < list.size() - 1) {
                    int startLeft = timeLeft;
                    int startTop = priceTop;
                    int endLeft = (i + 1) * xGap;
                    int endTop = 0;
                    int nextPrice = Integer.parseInt(list.get(i + 1).get(
                            "price"));
                    int nextTop = nextPrice * priceHeight / maxPrice;
                    nextTop = priceHeight - nextTop;
                    nextTop = nextTop + 24;
                    endTop = nextTop;
                    canvas.drawLine(startLeft, startTop, endLeft, endTop, paint);
                }
            }
        } catch (NumberFormatException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return super.onTouchEvent(event);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;

    }

}

推荐图标框架achartengine：