使用Canvas和Framelayout android绘制圆

Question

I am trying to create an app that displays a circle everytime I click a button. I have the layout looking great but when i click the button(circle) to display a circle on the screen nothing happens. I'm not confident that my draw circle class is being called correctly in my main activity. Here is my code below.

 package com.example.randomcircles;

 import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.os.Bundle;
 import android.view.View;
 import android.widget.Button;
 import android.widget.FrameLayout;

public class DisplayRandomCircles extends Activity
{
  DrawCircle c;
  Canvas d;
  @Override
public void onCreate(Bundle b)
{
    super.onCreate(b);
    setContentView(R.layout.activity_display_random_circles);
    Button btn1 = (Button) findViewById(R.id.btn1);
    Button btn2 = (Button) findViewById(R.id.btn2);
    c = new DrawCircle(getApplicationContext());
    d = new Canvas();
    FrameLayout f1 = (FrameLayout) findViewById(R.id.frame);

}
@SuppressLint("WrongCall")
public void doit(View v)
{
    switch (v.getId())
    {
        case (R.id.btn1):
            c.onDraw(d);
            break;

        case (R.id.btn2):
            break;
    }
}
}

Here is my DrawCircle class

package com.example.randomcircles;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawCircle extends View
{
public DrawCircle(Context con)
{
    super(con);
}
@Override
protected void onDraw(Canvas c)
{
    super.onDraw(c);
    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
    p.setAntiAlias(true);
    p.setStyle(Paint.Style.STROKE);
    p.setStrokeWidth(100);
    p.setColor(Color.RED);
    p.setStyle(Paint.Style.FILL);
    c.drawCircle(75, 75, 100, p);
}
}

And my layout xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight=".75"
    android:orientation="vertical" >


</FrameLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight=".25"
    android:gravity="bottom|center"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start|bottom"
        android:layout_weight=".50"
        android:onClick="doit"
        android:text="@string/Circle" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".50"
        android:layout_gravity="end|bottom"
        android:onClick="doit"
        android:text="@string/Clear" />
</LinearLayout>

</LinearLayout>

Answer 1

Ok, here are some changes I'd make for this. I'm not exactly sure what you're trying to do, but this should make things easier.

First, change your class "DrawCircle" like this:

 public class DrawCircle extends View
{
  final Paint circlePaint;

  {
      circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
      circlePaint.setAntiAlias(true);
      circlePaint.setStyle(Paint.Style.STROKE);
      circlePaint.setStrokeWidth(100);
      circlePaint.setColor(Color.RED);
      circlePaint.setStyle(Paint.Style.FILL);
  }

  public DrawCircle(Context con)
  {
     super(con);
  }

  public DrawCircle(Context con, AttributeSet set) 
  {
     super(con, set);
  }

  public DrawCircle(Context con, AttributeSet set, int style)
  {
     super(con, set, style);
  }

  @Override
  protected void onDraw(Canvas c)
  {
    super.onDraw(c);
    c.drawCircle(75, 75, 100, circlePaint);
  }
}

This will allow you to reuse the same Paint object with each draw because the onDraw() method can be called hundreds of times and there's no need to slow down your program for this.

Second, adding the other constructors allows you to add the View to your FrameLayouts by xml.

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

  <com.example.randomCircles.DrawCircle
     android:id="@+id/circleFrame"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

</FrameLayout>

Next, to fill your screen, you need to loop in your onDraw method. Think about drawing on the canvas as a stamp. Every time you draw, you stamp your image at the location you specify on top of the previous draw.

So

protected void onDraw(Canvas c) 
{
  super.onDraw(c);
  for(int i = 0; i < 10; i++)
  {
     c.drawCircle(i*100, 75, 100, circlePaint);
  }
} 

This should draw 10 circles of radius 100 pixels across the top of your screen.