막대 그래프의 처음은 이렇게

 

 

 

 

가장 기본이 되는 그래프인 막대 그래프를 만들어 보자~

 

위와 같이 막대와 그 수치를 넣을 것이다

예전에 올렸던 꺽은선 그래프를 살짝 변경해서 코딩했다.

 

 

private Paint mLinePaint, mTextPaint;

private float mTextGap;
private int[] mPoints, mPointX, mPointY;
private int mUnit, mOrigin, mDivide;

public GraphView(Context context, AttributeSet attrs) {
    super(context, attrs);

    setTypes(context, attrs);
}

//그래프 옵션을 받는다
private void setTypes(Context context, AttributeSet attrs) {
    TypedArray types = context.obtainStyledAttributes(attrs, R.styleable.GraphView);

    //수치 옵션
    Paint paint = new Paint();
    paint.setColor(types.getColor(R.styleable.GraphView_textColor, Color.BLACK));
    paint.setTextSize(types.getDimension(R.styleable.GraphView_textSize, 0));
    paint.setTextAlign(Paint.Align.CENTER);
    mTextPaint = paint;

    //막대와 수치와의 거리
    mTextGap = types.getDimension(R.styleable.GraphView_textGap, 0);

    //막대 옵션
    paint = new Paint();
    paint.setColor(types.getColor(R.styleable.GraphView_lineColor, Color.BLACK));
    paint.setStrokeWidth(types.getDimension(R.styleable.GraphView_lineThickness, 0));
    mLinePaint = paint;
}

//그래프 정보를 받는다
public void setPoints(int[] points, int unit, int origin, int divide) {
    mPoints = points;   //y축 값 배열

    mUnit = unit;       //y축 단위
    mOrigin = origin;   //y축 원점
    mDivide = divide;   //y축 값 갯수
}

//그래프를 만든다
public void draw() {
    int height = getHeight();
    int[] points = mPoints;

    //x축 막대 사이의 거리
    float gapx = (float)getWidth() / points.length;

    //y축 단위 사이의 거리
    float gapy = height / mDivide;

    float halfgab = gapx / 2;

    int length = points.length;
    mPointX = new int[length];
    mPointY = new int[length];

    for(int i = 0 ; i < length ; i++) {
        //막대 좌표를 구한다
        int x = (int)(halfgab + (i * gapx));
        int y = (int)(height - (((points[i] / mUnit) - mOrigin) * gapy));

        mPointX[i] = x;
        mPointY[i] = y;
    }
}

//그래프를 그린다(onCreate 등에서 호출시)
public void drawForBeforeDrawView() {
    //뷰의 크기를 계산하여 그래프를 그리기 때문에 뷰가 실제로 만들어진 시점에서 함수를 호출해 준다
    getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            draw();

            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN)
                getViewTreeObserver().removeGlobalOnLayoutListener(this);
            else
                getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
    });
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if(mPointX != null && mPointY != null) {
        int length = mPointX.length;

        int bottom = getHeight();
        for (int i = 0; i < length; i++) {
            int x = mPointX[i];
            int y = mPointY[i];

            //믹대 위 수치를 쓴다
            canvas.drawText("" + mPoints[i], x, y - mTextGap, mTextPaint);

            //믹대를 그린다
            canvas.drawLine(x, y, x, bottom, mLinePaint);
        }
    }
}

 

 

옵션 attrs.xml 이다

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GraphView">
<attr name="textColor" format="color"/>
<attr name="textSize" format="dimension"/>
<attr name="textGap" format="dimension"/>

<attr name="lineColor" format="color"/>
<attr name="lineThickness" format="dimension"/>
</declare-styleable>
</resources>

 

 

layout은 이렇다

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <kr.gyjmoble.graphtest.GraphView android:id="@+id/GraphView"
        xmlns:gyjmobile="http://schemas.android.com/apk/res/kr.gyjmoble.graphtest"
        android:layout_width="match_parent" android:layout_height="match_parent"
        gyjmobile:textColor="#ec4800" gyjmobile:textSize="15sp" 
        gyjmobile:textGap="2dp"
        gyjmobile:lineColor="#0073cc" gyjmobile:lineThickness="20dp"/>

</LinearLayout>

 

 

자 이젠 사용하자

 

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//그래프에 들어갈 수치 배열
int[] points = {5, 3, 7, 8, 4, 3, 3, 6, 4, 1};

GraphView graphview = (GraphView) findViewById(R.id.GraphView);

//단위는 1씩, 원점은 0, 총 10줄로 나누어진 그래프를 그린다
graphview.setPoints(points, 1, 0, 10);
graphview.drawForBeforeDrawView();
}

 

 

처음은 이렇게 간단하게 출발해서 다양한 그래프를 만들면 된다~

 

 

 

 

 

 

 

도움이 되셨다면~ 정성으로 빚은 저희 앱!  많은 이용 바래요:)

 

https://meorimal.com/index.html?tab=spaceship

우주선 - 방치형 인공지능 투자 체험기

 

https://meorimal.com/subway.html

지하철어디있니