Android 自定义组合控件以及自定义view 点,线 ,折线,动态折线,Path

Thought:
1.先写一个组合布局文件
2.自定义一个View并继承布局文件的根布局
3.把写好的布局给自定义的view
4.写一个暴露布局文件的得接口方法
5.在使用的布局文件中拷贝自定义view的文件路径

下面就直接上代码:
first:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lin_home_content_part"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    >

        <ImageView
            android:id="@+id/iv_attendance"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/home_attendance"
            android:layout_centerVertical="true"
            android:paddingRight="10dp"/>

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"

            android:layout_toRightOf="@id/iv_attendance"
            android:text="考勤"
            android:textSize="16sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_below="@id/iv_attendance"
            android:layout_toRightOf="@id/iv_attendance"
            android:background="#d2d2d2" />


</RelativeLayout>



second:



import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class HomeItemContentView extends RelativeLayout {

    private ImageView mHomeIv;//主页内容图片
    private TextView mHomeTxt;//主页内容标题

    public HomeItemContentView(Context context) {
        super(context);
        initView();

    }
    public HomeItemContentView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public HomeItemContentView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    /**
     * 初始化布局
     */
    private void initView() {
        //将自定义好的布局文件设置给当前的SettingItemView
        View.inflate(getContext(), R.layout.home_content_part, this);
        mHomeIv = (ImageView) findViewById(R.id.iv_attendance);
        mHomeTxt = (TextView) findViewById(R.id.txt_title);
    }

    /**
     * 设置图片
     * @param ImageId
     */
    public void setHomeContentImage(int ImageId){
        mHomeIv.setImageResource(ImageId);
    }

    /**
     * 设置标题
     * @param title
     */
    public void setHomeContentTitle(String title){
        mHomeTxt.setText(title);
    }

}

third:

 <com.energy.mytest.HomeItemContentView
                android:id="@+id/home_vote"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <com.energy.mytest.HomeItemContentView
                android:id="@+id/home_permissions"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

这里写图片描述

更新于2017.05.06

public class WaveView extends View {

    public WaveView(Context context) {
        super(context);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private List<Point> mPointsList;
    private Paint mPaint;


    private void init() {
        mPointsList = new ArrayList<>();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);


    }





    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //如何随机
        float y;
        double a;
        for (int i = 0; i < getMeasuredWidth(); i+=20) {

            a = Math.random()*150;

            y = (float) Math.abs(a);
            //存点
            mPointsList.add(new Point(i, getMeasuredHeight()/2-y));
            Log.i(TAG, "onMeasure: (x,y)"+i+":"+y+":"+getMeasuredHeight());
        }


        for (int j = 0; j <mPointsList.size() - 1; j++) {

            /**
             * draw lines
             */
            mPaint.setStrokeWidth(2);
            mPaint.setColor(Color.RED);
            canvas.drawLine(mPointsList.get(j).getX(),getMeasuredHeight()/2,mPointsList.get(j).getX(),mPointsList.get(j).getY(),mPaint) ;


            /**
             * draw points
             */
            mPaint.setColor(Color.GREEN);
            mPaint.setStrokeWidth(5);
            canvas.drawPoint(mPointsList.get(j).getX(),mPointsList.get(j).getY(),mPaint);

            /**
             * 画折线
             */
            mPaint.setStrokeWidth(2);
            mPaint.setColor(Color.YELLOW);
            if(j!=mPointsList.size()-2)
            canvas.drawLine(mPointsList.get(j).getX(),mPointsList.get(j).getY(),mPointsList.get(j+1).getX(),mPointsList.get(j+1).getY(),mPaint) ;

        }

        mPaint.setColor(Color.BLUE);
        canvas.drawLine(0,getMeasuredHeight()/2,getMeasuredWidth(),getMeasuredHeight()/2,mPaint);


    }





    class Point {
        private float x;

        private float y;

        public float getX() {
            return x;
        }

        public void setX(float x) {
            this.x = x;
        }

        public float getY() {
            return y;
        }

        public void setY(float y) {
            this.y = y;
        }

        public Point(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }

}

使用:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <com.example.myapplication.WaveView
        android:layout_width="match_parent"
        android:background="#ffffff"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

</RelativeLayout>

在Activity中没有做任何操作,故省去
效果图如下
这里写图片描述

移动的折线图

public class WaveView extends View {
    public static final String TAG = "WaveView";

