Xamarin.Android 図形（四角・円）の描画
1 はじめに
今回は、Xamarin.Androidの図形（四角・円）の描画です。
サンプルは、ViewクラスのDraw()メソッドをオーバーライドしたものになっています。Xamarin.AndroidでViewのサブクラス化がピンとこない場合は、下記をご参照ください。
Xamarin.Android テンプレート(Blank App)
なお、描画に必要な「Paintの取得」や、描画の諸元（色・太さなど）の指定は、「Xamarin.Androdi 図形（直線）の描画」で紹介したものと同じです。
2 線と塗りつぶし
PaintオブジェクトのSetStyle()で指定されるのが、Stroke（線）なのか、Fill（塗りつぶし）なのかによって、同じDrawRect()を呼び出しても動作が変わってきます。 また、Fill（塗りつぶし）では、線の分だけ小さい四角形になるので、指定した通りのサイズの描画を意図するなら、FillAndStroke（両方）にしておいた方が安全かも知れません。
サンプルでは、線幅を大きくとって、この差が分かりやすいようにしてみました。
public override void Draw(Canvas canvas) {
using (var paint = new Paint()) {
const int width = 250;
const int height = 250;
var x = 30;
var y = 30;
paint.AntiAlias = true;//アンチエイリアス有効
paint.StrokeWidth = 30;//線幅 30(違いが分かりやすいように線幅を太くする)
paint.Color = Color.Yellow;//線色の指定(黄色）
//線のみの四角
paint.SetStyle(Paint.Style.Stroke);
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);
y += height + 50; //下へずらす
//塗りつぶしの四角
paint.SetStyle(Paint.Style.Fill);
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);
y += height + 50; //下へずらす
//線と塗りつぶしの四角
paint.SetStyle(Paint.Style.FillAndStroke);
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);
}
}
3 四角
次のコードは各種の四角を描画したサンプルです。
四角は、DrawRect()で描画できます（①）。また、Pathオブジェクトを作成してDrawPath()でも同じ動作が期待できます（②）。 先に示したとおり、DrawRect()の前にSetStyle(Paint.Style.Stroke)とすると線の四角になり（①）、SetStyle(Paint.Style.FillAndStroke)とすると無理つぶしの四角になります。（③）
ボーダ付の四角を描画する場合は、塗りつぶしと線の２回の描画が必要になります（④）。
最後に、角丸の四角の場合ですが、こちらは、DrawRoundRect()を使用することになります（⑤）。
public override void Draw(Canvas canvas) {
using (var paint = new Paint()) {
const int width = 250;
const int height = 250;
//赤色の四角を描画する
var x = 40;
var y = 40;
paint.AntiAlias = true;//アンチエイリアス有効
paint.StrokeWidth = 3;//線幅 3
paint.Color = Color.Red;//線色の指定（赤色）
paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ① 四角の描画
//下記でも同じ
//var path = new Path();
//path.AddRect(new RectF(x, y, x + width, y + height), Path.Direction.Cw);
//canvas.DrawPath(path, paint);// ②
y += height + 20; //下へずらす
//薄い赤色の塗りつぶし四角を描画する
paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
paint.SetStyle(Paint.Style.FillAndStroke);//線と塗りつぶしの描画（Style.Fillにすると線の分だけ小さい四角が描画されてしまう）
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ③ 四角の描画
y += height + 20; //下へずらす
//ボーダ付き四角を描画する（線と塗りつぶしを分けて描画しなければならない）
//線
paint.StrokeWidth = 3;//線幅 3
paint.Color = Color.Red;//線色の指定（赤色）
paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ④ 四角の描画
//塗りつぶし
paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
paint.SetStyle(Paint.Style.Fill);//塗りつぶしの描画（線なし）
canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ④ 四角の描画
y += height + 20; //下へずらす
//角丸のボーダ付四角を描画する（線と塗りつぶしを分けて描画しなければならない）
const int corner = 20;//角丸のサイズ
//線
paint.StrokeWidth = 3;
paint.Color = Color.Red;//線色の指定（赤色）
paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
canvas.DrawRoundRect(new RectF(x, y, x + width, y + height), corner, corner, paint);// ⑤ 角丸四角の描画
//塗りつぶし
paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
paint.SetStyle(Paint.Style.Fill);//塗りつぶしの描画（線なし）
canvas.DrawRoundRect(new RectF(x, y, x + width, y + height), corner, corner, paint);// ⑤ 角丸四角の描画
}
}
上記のサンプルを実行すると、次のようになります。
4 円
四角と同じ要領で、円を書いてみましょう。
円の描画は、DrawOval()で行います（①）。また、DrawCircle()でも同じく円の描画が可能ですが、こちらの場合は、中心点と半径を指定することになります（②）。状況に応じて、使い分けることになるでしょう。
楕円は、矩形として長方形を与えるだけです（③）。
public override void Draw(Canvas canvas) {
using (var paint = new Paint()) {
const int width = 250;
const int height = 250;
//緑色の円を描画する
const int x = 40;
var y = 40;
paint.AntiAlias = true; //アンチエイリアス有効
paint.Color = Color.Lime; //線色の指定（緑色）
paint.StrokeWidth = 3; //線幅 3
paint.SetStyle(Paint.Style.Stroke);
canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);//①
//canvas.DrawCircle(x,y,radius,panit); //中心と半径を使用して円を描く//②
y += height + 20; //下へずらす
//薄い緑色の塗りつぶし円を描画する
paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
paint.SetStyle(Paint.Style.FillAndStroke);
canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);
y += height + 20; //下へずらす
//ボーダ付き円を描画する
//線
paint.Color = Color.Lime; //線色の指定（緑色）
paint.StrokeWidth = 3; //線幅 3
paint.SetStyle(Paint.Style.Stroke);
canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);
//塗りつぶし
paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
paint.SetStyle(Paint.Style.Fill);
canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);
y += height + 20; //下へずらす
//ボーダ付き楕円を描画する
//線
paint.Color = Color.Lime; //線色の指定（緑色）
paint.StrokeWidth = 3; //線幅 3
paint.SetStyle(Paint.Style.Stroke);
canvas.DrawOval(new RectF(x, y, x + width + 50, y + height), paint);//③
//塗りつぶし
paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
paint.SetStyle(Paint.Style.Fill);
canvas.DrawOval(new RectF(x, y, x + width + 50, y + height), paint);//③
}
}
上記のサンプルを実行すると、次のようになります。
5 まとめ
今回は、Paintを使用した四角・円の描画について紹介させて頂きました。
４回に分けて、iOS及びAndroidにおける図形の（線・矩形・円）の描画についてまとめて来ましたが、これに加えて、Windows Phoneにおけるコアグラフィックスの扱いを整理しておけば、Xamarin.FormsでBoxViewをレンダラー拡張する時に威力を発揮するでしょう。
6 参考リンク
Xamarin Developers Android.Graphics.Canvas Class
