Androidプログラミング日記 (仮) 　

図形表示プログラム

あなたは

人目のプログラマーだよ。

Androidプログラミング日記 (仮).

 

 

 

 

図形表示

今回は図形表示です。テキスト表示の次は図形表示が基本らしいので図形表示プログラミングです。作りたいアプリケーションが明確にあってもわたしの場合勉強中のプログラミングをある程度慣れないと作れる気がしないので、こういう基本なプログラムがあるとありがたいです。

図形

丸や三角や四角、線などのことです。プログラムでの図形というと基本的に２種類あります。図形が塗りつぶされているか塗りつぶされていないかですね。

基本的なことですが

プログラムで基本必要なパーツがあります。それは

「座標」

これは絶対必要ですね。テキストと今回の図形はそれを指定してあげる必要があります。私はどの言語でもこの図形表示と変数、そして画面出力の勉強がおわると作ってみるプログラムがあります。それは「バウンディングボックス」と呼ばれるプログラムです。主に四角い図形が直線的に動き、画面の端までいくと跳ね返って逆向きに動き出し・・がループするプログラムです。私の中ではこのプログラムが出来ればそのプログラム言語の初心者段階卒業ということにしています。なので今回はちょっと楽しみなのです。

まずはサイト様の方を見ると、前回のやつを使用して書き換えるだけというやさしさみなぎる感じだったのでそうしてみます。

 

ファイル名「Text1Activity.java」

package and.roid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class Text1Activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout l = new LinearLayout(this);
l.setOrientation(LinearLayout.VERTICAL);
setContentView(l);←似てるけどちょっと違う（元　setContentView(R.layout.main);）
l.addView(new Screen(this));
}
}

 
 

ファイル名「Screen.java」

package and.roid;

import android.content.Context;
import android.view.View;
import android.graphics.*;

public class Screen extends View {

public Screen(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas c) {
super.onDraw(c);
Paint p = new Paint();
c.drawColor(Color.GRAY);
p.setARGB(255,100,100,255);
p.setTextSize(64);
p.setAntiAlias(true);
c.drawText("Androidn",50,300,p);
}

}

}

c.drawColor(Color.GRAY); 背景に灰色を表示

p.setARGB(255,100,100,255); 色を不透明な水色に設定

p.setTextSize(64); 文字の大きさを32に設定

p.setAntiAlias(true); 文字の輪郭をきれいに設定

c.drawText("Androidn",50,300,p); 座標(32,32)に、設定pで、hello world と表示

これの「Screen.java」の方だけ書き換えます

 

ファイル名「Text1Activity.java」

package and.roid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class Text1Activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout l = new LinearLayout(this);
l.setOrientation(LinearLayout.VERTICAL);
setContentView(l);←似てるけどちょっと違う（元　setContentView(R.layout.main);）
l.addView(new Screen(this));
}
}

 
 

ファイル名「Screen.java」

package and.roid;

import android.content.Context;
import android.view.View;
import android.graphics.*;

public class Screen extends View {

public Screen(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas c) {
super.onDraw(c);
Paint p = new Paint();

c.drawColor(Color.BLUE);


p.setARGB(255,100,100,255);
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(5);
c.drawCircle(80,160,60,p);

p.setARGB(255,100,100,255);
p.setStyle(Paint.Style.FILL);
c.drawCircle(240,160,60,p);

p.setARGB(255,100,100,255);
p.setStyle(Paint.Style.FILL);
c.drawRect(20,180,140,300,p);

p.setARGB(255,100,100,255);
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(5);
c.drawRect(180,180,300,300,p);
}

}

}

前回のテキスト成分のコードを消して図形コードに変えた感じですね。

４つのかたまりができてます。４つの図形ということです。

  • 図形の色設定
  • 図形のスタイル設定（STROKE＝線　FILL＝塗りつぶし）
  • STROKEの場合setStrokeWidth(数字);で線の幅設定
  • drawCircle(x,y,r,p)は円の図形設定。座標（x、y）と半径r。
  • drawRect(x1,y1,x2,y2,p);は四角の図形設定。四角の左上の座標（x１、y１）と四角の右下の座標（x２、y２）。

 

図形合体しちゃってますができました。

本当はc.drawColor(Color.BLUE);で画面を青くしているのですがわたしのエミュレーターは青くなりませんでした・・・でも動きましたし実機でもないので全然きにしていません。練習みたいなものですしね。

 

書籍の方は新しいプロジェクトを作って下さいってかいてあったのですが、サイト様の方で出来たものが出来ないはずはないと、前回の書籍テキストと見比べるとやっぱりできました。一から書き直すとかめんどくさいし・・

 

