サンプルプログラム工場

AAKAKA Appで使われているプログラムのサンプルコードをそのまま公開!

サンプルプログラム工場 > android > 端末ごとの画面サイズに合わせた画像の調整するサンプル#trySurfaceView00
Google Play AAKAKAxSOFTへ

端末ごとの画面サイズに合わせた画像の調整するサンプル#trySurfaceView00

実行ファイル(APK)やサンプル(zip)をダウンロードする
trySurfaceView00の実行イメージ

カスタマイズしたSurfaceViewをxmlレイアウトの中に埋め込む。
SurfaceViewいっぱいに画像を表示する、だけど縦横の拡大率を一緒にして画像の中心をキャンバスの中心に合う様に調整して表示する。
はみ出た部分は切り捨てる代わりに変なゆがんだ画像が画面に表示されない様にする。

大事なところ
 main.xmlに追加したSurfaceViewをカスタマイズしたSurfaceViewに置き換える
  例えばtrial.sample.trysurfaceview00.SurfaceViewExtの様に。
 カスタマイズしたSurfaceViewのコンストラクタは3種類とも用意する。
 画像のファイル名に大文字は使えない trySurfaceView00GB.pngとかはだめ
  try_surface_view_00_bg.pngとかにする(小文字の0-9とa-zに_.だけ使える)

検索した事
 android SurfaceView 画像を表示する
 android 親のレイアウト サイズ
 android SurfaceView Bitblt

開発環境
 Eclipse IDE バージョン: 3.7 Indigo Service Release 2
 ターゲットプラットフォーム: 2.1
 API レベル: 7

package trial.sample.trysurfaceview00;

import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.widget.LinearLayout;

public class TrySurfaceView00Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.main);
    }
}

// ////////////////////////////////////////////////////////////
// サーフェイスビューの拡張
class SurfaceViewExt extends SurfaceView implements SurfaceHolder.Callback {

	private SurfaceHolder mSurfaceHolder;	// サーフェイスホルダー
	
	// 画像を表示するためのモノ
	final Resources mRes = this.getContext().getResources();
	Bitmap mBitmapBG = BitmapFactory.decodeResource(this.mRes, R.drawable.try_surface_view00_bg);
	
	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context) {
		super(context);

		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}
	
	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}

	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context, AttributeSet attrs) {
		super(context, attrs);
		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスホルダの準備
	private void initSurfaceHolder() {
		// サーフェイスホルダーを取り出す
		this.mSurfaceHolder = this.getHolder();
		// コールバック関数を登録する
		this.mSurfaceHolder.addCallback(this);
	}

	// ////////////////////////////////////////////////////////////
	// Bitmapの拡大率を出す
	private float calcBitmapScale(int canvasWidth, int canvasHeight, int bmpWidth, int bmpHeight) {

		// 最初は幅で調べる
		float scale = (float)canvasWidth / (float)bmpWidth;
		float tmp = bmpHeight * scale;

		// 画像の高さがキャンバスの高さより小さい(余白ができてしまう場合)高さの方で横幅をスケールする
		if (tmp < canvasHeight) {
			scale = (float)canvasHeight / (float)bmpHeight;
			return scale;
		}
		
		return scale;
	}
	
	// ////////////////////////////////////////////////////////////
	// 描画処理
	private void draw() {
		// キャンバスに何か描く
		Canvas canvas = this.mSurfaceHolder.lockCanvas();
		canvas.drawColor(Color.rgb(30, 120, 222));
		
		// キャンバスのサイズ
		int canvasWidth = canvas.getWidth();
		int canvasHeight = canvas.getHeight();

		// ビットマップのサイズ
		int bmpWidth = this.mBitmapBG.getWidth();
		int bmpHeight = this.mBitmapBG.getHeight();

		// 画面サイズに合う様に縦横スケール値を求める(最大限画面に収まる様に努力する)
		float toCanvasScale = this.calcBitmapScale(canvasWidth, canvasHeight, bmpWidth, bmpHeight);

		// キャンバスの大きさに画像を合わせたときにサイズのずれがどれくらいあるか
		float diffX = (bmpWidth * toCanvasScale - canvasWidth);
		float diffY = (bmpHeight * toCanvasScale - canvasHeight);
		
		// すみを残して中心から取り出す様にする
		float addX = (diffX / toCanvasScale) / 2;
		float addY = (diffY / toCanvasScale) / 2;
		
		// Bitmapを表示する
		Paint paint = new Paint();
		// 画像の切り取り位置を調整して画像の中心がキャンバスの中心に来る様にする
		Rect rSrc = new Rect((int)addX, (int)addY,
				(int)((canvasWidth / toCanvasScale) + addX), (int)((canvasHeight / toCanvasScale) + addY));
		RectF rDest = new RectF(0, 0, canvasWidth, canvasHeight);
		canvas.drawBitmap(this.mBitmapBG, rSrc, rDest, paint);
		this.mSurfaceHolder.unlockCanvasAndPost(canvas);
	}
	
	// ////////////////////////////////////////////////////////////
	// サーフェイスサイズの変更があったときとかに呼ばれる
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height) {
		this.draw();
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスが作られたときに呼ばれる
	public void surfaceCreated(SurfaceHolder holder) {
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスが破棄された時に呼ばれる
	public void surfaceDestroyed(SurfaceHolder holder) {
		// TODO 自動生成されたメソッド・スタブ
		
	}

	public void run() {
	}
	
}
APKファイルをダウンロード サンプルプロジェクトをダウンロード

, , ,

Androidのエミュレーターでlocalhostに接続したい! Spinnerの文字サイズを大きくするサンプル#trySpinner00

2 Responses to “端末ごとの画面サイズに合わせた画像の調整するサンプル#trySurfaceView00”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>