Canvas在安卓的实际开发还是经常用到的,它能够画出各种各样的图像,比较常见的就是饼状图,柱状图的运用,还有其他更复杂应用,等待我们去学习。本篇博客记录下我在开发过程中遇到的一些需求,就是用到了Canvas。
一、旋转的饼状图
先看如下效果图,本界面包含三个部分,上中下,其中中间部分就是显示旋转的饼状图,下面图片不是gif看不到旋转效果。
其中布局代码是
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:id="@+id/title"
android:background="#0066FF"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="大转盘展示"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:id="@+id/show"
android:layout_weight="3"
android:orientation="vertical"
>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:background="#0066FF"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/sogou"
android:text="这是尾部"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/piez"
android:text="饼状图/柱状图"
/>
</LinearLayout>
</LinearLayout>
最主要的Activity的代码是:
public class MainActivity extends Activity {
private View view;
private int width; // 屏幕宽度
private int height; // 屏幕高度
private int offset;
private LinearLayout show; //展示大转盘区域
private LinearLayout title; //展示大转盘头部
private RotateAnimation animation;
private Button soghou;
private Button piez;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
show = (LinearLayout) this.findViewById(R.id.show);
title = (LinearLayout) this.findViewById(R.id.title);
soghou = (Button) this.findViewById(R.id.sogou);
piez = (Button) this.findViewById(R.id.piez);
soghou.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this,SogouActivity.class);
startActivity(intent);
}
});
piez.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, PieZActivity.class);
startActivity(intent);
}
});
view = new MyView(this);
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
height = display.getHeight();
offset = height / 5;
animation = new RotateAnimation(0f, 359f,Animation.ABSOLUTE,
width / 2, Animation.ABSOLUTE, height/2 - offset);
animation.setDuration(3000);//没转一圈所需时间 单位毫秒
animation.setRepeatCount(-1);//不停旋转
animation.setInterpolator(new LinearInterpolator()); //使得旋转效果变的是匀速 不设置的话 转一圈 会有停顿
makeViewRotate();
show.addView(view);
}
/**
* 使画出的效果图旋转
*/
private void makeViewRotate() {
view.setAnimation(animation);
view.startAnimation(animation);
}
/**
* 自定义布局
*
* @author c_fei
*
*/
class MyView extends View {
Paint paint;
public MyView(Context context) {
super(context);
paint = new Paint();// 设置一个笔刷大小是3的黄色的画笔
paint.setColor(Color.YELLOW);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);
paint.setStyle(Style.FILL); //画出来的是实心的
}
@Override
protected void onDraw(Canvas canvas) {
//画出一个圆 并能旋转 半径是300
paint.setColor(Color.YELLOW);
canvas.drawCircle(width / 2, height/2 -offset, 300, paint);
paint.setColor(Color.RED);
paint.setTextSize(40);
paint.setColor(Color.GRAY);
//画出圆心
canvas.drawPoint(width / 2, height/2 -offset, paint);
canvas.drawText("旋转的内容", width / 2, height/2 -offset - 100, paint);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
int bitmapWidthOffset = bitmap.getWidth()/2;
int bitmapHeightOffset = bitmap.getHeight()/2;
canvas.drawBitmap(bitmap,width / 2 - bitmapWidthOffset, height/2 - offset - bitmapHeightOffset, paint);
//画出一个矩形 充满了这个屏幕
// paint.setColor(Color.BLUE);
// RectF rectF = new RectF(0f, 0f, width, height);
// canvas.drawRect(rectF, paint);
//画出一个圆角矩形 第二个和第三个参数表示圆角x y轴的半径
// canvas.drawRoundRect(rectF, 40f, 40f, paint);
//path的用法
// Path path = new Path();
// path.moveTo(10, 10); //移动到 坐标10,10
// path.lineTo(50, 60);
// path.lineTo(200,80);
// path.lineTo(10, 10);
// paint.setTextSize(20f);
// canvas.drawTextOnPath("我喜欢android", path,10f,10f, paint);
//画出弧形
// RectF oval = new RectF(100f, 100f, 900f, 900f);
// canvas.drawRect(oval, paint);
// paint.setColor(Color.DKGRAY);
// canvas.drawArc(oval, 0, 90, true, paint);
// paint.setColor(Color.GRAY);
// canvas.drawArc(oval, 90, 90, true, paint);
// paint.setColor(Color.CYAN);
// canvas.drawArc(oval, 180, 90, true, paint);
// paint.setColor(Color.LTGRAY);
// canvas.drawArc(oval, 270, 90, true, paint);
}
}
}
二、仿搜狗圆的相连
看下运行后的效果
这是主布局,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/showsogou"
android:orientation="vertical" >
</LinearLayout>
Activity的代码是
public class SogouActivity extends Activity {
private int width; // 屏幕宽度
private int height; // 屏幕高度
private View view;
private LinearLayout layout;
@Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sogou);
layout =(LinearLayout) this.findViewById(R.id.showsogou);
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
height = display.getHeight();
view = new MySogou(SogouActivity.this);
layout.addView(view);
}
/**
* 模仿搜狗画圆
* @author c_fei
*
*/
@SuppressLint("ResourceAsColor")
class MySogou extends View{
Paint paint;
public MySogou(Context context) {
super(context);
paint = new Paint();// 设置一个笔刷大小是3的黄色的画笔
paint.setColor(Color.YELLOW);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);
}
@Override
protected void onDraw(Canvas canvas) {
//第一个圆
paint.setColor(getResources().getColor(R.color.bigCircle));
canvas.drawCircle(width/5, height/6, 100, paint);
paint.setColor(getResources().getColor(R.color.smallCircle));
canvas.drawCircle(width/5, height/6, 30, paint);
//第一个圆 下面写的字
paint.setTextSize(30f);
canvas.drawText("山水之间 许嵩", width/5-120, height/6+100+50, paint);
//第二个圆
paint.setColor(getResources().getColor(R.color.bigCircle));
canvas.drawCircle(width-300, height/6-20, 100, paint);
paint.setColor(getResources().getColor(R.color.smallCircle));
canvas.drawCircle(width-300, height/6-20, 30, paint);
//第一个圆于第二个圆 圆心相连
paint.setStrokeWidth(5);
canvas.drawLine(width/5, height/6,width-300, height/6-20, paint);
//第三个圆
paint.setColor(getResources().getColor(R.color.bigCircle));
canvas.drawCircle(width-500, height/6+250, 100, paint);
paint.setColor(getResources().getColor(R.color.smallCircle));
canvas.drawCircle(width-500, height/6+250, 30, paint);
//第二个圆于第三个圆 圆心相连
canvas.drawLine(width-300, height/6-20,width-500, height/6+250, paint);
}
}
}
这里只是简单模仿一下,真正在开发过程中,可能需求比这要复杂的多,有待我们细细研究。