ファイル名「Text2Activity.java」

package and.roid;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

public class Text2Activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(new StringView(this));　
}
}

 
 

ファイル名「StringView.java」

package and.roid;

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

public class StringView extends View {

public StringView(Context context) {
super(context);
setBackgroundColor(Color.WHITE);
}

protected void onDraw(Canvas canvas) {
//描画オブジェクトの生成
Paint paint=new Paint();
paint.setAntiAlias(true);

//文字サイズと文字色の指定
paint.setTextSize(12);
paint.setColor(Color.argb(255, 0, 0, 0));

//画面サイズの取得
canvas.drawText("画面サイズ："+getWidth()+"x"+getHeight(),0, 30, paint);

//文字幅の取得
canvas.drawText("文字幅："+(int)paint.measureText("A"), 0, 30*2, paint);

//アセントとディセントの取得
canvas.drawText("アセント："+(int)paint.ascent(), 0, 30*3, paint);
canvas.drawText("ディセント："+(int)paint.descent(), 0, 30*4, paint);

//１２ドットの文字表示
paint.setTextSize(12);
paint.setColor(Color.argb(255, 255, 0, 0));
canvas.drawText("12dot", 0, 30*5, paint);

//１６ドットの文字表示
paint.setTextSize(16);
paint.setColor(Color.argb(255, 0, 255, 0));
canvas.drawText("16dot", 0, 30*6, paint);

//２４ドットの文字表示
paint.setTextSize(24);
paint.setColor(Color.argb(255, 0, 0, 255));
canvas.drawText("24dot", 0, 30*7, paint);
}

}

画面サイズの取得とかもしれっとやってますが混乱したらだめです。

getWidth()で画面幅getHeight()で画面高さです。

アセント、ディセントとは「g」のようにベースラインより下にはみ出る文字があります。

ベースラインより上の高さをアセント、下の高さをディセントとして値を取得できます。ということらしいです。

ドットとかわかんなぁいウフとか思ってる方は大きさと思ってくださいねぐへ。

これを

 

ファイル名「Text2Activity.java」

package and.roid;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

public class Text2Activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(new StringView(this));　
}
}
}

}

 
 

ファイル名「StringView.java」

package and.roid;

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

public class StringView extends View {

public StringView(Context context) {
super(context);
setBackgroundColor(Color.WHITE);
}

protected void onDraw(Canvas canvas) {
//描画オブジェクトの生成
Paint paint=new Paint();
paint.setAntiAlias(true);

//ラインの描画
paint.setStrokeWidth(1);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 255, 0, 0));
canvas.drawLine(25, 5, 25, 5+40, paint);

//パスの描画
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 255, 0, 0));
Path path=new Path();
path.moveTo(55+0, 5+0);
path.lineTo(55+30, 5+5);
path.lineTo(55+10, 5+20);
path.lineTo(55+40, 5+25);
path.lineTo(55+0, 5+40);
canvas.drawPath(path,paint);

//四角形の描画
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 0, 0, 255));
canvas.drawRect(new Rect(5+0,50+0,5+40,50+40), paint);

//四角形塗りつぶしの描画
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.argb(255, 0, 0, 255));
canvas.drawRect(new Rect(55+0,50+0,55+40,50+40), paint);

//角丸短形の描画
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 0, 255, 0));
canvas.drawRoundRect(new RectF(5+0,100+0,5+40,100+40), 10, 10, paint);

//角丸短形の塗りつぶし
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.argb(255, 0, 255, 0));
canvas.drawRoundRect(new RectF(55+0,100+0,55+40,100+40), 10, 10, paint);

//円の描画
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 255, 255, 0));
canvas.drawCircle(25, 170, 20, paint);

//円の塗りつぶし
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.argb(255, 255, 255, 0));
canvas.drawCircle(75, 170, 20, paint);

}

}

赤文字が付け加えたものです。サイト様のものに線の描画とパスの描画そして角が丸い四角を加えたものです。

ここでわかるのは、色とスタイルを決めて描画するという流れは変わらないということですね。

set-で何かをセット（色やスタイル、線幅など）して一番最後にcanvas-で描画ですね。

前回できなかった背景も塗り替えができました。

 

こんな感じで出来ました。みなさんはできましたか？

なんか段々楽しくなってきましたが、興奮と躍動を抑えてどんどん覚えて行きたいですね。

では図形パートはこれで終わります。

 

Androidプログラミング日記 (仮) | サイトマップ | 個人情報保護方針 | 応援メールﾃﾍﾍﾟﾛ | ©2012 Japan 　相互リンク大募集中です