青風: 【android アプリ開発】　ImageView　作成

2011年2月11日金曜日

【android アプリ開発】　ImageView　作成　－②

■ImageView　作成

以下は、画像を表示してくれるのレイアウトImageViewのオプション中android：ScaleTypeの
説明です。これは、ImageViewのサイズに合わせてイメージのサイズを操作したり、移動させるオプションです。

xmlでは、表内のandroid：scaleType="matrix"と表現し、ソースでは、
ImageView：：setScaleType（ImageView.ScaleType.MATRIX）として実装されています。

これで、それぞれの値が適用される例を見てみましょう。

（1）MATRIX：ImageViewの枠を基準にして左上を頂点に配置されます。
イメージをフレームに合わせて再調整しません。枠より小さくても、大きくても、そのまま表現されます。

XML : android:scaleType=”matrix”
Source : setScaleType(ImageView.ScaleType.MATRIX);
ImageView : width=287, height=316
Image : width=150, height=250

上記の場合は、イメージが枠より小さいので、全て見えますが、ImageViewより大きくすると、調整されないので、カットなって見えるようになります。

ImageView : width=287, height=316
Image : width=400, height=400

（2）FIT_XY：イメージがImageView枠より小さくても大きくても画像をフレームに合わせます。
率に関係なく、枠に合わせるため、左右のサイズが合っていない画像ファイルの場合には、歪んでみえます。

（3）FIX_START：イメージのサイズを枠に合わせて比率を縮小して画像の開始点をImageView左
上に合わせて表示します。

XML : android:scaleType=”fitStart”
Source : setScaleType(ImageView.ScaleType.FIT_START);
ImageView : width=287, height=316
Image : width=450, height=350

（4）FIX_CENTER：イメージのサイズを枠に合わせて比率を縮小してImageView中央に合わせて表示します。

XML : android:scaleType=”fitCenter”
Source : setScaleType(ImageView.ScaleType.FIT_CENTER);
ImageView : width=287, height=316
Image : width=450, height=350

（5）FIX_END：イメージのサイズを枠に合わせて割合を縮小してImageViewの右下に合わせて
イメージを表示します。

XML : android:scaleType=”fitEnd”
Source : setScaleType(ImageView.ScaleType.FIT_END);
ImageView : width=287, height=316
Image : width=450, height=350

（6）CENTER：画像のサイズをそのまま表示しますが、イメージをフレームに合わせて縮小することはありません。そして、ImageView枠の中央に位置します。

XML : android:scaleType=”center”
Source : setScaleType(ImageView.ScaleType.CENTER);
ImageView : width=287, height=316
Image : width=450, height=200

（7）CENTER_CROP：6番での図は、高さがImageViewの枠組みと合わない。これのように
一方が枠組みと合わない場合は、枠に合わせてイメージを拡大して、もう片方も同様の比率に拡大します。これにより、6回の図は、高さが高められた率ほどの広さが増加して表示されることになります。
そして、図の位置は、枠の中央で表示されます。

XML : android:scaleType=”centerCrop”
Source : setScaleType(ImageView.ScaleType.CENTER_CROP);
ImageView : width=287, height=316
Image : width=450, height=200

（8）CENTER_INSIDE：7番の内容とは逆にImageViewの枠組みを溢れる方を合わせて
の比率を減らして表示します。もし、広さが枠から外れる場合は、範囲を枠に合わせて、その比率分高さを減らすことになるでしょう。CENTER_CROP、CENTER_INSIDEはImageViewの枠に合わせて画像を調整するのが一般的な特徴であります。

XML : android:scaleType=”centerInside”
Source : setScaleType(ImageView.ScaleType.CENTER_INSIDE);
ImageView : width=287, height=316
Image : width=450, height=200

全体ソース

HelloImageView2.java

package my.HelloImageView2;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class HelloImageView2 extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   ImageView iv = (ImageView)findViewById(R.id.ImageView01);

   Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.androidmarket);
   Bitmap resized = Bitmap.createScaledBitmap(image, 500, 200, true);
   iv.setImageBitmap(resized);

   // レイアウトサイズに合わせる
   iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
   iv.setPadding(3, 3, 3, 3);
   iv.setOnClickListener(new OnClickListener(){
   public void onClick(View arg0) {
   finish();
   }
   });
   }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<ImageView
android:id="@+id/ImageView01"
android:scaleType="centerInside"
android:layout_width="240px"
android:layout_height="316px"
android:background="#FF9900">
</ImageView>
</LinearLayout>

青風

Pages

2011年2月11日金曜日

【android アプリ開発】　ImageView　作成　－②

Blog Archive

Pages

2011年2月11日金曜日

【android アプリ 開発】 ImageView 作成 －②

Blog Archive

【android アプリ開発】　ImageView　作成　－②