Android 는 간단 한 막대 그래프 와 곡선 그래프 인 스 턴 스 코드 를 실현 합 니 다.
이전에 도표 lib 를 쓴 적 이 있 지만 개발 속 도 는 대부분 제품 의 수요 변화 에 따라 잡기 어렵 기 때문에 원래 의 도표 라 이브 러 리 를 수정 했다.도표 아래 에 table 디 스 플레이 에 대응 하 는 유형 을 통합 시 키 고 곡선 으로 접 는 선 을 교체 하 며 다 곡선 디 스 플레이 를 지원 하 며 디 스 플레이 애니메이션 을 추가 하고 맞 춤 형 속성 을 추가 했다.수평 막대 그래프 와 중첩 막대 그래프,다 곡선 도와 떡 모양 그림 의 표 시 를 지원 합 니 다.다음은 더 이상 할 말 이 없습니다.상세 한 소 개 를 해 보 겠 습 니 다.
1.효과 도
2.각종 도표 의 사용 방식
1.떡 모양 그림 은 원래 의 사용 과 마찬가지 로 애니메이션 만 추 가 했 을 뿐 예전 의 글,떡 모양 그림 을 참조 하여 사용 할 수 있 습 니 다.
2. 수평 다 주 상도
2.1 xml 레이아웃
<wellijohn.org.varchart.hor_bar_with_line_chart.ChartLine
android:id="@+id/chartline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/white"
app:default_x_visible_num="4.2"//
app:y_interval="40dp"//Y
app:y_num_text_max_width="56dp"//y />
그리고 yvisible_num:y 축 은 몇 열 을 표시 해 야 합 니까?2.2 데이터 설정
public class HorBarActivity extends AppCompatActivity {
//
private ChartLine mChartline;
//
private List<List<DotVo>> mMulListDisDots;
//x
private String[] mXdots = new String[]{"08/18"
, "08/19",
"08/20", "08/21", "08/22", "08/23", "08/24",
"08/25", "08/26", "08/27", "08/28", "08/29", "09/01", "09/02", "09/23",
};
private double mMax = 44;
private Random rand = new Random();
private List<CategoryVo> mCategoryList;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hor_bar);
initView();
initMulTestData();
initCategoryList();
try {
mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationOpen(true).setListDisDots(mMulListDisDots).
setCategoryList(mCategoryList).reDraw();
} catch (YCoordinateException e) {
Log.d("MainActivity", "onCreate: ");
e.printStackTrace();
}
}
/**
* , list, CategoryVo,
* CategoryVo:{
*
* private String categoryName;
*
* private List<String> categoryValueList;
* }
*/
private void initCategoryList() {
mCategoryList = new ArrayList<>();
mCategoryList.add(new CategoryVo());
mCategoryList.add(new CategoryVo());
mCategoryList.add(new CategoryVo());
}
/**
* ,private List<List<DotVo>> mMulListDisDots;
* List<DotVo>> ,
*/
private void initMulTestData() {
mMulListDisDots = new ArrayList<>();
for (int i = 0; i < 3; i++) {
ArrayList<DotVo> temp = new ArrayList();
DotVo tempDotVo = new DotVo("08/18", rand.nextInt((int) mMax));
temp.add(tempDotVo);
DotVo tempDotVo1 = new DotVo("08/19", rand.nextInt((int) mMax));
temp.add(tempDotVo1);
DotVo tempDotVo2 = new DotVo("08/20", rand.nextInt((int) mMax));
temp.add(tempDotVo2);
DotVo tempDotVo3 = new DotVo("08/21", rand.nextInt((int) mMax));
temp.add(tempDotVo3);
DotVo tempDotVo4 = new DotVo("08/22", rand.nextInt((int) mMax));
temp.add(tempDotVo4);
DotVo tempDotVo5 = new DotVo("08/23", rand.nextInt((int) mMax));
temp.add(tempDotVo5);
DotVo tempDotVo6 = new DotVo("09/02", rand.nextInt((int) mMax));
temp.add(tempDotVo6);
mMulListDisDots.add(temp);
}
}
private void initView() {
mChartline = findViewById(R.id.chartline);
}
}
3.막대 그래프 중첩3.1 xml 레이아웃
<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLayBarChartLine
android:id="@+id/overlay_chart_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/white"
android:visibility="visible"
app:overlay_default_x_visible_num="4.2"
app:overlay_y_interval="40dp"
app:overlay_y_num_text_max_width="56dp" />
3.2 데이터 설정,예 를 들 어 2.2 와 같다.4.실현 의 몇 가지 관건
4.1 너 비 는 다시 써 야 합 니 다.onMeasure 는 컨트롤 의 너 비 는 화면의 너비 보다 크 고 너 비 는 표 시 된 x 축의 점 과 간격,그리고 y 축 좌표 의 문자 가 차지 하 는 너비 의 거리 에 따라 구성 되 기 때 문 입 니 다.
int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);
int resultWidthSize = 0;
int resultHeightSize = 0;
int resultWidthMode = MeasureSpec.EXACTLY;// childView
int resultHeightMode = MeasureSpec.EXACTLY;
int paddingWidth = getPaddingLeft() + getPaddingRight();
int paddingHeight = getPaddingTop() + getPaddingBottom();
ViewGroup.LayoutParams thisLp = getLayoutParams();
switch (widthParentMeasureMode) {
//
case MeasureSpec.UNSPECIFIED:
//
if (thisLp.width > 0) {
resultWidthSize = thisLp.width;
resultWidthMode = MeasureSpec.EXACTLY;
} else {
resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
resultWidthMode = MeasureSpec.UNSPECIFIED;
}
break;
case MeasureSpec.AT_MOST:
//
if (thisLp.width > 0) {
resultWidthSize = thisLp.width;
resultWidthMode = MeasureSpec.EXACTLY;
} else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);
resultWidthMode = MeasureSpec.AT_MOST;
} else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
resultWidthMode = MeasureSpec.AT_MOST;
}
break;
case MeasureSpec.EXACTLY:
//
if (thisLp.width > 0) {
resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);
resultWidthMode = MeasureSpec.EXACTLY;
} else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
resultWidthSize = widthParentMeasureSize;
resultWidthMode = MeasureSpec.EXACTLY;
} else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
resultWidthMode = MeasureSpec.AT_MOST;
}
break;
}
setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),
MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));
4.2 고정된 구역 을 계획 합 니 다.구역 을 초과 하 는 부분 은 보이 지 않 습 니 다.이것 은 이전에 사용 한 bitmap 으로 이 루어 집 니 다.어색 합 니 다.뒤에서 공식 소스 코드 를 읽 을 때 canvas 의 clipRect 방법 을 알 게 되 었 습 니 다.저희 가 이 걸 그 릴 때 onDraw 방법 에서 호출 되 었 습 니 다.
int clipRestoreCount = canvas.save();
canvas.clipRect(mContentRect);//
doDraw();//
canvas.restoreToCount(clipRestoreCount);// restoreToCount
4.3 애니메이션 은 우리 가 ValueAnimator 로 실현 할 수 있다.예 를 들 어 떡 모양 의 그림:그의 그림 은 0-360 각도 의 변화 이 고 우 리 는 할 수 있다.
private void startPathAnim(long duration) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 360);
valueAnimator.setDuration(duration);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mDrawAngle = (float) animation.getAnimatedValue();
ViewCompat.postInvalidateOnAnimation(CirclePercentChart.this);
}
});
valueAnimator.start();
}
그 다음 에 mDraw Angle 을 통 해 매번 그 리 는 각 도 를 제어 하면 0-360 도 에서 그 리 는 느낌 을 받 을 수 있 습 니 다.그 기둥 모양 의 애니메이션 도 똑 같 아서 변 하지 않 고 변화 할 수 있 습 니 다.4.4 베 세 르 곡선 그리 기 알고리즘
if (i == 0) {//
path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);//
} else {
float cpx = preX + (mDots[0] - preX) / 2.0f;
path.cubicTo(cpx, preY + (mLastHorLineY - preY) * mPhaseY,
cpx, mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY,
mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);}
베 어 셀 곡선 을 그 릴 때 저 는 이런 제어점 의 계산 규칙 을 자세히 살 펴 보 았 습 니 다.세 가지 점 에 따라 두 개의 제어점 을 계산 할 수 있 습 니 다.그러나 이렇게 세 개의 점 내부 곡선 을 그 리 는 것 은 매우 부 드 럽 습 니 다.그러나 다음 네 번 째 점 이 연결 되 었 을 때 느낌 이 좋 지 않 아서 저 는 위의 계산 방법 으로 제어점 을 계산 하 였 습 니 다.알고리즘 을 붙 였 습 니 다.매개 변 수 는 각각 1,2,3 의 x 와 y 좌표 와 구 부 림 계수 이다.
public static ControlPonits getControlPoints(double x0, double y0, double x1, double y1, double x2, double y2, double paramCoefficient) {
double d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
double d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
double fa = paramCoefficient * d01 / (d01 + d12); // scaling factor for triangle Ta
double fb = paramCoefficient * d12 / (d01 + d12); // ditto for Tb, simplifies to fb=t-fa
double p1x = x1 - fa * (x2 - x0); // x2-x0 is the width of triangle T
double p1y = y1 - fa * (y2 - y0); // y2-y0 is the height of T
double p2x = x1 + fb * (x2 - x0);
double p2y = y1 + fb * (y2 - y0);
ControlPonits tempControlPoints = new ControlPonits();
tempControlPoints.beforeControlPointX = (float) p1x;
tempControlPoints.beforeControlPointY = (float) p1y;
tempControlPoints.afterControlPointX = (float) p2x;
tempControlPoints.afterControlPointY = (float) p2y;
return tempControlPoints;
}
총결산이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.