自定義控件實戰<五> 折線圖控件

2019-11-06 09:58:25

字體：大中小

來源：轉載

供稿：網友

上一篇文章實現了一個簡單的音量增減控件,這篇文章在此基礎上面繼續實現一個簡單折線圖控件

一、首先看一下我們這次要實現的效果圖：

效果圖

二、在attrs.xml中添加自定義屬性：

<?xml version="1.0" encoding="utf-8"?><resources> <attr name="number_Y" format="integer"/> <attr name="number_X" format="integer"/> <declare-styleable name="BrokenLine"> <attr name="number_Y" /> <attr name="number_X" /> </declare-styleable></resources>

三、對應的布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="horizontal" android:padding="20dp" tools:context="com.shi.androidstudio.brokenline.MainActivity"> <com.shi.androidstudio.brokenline.SimpleView_05 android:id="@+id/simpleView_05" android:layout_width="300dp" android:layout_height="300dp" app:number_X="7" app:number_Y="10"/></LinearLayout>

四、SimpleView_04自定義控件代碼：

/** * Created by SHI on 2017/2/27 14:29 */public class SimpleView_05 extends View { //X坐標尺碼單位長度 PRivate int tick_X; //Y坐標尺碼單位長度 private int tick_Y; private int number_Y = 10; private int number_X = 10; private int start_X = 30; private int start_Y = 30; private int tickLength = 5; //分割線長度 private int [] xArray = {1,2,3,4,5,6,7}; private int [] yArray = {1,4,4,2,5,6,4}; public SimpleView_05(Context context) { this(context, null); } public SimpleView_05(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SimpleView_05(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); /** * 獲得我們所定義的自定義樣式屬性 */ TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BrokenLine, defStyleAttr, 0); int length = a.getIndexCount(); for (int i = 0; i < length; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.BrokenLine_number_X: number_X = a.getInt(attr,0); Log.e("BrokenLine_number_X", ""+number_X); break; case R.styleable.BrokenLine_number_Y: number_Y = a.getInt(attr, 0); Log.e("BrokenLine_number_Y", ""+number_Y); break; } } a.recycle(); } //重寫onDraw方法，繪制音量圖案 @Override protected void onDraw(Canvas canvas) { Paint mPaint = new Paint(); mPaint.setColor(Color.GREEN); canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint); //減少10是為了防止繪制超出范圍 int width = getMeasuredWidth()-10; int height = getMeasuredHeight(); Log.e("寬度", ""+width); tick_X = (width-start_X)/number_X; tick_Y = (height-start_Y)/number_Y; mPaint.setColor(Color.BLACK); //繪制坐標系Y軸 canvas.drawLine(start_X, 0, start_X, height-start_Y, mPaint); //繪制坐標系X軸 canvas.drawLine(start_X, height-start_Y, width, height-start_Y, mPaint); for (int i=1; i<=number_Y; i++){ //繪制Y軸分割線 canvas.drawLine(start_X, height-start_Y-tick_Y*i, start_X-tickLength, height-start_Y-tick_Y*i, mPaint); //繪制Y軸坐標描述,減少10分之9是為了防止Y軸出界 canvas.drawText(""+10*i, 0, height-start_Y*9/10-tick_Y*i, mPaint); } for (int i=1; i<=number_X; i++){ //繪制X軸分割線 canvas.drawLine(start_X+tick_X*i, height-start_Y, start_X+tick_X*i, height-start_Y+tickLength, mPaint); //繪制X軸坐標描述 canvas.drawText("Ps"+i, start_X/2+tick_X*i, height-start_Y/2, mPaint); } //繪制點集 for (int i=0; i<xArray.length; i++){ mPaint.setStrokeWidth(4); canvas.drawPoint(start_X+xArray[i]*tick_X, height-start_Y-yArray[i]*tick_Y, mPaint); if(i != 0){ mPaint.setStrokeWidth(1); canvas.drawLine(start_X+xArray[i-1]*tick_X,height-start_Y-yArray[i-1]*tick_Y ,start_X+xArray[i]*tick_X, height-start_Y-yArray[i]*tick_Y,mPaint); } } }}

到這里基本就實現了我們需要的自定義控件了。

上一篇：NestedScrolling

下一篇：View事件分發源碼詳解