android用recyclerview擼一個(gè)折線圖

以前覺得用安卓畫一個(gè)折線圖好難，當(dāng)然github上也有很多方便的框架，幾行代碼就可以實(shí)現(xiàn)一個(gè)折線圖，而且各種樣式都有，但是別人的框架畢竟是為了滿足大眾的需求，沒有專一性，正好前幾天接了一個(gè)私活，要用到折線圖，時(shí)間也比較充足，就試著自己寫一個(gè)玩玩。

經(jīng)過仔細(xì)分析小米天氣中的折線圖后，發(fā)現(xiàn)其實(shí)寫一個(gè)折線圖是非常簡單的。先上兩張小米天氣的折線圖


圖一
圖二

如果我告訴你這兩個(gè)圖的實(shí)現(xiàn)思路是一樣的，而且都很容易，你會(huì)不會(huì)很震驚。
其實(shí)是第二種圖中“今天”那一項(xiàng)數(shù)據(jù)給提供了思路，沒錯(cuò)，recyclerview。
拿第一張圖片來分析


image.png

黑色部分框起來的就當(dāng)做一個(gè)item，首先我們要把所有數(shù)據(jù)中的最大值和最小值取出來，如紅線畫住的部分，然后確定一個(gè)區(qū)間（y坐標(biāo)），表示我們所有的點(diǎn)都要在這個(gè)區(qū)間內(nèi)顯示。圖中當(dāng)值為176表示最大，在第一個(gè)紅線那個(gè)高度，44表示最小，在第二條直線那個(gè)高度，這兩個(gè)高度是我們指定的，那么70這個(gè)值對應(yīng)的高度很明顯就可以計(jì)算出來，103的高度也可以計(jì)算出來，70和103的中間值，也就是圖中第一個(gè)紅圈圈住的地方的高度也可以確定出來，同理，第三個(gè)小圓圈也知道了，然后第一個(gè)小圓圈和第二個(gè)連線，第二個(gè)和第三個(gè)連線，這就畫好了一個(gè)item的折線。多個(gè)item連接起來就是上面的效果。

第二張圖思路也是一樣的，只不過在一個(gè)item上畫了兩個(gè)折線，如圖中黑線框住的區(qū)域


image.png

思路就是這樣，是不是很簡單了，當(dāng)然前提要掌握view的繪制，因?yàn)槊恳粋€(gè)item都是繼承自view，然后繪制的。

上代碼,總共就三個(gè)java文件，也不用布局文件，直接導(dǎo)進(jìn)去就可以看效果。記得依賴recyclerview的庫哦。代碼注釋也寫得比較清楚，主要代碼就是那個(gè)item

item的代碼

package com.xk.linedemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;


/**
 * Created by xuekai on 2016/11/10.
 */

public class Item extends View {
    private int maxValue;//最高值
    private int minValue;//最低值
    private int currentValue = 15;//當(dāng)前值
    private int lastValue = 10;//上一個(gè)值
    private int nextValue = 10;//下一個(gè)值
    private Paint mPaint;
    private int viewHeight;
    private int viewWidth;
    private int pointTopY = 130;//最高點(diǎn)的Y坐標(biāo) 130
    private int pointBottomY = 255;//最低點(diǎn)的Y坐標(biāo) 255
    private int pointX;//所有點(diǎn)的x坐標(biāo)
    private int pointY;//當(dāng)前點(diǎn)的Y

    private boolean drawLeftLine = true;//是否畫左邊的線
    private boolean drawRightLine = true;//是否畫右邊的線

    public Item(Context context) {
        super(context);
        init();
        setBackgroundColor(0xffffffff);
    }

    public void setCurrentValue(int currentValue) {
        this.currentValue = currentValue;
        invalidate();
    }

    public void setMaxValue(int maxValue) {
        this.maxValue = maxValue;
    }

    public void setMinValue(int minValue) {
        this.minValue = minValue;
    }

    private void init() {
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        initValues();
    }

    private void initValues() {
        viewHeight = getMeasuredHeight();
        viewWidth = getMeasuredWidth();
        pointX = viewWidth / 2;

    }


    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        pointY = (int) ((pointBottomY - pointTopY) * 1f / (maxValue - minValue) * (maxValue - currentValue + minValue) + pointTopY);

        drawLine(canvas);
        drawGraph(canvas);
        drawPoint(canvas);
        drawValue(canvas);

