我为我的Android应用程序创建了一个自定义的半圆形图(破折号图表)(我找不到任何库来执行它。如果你知道任何评论)。
编辑:我尝试为其条目设置动画(详细信息如下),但它不起作用。所以我开始搜索如何为片段中的普通TextView
或ImageView
制作动画,但我无法这样做。现在我正在更改帖子,以便人们可以学习如何在片段中为视图(不仅仅是自定义视图)设置动画。任何说明如何为片段中的视图设置动画的答案都是受欢迎的。
代码如下
public class DonutChart extends View {
private float radius;
Paint paint;
Paint shadowPaint;
int a,b,c;
Path myPath;
Path shadowPath;
RectF outterCircle;
RectF innerCircle;
RectF shadowRectF;
public DonutChart(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.DonutChart,0, 0);
try {
radius = a.getDimension(R.styleable.DonutChart_radius, 20.0f);
} finally {
a.recycle();
}
paint = new Paint();
paint.setDither(true);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setAntiAlias(true);
paint.setStrokeWidth(radius / 14.0f);
shadowPaint = new Paint();
shadowPaint.setColor(0xf0000000);
shadowPaint.setStyle(Paint.Style.STROKE);
shadowPaint.setAntiAlias(true);
shadowPaint.setStrokeWidth(6.0f);
shadowPaint.setMaskFilter(new BlurMaskFilter(4, BlurMaskFilter.Blur.SOLID));
myPath = new Path();
shadowPath = new Path();
outterCircle = new RectF();
innerCircle = new RectF();
shadowRectF = new RectF();
float adjust = (.019f*radius);
shadowRectF.set(adjust, adjust, radius*2-adjust, radius*2-adjust);
adjust = .038f * radius;
outterCircle.set(adjust, adjust, radius*2-adjust, radius*2-adjust);
adjust = .276f * radius;
innerCircle.set(adjust, adjust, radius * 2 - adjust, radius * 2 - adjust);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// draw shadow
paint.setShader(null);
float adjust = (.0095f*radius);
paint.setShadowLayer(8, adjust, -adjust, 0xaa000000);
drawDonut(canvas, paint, 180, (180+a+b+c));
//Maroon
//setGradient(0xff84BC3D,0xff5B8829);
setGradient(0xffffb300,0xffffb300);
drawDonut(canvas,paint, (180+a),b);
//Violet
//setGradient(0xffe04a2f,0xffB7161B);
setGradient(0xffd32f2f,0xfff44336);
drawDonut(canvas, paint, 180,a);
// White
// setGradient(Color.TRANSPARENT,Color.TRANSPARENT);
//drawDonut(canvas, paint, 0, 180);
// Green
setGradient(0xff388e3c,0xff66bb6a);
drawDonut(canvas, paint,(180+a+b),c);
}
public void drawDonut(Canvas canvas, Paint paint, float start,float sweep){
myPath.reset();
myPath.arcTo(outterCircle, start, sweep, false);
myPath.arcTo(innerCircle, start+sweep, -sweep, false);
myPath.close();
canvas.drawPath(myPath, paint);
}
public void setGradient(int sColor, int eColor){
paint.setShader(new RadialGradient(radius, radius, radius - 5,
new int[]{sColor, eColor},
new float[]{.6f, .95f}, TileMode.CLAMP));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int desiredWidth = (int) radius*2;
int desiredHeight = (int) radius*2;
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
//70dp exact
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
}else if (widthMode == MeasureSpec.AT_MOST) {
//wrap content
width = Math.min(desiredWidth, widthSize);
} else {
width = desiredWidth;
}
//Measure Height
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
height = Math.min(desiredHeight, heightSize);
} else {
height = desiredHeight;
}
//MUST CALL THIS
setMeasuredDimension(width, height);
}
public void getData(int x,int y){
invalidate();
a=((x*180)/10);
b=(y*180)/10;
c=180-(a+b);
a=90;
b=40;
c=(180-(a+b));
//Toast.makeText(getContext(),"Inside Chart "+s1+" "+s2+" "+s3 +" "+String.valueOf(x),Toast.LENGTH_SHORT).show();
}
}
图表的布局定义如下
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:customviews="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@android:color/transparent"
android:id="@+id/statistics_1_page"
tools:context=".MainActivity">
<com.spintum.preexam.DonutChart
android:id="@+id/donutChart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
customviews:radius="100dp"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="75dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/PerformanceRating"
android:textSize="22sp"
android:textStyle="bold"
android:gravity="center"
android:text="You Average Score is 80%"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/PerformanceRating_1"
android:textSize="18sp"
android:textStyle="bold|italic"
android:layout_gravity="center"
android:text="Don't Stop till you reach 100"/>
</LinearLayout>
我使用片段为布局充气,如下所示
public class Fragment_Statistics extends Fragment {
DonutChart chart;
public View onCreateView(LayoutInflater layoutInflater,ViewGroup container,Bundle SavedInstances){
View statistics_fragment=getActivity().getLayoutInflater().inflate(R.layout.fragment_statistics, null);
chart = (DonutChart) statistics_fragment.findViewById(R.id.donutChart);
chart.getData(2, 2);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
//Delay and give the device enough time to render the chart
}
}, 2000);
Animation animation_clock=AnimationUtils.loadAnimation(getActivity(),R.anim.clockwise);
chart.startAnimation(animation_clock);
return statistics_fragment;
}
@Override
public void onResume() {
super.onResume();
chart.invalidate();
}
片段中定义的ClockWise动画如下
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000" >
</rotate>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:startOffset="5000"
android:fromDegrees="360"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000" >
</rotate>
我认为我已经完成了所有操作,但没有创建动画,页面只显示图表..
有人可以告诉我我的代码有什么问题,还是有比我试图做的更好的方法呢?