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：