        Log.e("Item", "" + lastValue + " " + currentValue + " " + nextValue);
    }

    /**
     * 畫數(shù)字
     *
     * @param canvas
     */
    private void drawValue(Canvas canvas) {
        mPaint.setTextSize(20);
        mPaint.setColor(Color.parseColor("#ff333333"));
        mPaint.setStrokeWidth(0);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        float baseLine1 = pointY - fontMetrics.bottom * 4;
        canvas.drawText(currentValue + "", viewWidth / 2, baseLine1, mPaint);
    }

    public void setlastValue(int lastValue) {
        this.lastValue = lastValue;
    }

    public void setNextValue(int nextValue) {
        this.nextValue = nextValue;
    }

    /**
     * 畫折線
     *
     * @param canvas
     */
    private void drawGraph(Canvas canvas) {

        mPaint.setPathEffect(null);

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0xff24C3F1);
        mPaint.setStrokeWidth(3);
        mPaint.setAntiAlias(true);
        if (drawLeftLine) {
            float middleValue = currentValue - (currentValue - lastValue) / 2f;
            float middleY = ((pointBottomY - pointTopY) * 1f / (maxValue - minValue) * (maxValue - middleValue + minValue) + pointTopY);
            canvas.drawLine(0, middleY, pointX, pointY, mPaint);
        }
        if (drawRightLine) {
            float middleValue = currentValue - (currentValue - nextValue) / 2f;
            float middleY = ((pointBottomY - pointTopY) * 1f / (maxValue - minValue) * (maxValue - middleValue + minValue) + pointTopY);
            canvas.drawLine(pointX, pointY, viewWidth, middleY, mPaint);
        }
    }

    /**
     * 畫數(shù)字下面的小圓圈
     *
     * @param canvas
     */
    private void drawPoint(Canvas canvas) {
        mPaint.setColor(0xffffffff);
        mPaint.setPathEffect(null);

        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(pointX, pointY, 10, mPaint);
        mPaint.setColor(0xff24C3F1);
        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(pointX, pointY, 5, mPaint);
    }

    /**
     * 畫最下面的一條線
     *
     * @param canvas
     */
    private void drawLine(Canvas canvas) {
        mPaint.setColor(0xffD3D3D3);
        mPaint.setPathEffect(null);

        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.FILL);
        if (drawLeftLine) {
            canvas.drawLine(0, 500, viewWidth / 2, 500, mPaint);//這兩個(gè)值表示下面那條橫線的Y坐標(biāo)（第二四個(gè)參數(shù)）

        }
        if (drawRightLine) {
            canvas.drawLine(viewWidth / 2, 500, viewWidth, 500, mPaint);//這兩個(gè)值表示下面那條橫線的Y坐標(biāo)（第二四個(gè)參數(shù)）

        }
    }

    public void setDrawLeftLine(boolean drawLeftLine) {
        this.drawLeftLine = drawLeftLine;
    }

    public void setDrawRightLine(boolean drawRightLine) {
        this.drawRightLine = drawRightLine;
    }


}



折線view的代碼
package com.xk.linedemo;

import android.content.Context;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * Created by xk on 2016/11/9 22:14.
 */

public class BrokenLineView extends RecyclerView {

    private int maxValue;
    private int minValue;
    private List<Integer> data = new ArrayList<>();
    private Adapter adapter;

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


    private void init() {
        setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false));
        adapter = new Adapter();
        setAdapter(adapter);
    }

    public void setData(List<Integer> d) {
        if (data != null) {
            data.clear();
            data.addAll(d);
            Collections.sort(d);
            minValue = d.get(0);
            maxValue = d.get(d.size() - 1);
            adapter.notifyDataSetChanged();
        }
    }

    class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {


        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            Item item = new Item(getContext());
            item.setMinValue(minValue);
            item.setMaxValue(maxValue);
            LayoutParams layoutParams = new LayoutParams(200, ViewGroup.LayoutParams.MATCH_PARENT);//這個(gè)數(shù)字表示每一個(gè)item的寬度
            item.setLayoutParams(layoutParams);
            return new ViewHolder(item);
        }

        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            if (position == 0) {
                holder.item.setDrawLeftLine(false);
            } else {
                holder.item.setDrawLeftLine(true);
                holder.item.setlastValue((data.get(position - 1)));
            }
            holder.item.setCurrentValue((data.get(position)));


            if (position == data.size() - 1) {
                holder.item.setDrawRightLine(false);
            } else {
                holder.item.setDrawRightLine(true);
                holder.item.setNextValue((data.get(position + 1)));
            }
        }

        @Override
        public int getItemCount() {
            return data.size();
        }

        class ViewHolder extends RecyclerView.ViewHolder {
            Item item;
            public ViewHolder(View itemView) {
                super(itemView);
                this.item = (Item) itemView;
            }
        }
    }


}


MainActivity的代碼
package com.xk.linedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        BrokenLineView brokenLineView = new BrokenLineView(this);
        ArrayList<Integer> integers = new ArrayList<>();
        integers.add(2);
        integers.add(12);
        integers.add(21);
        integers.add(4);
        integers.add(7);
        integers.add(18);
        integers.add(30);
        brokenLineView.setData(integers);
        setContentView(brokenLineView);

    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容