블로그 이미지
매몰

모바일 어플리케이션 개발 1인 기업 고영진모바일입니다. 저와 함께 맛깔스러운 앱을 만들어 보아요~

Rss feed Tistory
개발/android 2016.04.25 10:48

초간단 꺽은선 그래프 만들기

그래프는 텍스트로 표현하기 복잡한 정보를 한결 보기좋게 만드는 매력이 있다.

그래서 간편함의 상징인 모바일에서는 빠질수 없는 요소이다.


특히 많이 쓰이는 것이 막대 그래프와 꺽은선 그래프 일것이다.

그런데 꺽은선 그래프는 선이 하나로 이어져 있기 때문에 만드는데 애를 먹을때가 있다


그때를 대비해 초간단 꺽은선 그래프뷰를 만들어 놓자~ 

구미에 맞게 확장해서 쓰면 매우 유용하다



public class GraphView extends View {

private ShapeDrawable mLineShape;
private Paint mPointPaint;

private float mThickness;
private int[] mPoints, mPointX, mPointY;
private int mPointSize, mPointRadius, mLineColor, 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);

mPointPaint = new Paint();
mPointPaint.setColor(types.getColor(R.styleable.GraphView_pointColor, Color.BLACK));
mPointSize = (int)types.getDimension(R.styleable.GraphView_pointSize, 10);
mPointRadius = mPointSize / 2;

mLineColor = types.getColor(R.styleable.GraphView_lineColor, Color.BLACK);
mThickness = types.getDimension(R.styleable.GraphView_lineThickness, 1);
}

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

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

//그래프를 만든다
private void draw() {
Path path = new Path();

int height = getHeight();
int[] points = mPoints;

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

//y축 단위 사이의 거리
float gapy = (height - mPointSize) / 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 - mPointRadius - (((points[i] / mUnit) - mOrigin) * gapy));

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

//선을 그린다
if(i == 0)
path.moveTo(x, y);
else
path.lineTo(x, y);
}

//그려진 선으로 shape을 만든다
ShapeDrawable shape = new ShapeDrawable(new PathShape(path, 1, 1));
shape.setBounds(0, 0, 1, 1);

Paint paint = shape.getPaint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(mLineColor);
paint.setStrokeWidth(mThickness);
paint.setAntiAlias(true);

mLineShape = shape;
}

//그래프를 그린다(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(mLineShape != null)
mLineShape.draw(canvas);

//점을 그린다
if(mPointX != null && mPointY != null) {
int length = mPointX.length;
for (int i = 0; i < length; i++)
canvas.drawCircle(mPointX[i], mPointY[i], mPointRadius, mPointPaint);
}
}
}



그래프 옵션을 위해 attrs.xml 에도 다음을 추가한다

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GraphView">
<attr name="pointColor" format="color"/>
<attr name="pointSize" 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"
xmlns:gyjmoble="http://schemas.android.com/apk/res/kr.gyjmoble.graphtest"
android:layout_width="match_parent" android:layout_height="match_parent">

<kr.gyjmoble.graphtest.GraphView android:id="@+id/GraphView"
android:layout_width="match_parent" android:layout_height="match_parent"
gyjmoble:pointColor="#ec4800" gyjmoble:pointSize="8dp"
gyjmoble:lineColor="#0073cc" gyjmoble:lineThickness="2dp"/>

</LinearLayout>




Activity 에선 그래프를 그리자~


@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();
}


이렇게 나온다~







 

 



수제 앱 장인: 고영진


(주)고영진모바일

1인기업 대표이사 겸 개발자

  

     실패만 하고 있어도 꿈을 포기하지 않는 남자 

     제가 직접 경험하고 습득한 지식을 위주로 올릴게요

 






사업자 정보 표시
고영진모바일 | 고영진 | 서울특별시 관악구 낙성대동 서울대연구공원 SK상생혁신센터 | 사업자 등록번호 : 109-11-82076 | TEL : 010-9990-3674 | Mail : gyjmeba@hanmail.net | 통신판매신고번호 : 2010-서울강서-0217호 | 사이버몰의 이용약관 바로가기
TOTAL 69,581 TODAY 10