自定義控制元件實戰 折線圖控制元件
阿新 • • 發佈:2019-01-24
上一篇文章實現了一個簡單的音量增減控制元件,這篇文章在此基礎上面繼續實現一個簡單折線圖控制元件
一、首先看一下我們這次要實現的效果圖:
二、在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);
}
}
}
}
到這裡基本就實現了我們需要的自定義控制元件了。
附上demo下載