Android自定義View實現(xiàn)折線圖效果
下面就是結(jié)果圖(每種狀態(tài)用一個表情圖片表示):

一、主頁面的布局文件如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/ting.example.linecharview"> <ting.example.linecharview.LineCharView android:id="@+id/test" android:layout_width="match_parent" android:layout_height="match_parent" app:xytextcolor="@color/bg" app:xytextsize="20sp" app:interval="80dp" /> </RelativeLayout>
其中linecharview就是自定義的View,而app:xx就是這個View的各種屬性。
二、在values的attrs文件中加入如下xml,來定義linecharview的各種屬性:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LineChar"> <attr name="xylinecolor" format="color"/><!-- xy坐標(biāo)軸顏色 --> <attr name="xylinewidth" format="dimension"/><!-- xy坐標(biāo)軸寬度 --> <attr name="xytextcolor" format="color"/><!-- xy坐標(biāo)軸文字顏色 --> <attr name="xytextsize" format="dimension"/><!-- xy坐標(biāo)軸文字大小 --> <attr name="linecolor" format="color"/><!-- 折線圖中折線的顏色 --> <attr name="interval" format="dimension"/><!-- x軸各個坐標(biāo)點水平間距 --> <attr name="bgcolor" format="color"/><!-- 背景顏色 --> </declare-styleable> </resources>
三、接下來建個類LineCharView 繼承View,并申明如下變量:
<span style="white-space:pre"> </span>private int xori;//圓點x坐標(biāo) private int yori;//圓點y坐標(biāo) private int xinit;//第一個點x坐標(biāo) private int minXinit;//在移動時,第一個點允許最小的x坐標(biāo) private int maxXinit;//在移動時,第一個點允許允許最大的x坐標(biāo) private int xylinecolor;//xy坐標(biāo)軸顏色 private int xylinewidth;//xy坐標(biāo)軸大小 private int xytextcolor;//xy坐標(biāo)軸文字顏色 private int xytextsize;//xy坐標(biāo)軸文字大小 private int linecolor;//折線的顏色 private int interval;//坐標(biāo)間的間隔 private int bgColor;//背景顏色 private List<String> x_coords;//x坐標(biāo)點的值 private List<String> x_coord_values;//每個點狀態(tài)值 private int width;//控件寬度 private int heigth;//控件高度 private int imageWidth;//表情的寬度 private float textwidth;//y軸文字的寬度 float startX=0;//滑動時候,上一次手指的x坐標(biāo)
在構(gòu)造函數(shù)中讀取各個屬性值:
public LineCharView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray= context.obtainStyledAttributes(attrs, R.styleable.LineChar);
xylinecolor=typedArray.getColor(R.styleable.LineChar_xylinecolor, Color.GRAY);
xylinewidth=typedArray.getInt(R.styleable.LineChar_xylinewidth, 5);
xytextcolor=typedArray.getColor(R.styleable.LineChar_xytextcolor, Color.BLACK);
xytextsize=typedArray.getLayoutDimension(R.styleable.LineChar_xytextsize, 20);
linecolor=typedArray.getColor(R.styleable.LineChar_linecolor, Color.GRAY);
interval=typedArray.getLayoutDimension(R.styleable.LineChar_interval, 100);
bgColor=typedArray.getColor(R.styleable.LineChar_bgcolor, Color.WHITE);
typedArray.recycle();
x_coords=new ArrayList<String>();
x_coord_values=new ArrayList<String>();
}
四、接下來可以重寫onLayout方法,來計算控件寬高和坐標(biāo)軸的原點坐標(biāo),坐標(biāo)軸原點的x坐標(biāo)可以通過y軸文字的寬度,y軸寬度,和距離y的水平距離進(jìn)行計算,這里y軸文字只有4種狀態(tài)(A、B、C、D),可以使用下面方法來計算出原點的x坐標(biāo):
Paint paint=new Paint();
paint.setTextSize(xytextsize);
textwidth= paint.measureText("A");
xori=(int) (textwidth+6+2*xylinewidth);//6 為與y軸的間隔
原點的y坐標(biāo)也可以用類似的方法計算出來:
yori=heigth-xytextsize-2*xylinewidth-3; //3為x軸的間隔,heigth為控件高度。
當(dāng)需要展示的數(shù)據(jù)量多時候,無法全部展示時候,需要通過滑動折線圖進(jìn)行展示,我們只需要控制第一點x坐標(biāo),就可以通過interval這個屬性計算出后面每個點的坐標(biāo),但是為了防止將所有的數(shù)據(jù)滑動出界面外,需要在滑動時進(jìn)行控制,其實就是控制第一個點x坐標(biāo)的范圍,第一個點的x坐標(biāo)的最小值可以通過控件的寬度減去原點x坐標(biāo)再減去所有折線圖的水平距離,代碼如下:
minXinit=width-xori-x_coords.size()*interval;
控件在默認(rèn)第一個展示時,第一個點與y軸的水平距離等于interval的一半,在滑動時候如果第一個點出現(xiàn)在這個位置了,就不允許再繼續(xù)向右滑動,所以第一個點x坐標(biāo)的最大值就等這個起始x坐標(biāo)。
xinit=interval/2+xori; maxXinit=xinit;
重寫onLayout方法的代碼如下:
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
if(changed){
width=getWidth();
heigth=getHeight();
Paint paint=new Paint();
paint.setTextSize(xytextsize);
textwidth= paint.measureText("A");
xori=(int) (textwidth+6+2*xylinewidth);//6 為與y軸的間隔
yori=heigth-xytextsize-2*xylinewidth-3;//3為x軸的間隔
xinit=interval/2+xori;
imageWidth= BitmapFactory.decodeResource(getResources(), R.drawable.facea).getWidth();
minXinit=width-xori-x_coords.size()*interval;
maxXinit=xinit;
setBackgroundColor(bgColor);
}
super.onLayout(changed, left, top, right, bottom);
}
五、接下來就可以畫折線、x坐標(biāo)軸上的小圓點和折線上表情
代碼如下:
//畫X軸坐標(biāo)點,折線,表情
@SuppressLint("ResourceAsColor")
private void drawX (Canvas canvas) {
Paint x_coordPaint =new Paint();
x_coordPaint.setTextSize(xytextsize);
x_coordPaint.setStyle(Paint.Style.FILL);
Path path=new Path();
//畫坐標(biāo)軸上小原點,坐標(biāo)軸文字
for(int i=0;i<x_coords.size();i++){
int x=i*interval+xinit;
if(i==0){
path.moveTo(x, getYValue(x_coord_values.get(i)));
}else{
path.lineTo(x, getYValue(x_coord_values.get(i)));
}
x_coordPaint.setColor(xylinecolor);
canvas.drawCircle(x, yori, xylinewidth*2, x_coordPaint);
String text=x_coords.get(i);
x_coordPaint.setColor(xytextcolor);
canvas.drawText(text, x-x_coordPaint.measureText(text)/2, yori+xytextsize+xylinewidth*2, x_coordPaint);
}
x_coordPaint.setStyle(Paint.Style.STROKE);
x_coordPaint.setStrokeWidth(xylinewidth);
x_coordPaint.setColor(linecolor);
//畫折線
canvas.drawPath(path, x_coordPaint);
//畫表情
for(int i=0;i<x_coords.size();i++){
int x=i*interval+xinit;
canvas.drawBitmap(getYBitmap(x_coord_values.get(i)), x-imageWidth/2, getYValue(x_coord_values.get(i))-imageWidth/2, x_coordPaint);
}
//將折線超出x軸坐標(biāo)的部分截取掉
x_coordPaint.setStyle(Paint.Style.FILL);
x_coordPaint.setColor(bgColor);
x_coordPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OVER));
RectF rectF=new RectF(0, 0, xori, heigth);
canvas.drawRect(rectF, x_coordPaint);
}
以上代碼首先通過遍歷x_coords和x_coord_values這兩個List集合,來畫坐標(biāo)點,折線,表情,由于在向左滑動的時候有可能會將坐標(biāo)點,折線繪制到y(tǒng)軸的左邊,所以需要對其進(jìn)行截取。其中getYValue和getYBitmap方法,可以通過x_coord_values的值計算y坐標(biāo)和相應(yīng)的表情。兩方法如:
//得到y(tǒng)坐標(biāo)
private float getYValue(String value)
{
if(value.equalsIgnoreCase("A")){
return yori-interval/2;
}
else if(value.equalsIgnoreCase("B")){
return yori-interval;
}
else if(value.equalsIgnoreCase("C")){
return (float) (yori-interval*1.5);
}
else if(value.equalsIgnoreCase("D")){
return yori-interval*2;
}else{
return yori;
}
}
//得到表情圖
private Bitmap getYBitmap(String value){
Bitmap bitmap=null;
if(value.equalsIgnoreCase("A")){
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.facea);
}
else if(value.equalsIgnoreCase("B")){
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.faceb);
}
else if(value.equalsIgnoreCase("C")){
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.facec);
}
else if(value.equalsIgnoreCase("D")){
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.faced);
}
return bitmap;
}
六、畫好了坐標(biāo)點,折線,表情,接下來就簡單,就可以畫x y軸了,x y軸只要確定的原點坐標(biāo),就非常簡單了,代碼如下:
//畫坐標(biāo)軸
private void drawXY(Canvas canvas){
Paint paint=new Paint();
paint.setColor(xylinecolor);
paint.setStrokeWidth(xylinewidth);
canvas.drawLine(xori, 0, xori, yori, paint);
canvas.drawLine(xori, yori, width, yori, paint);
}
七、最后就可以畫y軸上的坐標(biāo)小原點和y軸的文字了:
//畫Y軸坐標(biāo)點
private void drawY(Canvas canvas){
Paint paint=new Paint();
paint.setColor(xylinecolor);
paint.setStyle(Paint.Style.FILL);
for(int i=1;i<5 ;i++){
canvas.drawCircle(xori, yori-(i*interval/2), xylinewidth*2, paint);
}
paint.setTextSize(xytextsize);
paint.setColor(xytextcolor);
canvas.drawText("D",xori-textwidth-6-xylinewidth , yori-(2*interval)+xytextsize/2, paint);
canvas.drawText("C",xori-textwidth-6-xylinewidth , (float) (yori-(1.5*interval)+xytextsize/2), paint);
canvas.drawText("B",xori-textwidth-6-xylinewidth , yori-interval+xytextsize/2, paint);
canvas.drawText("A",xori-textwidth-6-xylinewidth , (float) (yori-(0.5*interval)+xytextsize/2), paint);
}
八、寫完了以上三個方法:只需要重寫onDraw方法,就可以進(jìn)行繪制了。
@Override
protected void onDraw(Canvas canvas) {
drawX(canvas);
drawXY(canvas);
drawY(canvas);
}
九、為了可以進(jìn)行水平滑動,需要重寫控件的onTouchEvent方法,在滑動時候,實時計算手指滑動的距離來改變第一個點的x坐標(biāo),然后調(diào)用invalidate();就可以刷新控件,重新繪制達(dá)到滑動效果。
@Override
public boolean onTouchEvent(MotionEvent event) {
//如果不用滑動就可以展示所有數(shù)據(jù),就不讓滑動
if(interval*x_coord_values.size()<=width-xori){
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX=event.getX();
break;
case MotionEvent.ACTION_MOVE:
float dis=event.getX()-startX;
startX=event.getX();
if(xinit+dis>maxXinit){
xinit=maxXinit;
}else if(xinit+dis<minXinit){
xinit=minXinit;
}else{
xinit=(int) (xinit+dis);
}
invalidate();
break;
}
return true;
}
十、最后添加一個設(shè)置數(shù)據(jù)源的方法,設(shè)置x_coords,x_coord_values這個兩個List集合,在設(shè)置完成之后調(diào)用invalidate() ,進(jìn)行控件刷新:
/**
* 設(shè)置坐標(biāo)折線圖值
* @param x_coords 橫坐標(biāo)坐標(biāo)點
* @param x_coord_values 每個點的值
*/
public void setValue( List<String> x_coords ,List<String> x_coord_values) {
if(x_coord_values.size()!=x_coords.size()){
throw new IllegalArgumentException("坐標(biāo)軸點和坐標(biāo)軸點的值的個數(shù)必須一樣!");
}
this.x_coord_values=x_coord_values;
this.x_coords=x_coords;
invalidate();
}
總結(jié)
以上就是Android自定義View實現(xiàn)折線圖效果的全部內(nèi)容,希望對大家開發(fā)Android能有所幫助。
相關(guān)文章
Android改變ExpandableListView的indicator圖標(biāo)實現(xiàn)方法
這篇文章主要介紹了Android改變ExpandableListView的indicator圖標(biāo)實現(xiàn)方法,結(jié)合實例形式分析了改變ExpandableListView的indicator圖標(biāo)相關(guān)步驟與實現(xiàn)技巧,涉及Android配置文件的修改,需要的朋友可以參考下2016-03-03
Kotlin新手基礎(chǔ)學(xué)習(xí)之Elvis操作符
Kotlin 是一種在 Java 虛擬機(jī)上運行的靜態(tài)類型編程語言,被稱之為 Android 世界的Swift,由 JetBrains 設(shè)計開發(fā)并開源,下面這篇文章主要給大家介紹了關(guān)于Kotlin新手基礎(chǔ)學(xué)習(xí)之Elvis操作符的相關(guān)資料,需要的朋友可以參考下。2017-12-12
Android中一個應(yīng)用實現(xiàn)多個圖標(biāo)的幾種方式
這篇文章主要給大家介紹了在Android中一個應(yīng)用如何實現(xiàn)多個圖標(biāo)的幾種方式,其中包括了多Activity + intent-filter方式、activity-alias方式以及網(wǎng)頁標(biāo)簽-添加快捷方式,分別給出了詳細(xì)的示例代碼,需要的朋友可以參考借鑒。2017-05-05
Android Studio Gradle插件版本與Gradle版本之間的對應(yīng)關(guān)系
今天小編就為大家分享一篇關(guān)于Android Studio Gradle插件版本與Gradle版本之間的對應(yīng)關(guān)系,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2018-12-12
AndroidStudio安全管理簽名文件keystroe和簽名密碼(星空武哥)
我們在使用AndroidStudio進(jìn)行release版的apk簽名的時候,往往都是將簽名文件keystore放在項目中,密碼寫在build.gradle中,keystore和密碼就隨著代碼上傳到了Git倉庫中了,這樣往往很不安全,因為這樣被人獲取2017-09-09
Android 7.0 SEAndroid app權(quán)限配置方法
今天小編就為大家分享一篇Android 7.0 SEAndroid app權(quán)限配置方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
Android實現(xiàn)數(shù)據(jù)按照時間排序
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)數(shù)據(jù)按照時間排序的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09
Android RxJava創(chuàng)建操作符Interval
這篇文章主要為大家詳細(xì)介紹了Android RxJava創(chuàng)建操作符Interval的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12