    public WaveView(Context context) {
        super(context);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private List<Point> mPointsList;
    private Paint mPaint;
    private Path mWavePath;


    private Timer timer;
    private MyTimerTask mTask;
    Handler updateHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {

            if (msg.what == 1) {

                // 
                Log.i(TAG, "handleMessage: "+mPointsList.size());
                for (int i = mPointsList.size() - 1; i > 0; i--) {
                    mPointsList.set(i, new Point(mPointsList.get(i).getX(), mPointsList.get(i - 1).getY()));
                }
                double a = Math.random() * 150;
                float y = (float) Math.abs(a);
                mPointsList.set(0, new Point(0, getMeasuredHeight() / 2 - y));
                invalidate();


            }

        }

    };

    private void init() {
        mPointsList = new ArrayList<>();
        timer = new Timer();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);

        mWavePath = new Path();


    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        //如何随机
        float y;
        double a;
        for (int i = 0; i < getMeasuredWidth(); i += 50) {

            a = Math.random() * 150;

            y = (float) Math.abs(a);
            //存点
            mPointsList.add(new Point(i, getMeasuredHeight() / 2 - y));
            Log.i(TAG, "onMeasure: (x,y)" + i + ":" + y + ":" + getMeasuredHeight());
        }

        // 开始动
        start();
    }

    private void start() {
        if (mTask != null) {
            mTask.cancel();
            mTask = null;
        }
        mTask = new MyTimerTask(updateHandler);
        timer.schedule(mTask, 0, 2000);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onDraw(Canvas canvas) {
//        mWavePath.reset();
//        int i = 0;

        for (int j = 0; j < mPointsList.size() - 1; j++) {
//
//            /**
//             * draw lines
//             */
//            mPaint.setStrokeWidth(2);
//            mPaint.setColor(Color.RED);
//            canvas.drawLine(mPointsList.get(j).getX(),getMeasuredHeight()/2,mPointsList.get(j).getX(),mPointsList.get(j).getY(),mPaint) ;


            /**
             * draw points
             */
            mPaint.setColor(Color.GREEN);
            mPaint.setStrokeWidth(5);
            canvas.drawPoint(mPointsList.get(j).getX(), mPointsList.get(j).getY(), mPaint);

            /**
             * 画折线
             */
            mPaint.setStrokeWidth(2);
            mPaint.setColor(Color.YELLOW);
            if (j != mPointsList.size() - 2)
                canvas.drawLine(mPointsList.get(j).getX(), mPointsList.get(j).getY(), mPointsList.get(j + 1).getX(), mPointsList.get(j + 1).getY(), mPaint);


        }

        mPaint.setColor(Color.BLUE);
        canvas.drawLine(0, getMeasuredHeight() / 2, getMeasuredWidth(), getMeasuredHeight() / 2, mPaint);

//
//        //设置起点
//        mWavePath.moveTo(mPointsList.get(0).getX(), mPointsList.get(0).getY());
//
//        for (int i = 0; i < mPointsList.size() - 2; i++) {
//            mWavePath.quadTo(mPointsList.get(i).getX(), mPointsList.get(i).getY(), mPointsList.get(i + 1).getX(), mPointsList.get(i + 1).getY());
//
//        }
//        mWavePath.lineTo(mPointsList.get(mPointsList.size() - 1).getX(), getMeasuredHeight() / 2);
//        mWavePath.lineTo(getMeasuredHeight() / 2, getMeasuredHeight() / 2);
//        mWavePath.lineTo(0, getMeasuredHeight() / 2);
//        mWavePath.lineTo(0, mPointsList.get(mPointsList.size() - 1).getY());
//        mWavePath.close();
//
//        // mPaint的Style是FILL,会填充整个Path区域
//        mPaint.setColor(Color.BLACK);
//        canvas.drawPath(mWavePath, mPaint);
    }


    class MyTimerTask extends TimerTask {
        Handler handler;

        public MyTimerTask(Handler handler) {
            this.handler = handler;
        }

        @Override
        public void run() {
            Message msg = Message.obtain();
            msg.what = 1;
            handler.sendMessage(msg);
        }

    }


    class Point {
        private float x;

        private float y;

        public float getX() {
            return x;
        }

        public void setX(float x) {
            this.x = x;
        }

        public float getY() {
            return y;
        }

        public void setY(float y) {
            this.y = y;
        }

        public Point(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }

}

这里写图片描述

Path 画的区域图

package com.example.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

/**
 * Project_name: MyApplication2
 * Date: 2017/5/514:37
 * Email: xiaoxilong5201314@163.com.
 * Author: Aaron Empire
 * Description: TODO
 */

public class WaveView extends View {
    public static final String TAG = "WaveView";

    public WaveView(Context context) {
        super(context);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private List<Point> mPointsList;
    private Paint mPaint;
    private Path mWavePath;


    private Timer timer;
    private MyTimerTask mTask;
    Handler updateHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {

            if (msg.what == 1) {

                //
                Log.i(TAG, "handleMessage: "+mPointsList.size());
                for (int i = mPointsList.size() - 1; i > 0; i--) {
                    mPointsList.set(i, new Point(mPointsList.get(i).getX(), mPointsList.get(i - 1).getY()));
                }
                double a = Math.random() * 150;
                float y = (float) Math.abs(a);
                mPointsList.set(0, new Point(0, getMeasuredHeight() / 2 - y));
                invalidate();


            }

        }

    };

    private void init() {
        mPointsList = new ArrayList<>();
        timer = new Timer();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);

        mWavePath = new Path();


    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        //如何随机
        float y;
        double a;
        for (int i = 0; i < getMeasuredWidth(); i += 50) {

            a = Math.random() * 150;

            y = (float) Math.abs(a);
            //存点
            mPointsList.add(new Point(i, getMeasuredHeight() / 2 - y));
            Log.i(TAG, "onMeasure: (x,y)" + i + ":" + y + ":" + getMeasuredHeight());
        }

        // 开始波动
        start();
    }

    private void start() {
        if (mTask != null) {
            mTask.cancel();
            mTask = null;
        }
        mTask = new MyTimerTask(updateHandler);
        timer.schedule(mTask, 0, 2000);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        mWavePath.reset();
        for (int j = 0; j < mPointsList.size() - 1; j++) {
//
//            /**
//             * draw lines
//             */
//            mPaint.setStrokeWidth(2);
//            mPaint.setColor(Color.RED);
//            canvas.drawLine(mPointsList.get(j).getX(),getMeasuredHeight()/2,mPointsList.get(j).getX(),mPointsList.get(j).getY(),mPaint) ;

            /**
             * draw points
             */
            mPaint.setColor(Color.YELLOW);
            mPaint.setStrokeWidth(5);
            canvas.drawPoint(mPointsList.get(j).getX(), mPointsList.get(j).getY(), mPaint);
//
//            /**
//             * 画折线
//             */
//            mPaint.setStrokeWidth(2);
//            mPaint.setColor(Color.YELLOW);
//            if (j != mPointsList.size() - 2)
//                canvas.drawLine(mPointsList.get(j).getX(), mPointsList.get(j).getY(), mPointsList.get(j + 1).getX(), mPointsList.get(j + 1).getY(), mPaint);


        }

        mPaint.setColor(Color.BLUE);
        canvas.drawLine(0, getMeasuredHeight() / 2, getMeasuredWidth(), getMeasuredHeight() / 2, mPaint);


        //设置起点
        mWavePath.moveTo(mPointsList.get(0).getX(), mPointsList.get(0).getY());

        for (int i = 0; i < mPointsList.size() - 2; i++) {
            mWavePath.quadTo(mPointsList.get(i).getX(), mPointsList.get(i).getY(), mPointsList.get(i + 1).getX(), mPointsList.get(i + 1).getY());

        }
        mWavePath.lineTo(mPointsList.get(mPointsList.size() - 1).getX(), getMeasuredHeight() / 2);
        mWavePath.lineTo(getMeasuredHeight() / 2, getMeasuredHeight() / 2);
        mWavePath.lineTo(0, getMeasuredHeight() / 2);
        mWavePath.lineTo(0, mPointsList.get(mPointsList.size() - 1).getY());
        mWavePath.close();

        // mPaint的Style是FILL,会填充整个Path区域
        mPaint.setColor(Color.GREEN);
        canvas.drawPath(mWavePath, mPaint);
    }


    class MyTimerTask extends TimerTask {
        Handler handler;

        public MyTimerTask(Handler handler) {
            this.handler = handler;
        }

        @Override
        public void run() {
            Message msg = Message.obtain();
            msg.what = 1;
            handler.sendMessage(msg);
        }

    }


    class Point {
        private float x;

        private float y;

        public float getX() {
            return x;
        }

        public void setX(float x) {
            this.x = x;
        }

        public float getY() {
            return y;
        }

        public void setY(float y) {
            this.y = y;
        }

        public Point(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }

}

这里写图片描述

      /**
             * h画矩阵
             */
            mPaint.setStrokeWidth(3);
            mPaint.setColor(Color.RED);
            canvas.drawRect(mPointsList.get(j).getX(),getMeasuredHeight() / 2+200,mPointsList.get(j).getX()+10,mPointsList.get(j).getY()+400,mPaint);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值