올포스트 글보기 블독포스트보기 다음뷰 구독하기 올블로그 블로그코리아 믹시 트위터 Follow iGoogle or 구글리더로 구독하기 myYahoo에 추가 하기 알라딘창작블러그

(3) 안드로이드(Android) 의 ImageView 레이아웃 옵션과 사용예제들 - 2 


다음은 이미지를 표시해주는 레이아웃 ImageView 의 옵션중 android:ScaleType 에 대한

설명이다. 이것은 ImageView 의 크기에 맞게 이미지 크기를 조작하거나 이동시키는 옵션이다

xml 에서는 표에서 나온 android:scaleType=”matrix” 로 표현하며 소스에서는

ImageView::setScaleType(ImageView.ScaleType.MATRIX) 로 구현된다.

 

이제 각각의 값들이 적용되는 예를 살펴보도록 하자.

그림에서 빨간색은 ImageView 의 틀을 보여주기 위해 ImageView Background 값으로

준것이다. 그리고 Padding 값을 3으로 주었기 때문에 이미지가 조금 안쪽으로 당겨져 표현된다.


(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

전체소스와 XML 설정값

 

구현한 소스

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 ViewDetail extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
        setContentView(R.layout.view_detail);
        ImageView iv = (ImageView)findViewById(R.id.imageView);

        Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.test02);
		Bitmap resized = Bitmap.createScaledBitmap(image, 450, 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();
			}
		});
    }
}

view_detail.xml 설정 내용

<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/imageView"

        android:layout_width="287px"

       android:layout_height="316px"

       android:maxWidth="287px"

       android:maxHeight="316px"

       android:background="#FF9900"/>

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="fill_parent"

        android:layout_height="50px"

        android:gravity="center" >

       <Button

           android:text="New Game"

          android:id="@+id/btnNew"

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"/> 

    </LinearLayout>

</LinearLayout>

저작자 표시
Posted by 녹두장군

댓글을 달아 주세요

  1. 유석 2010/06/09 16:22  댓글주소  수정/삭제  댓글쓰기

    오타가 있어 글남깁니다
    3) FIX_START : 이미지크기를 틀에 맞게 비율을 줄이되 이미지 시작지점을 ImageView 왼쪽

    상단에 맞추어 그림을 표현한다.

    XML : android:scaleType=”fixStart”


    fix 가 아니라 fit 이네요 ^^;;
    계속 안되길래 안드로이드 레퍼런스를 뒤져보다 찾았습니다

  2. 김대원 2010/07/28 11:48  댓글주소  수정/삭제  댓글쓰기

    감사합니다 유용해요

  3. ^^ 2010/08/24 11:34  댓글주소  수정/삭제  댓글쓰기

    좋은 글 고맙습니다. 담아갈게요~^^

  4. 에코지오 2010/11/25 15:10  댓글주소  수정/삭제  댓글쓰기

    좋은 글 감사합니다. 덕분에 쉽게 이해되었습니다. 행복하세요~

  5. 들개 2010/12/10 11:26  댓글주소  수정/삭제  댓글쓰기

    상세한 설명과 그림들 잘 봤습니다. 고맙습니다.~!

  6. 리칼 2011/03/28 14:13  댓글주소  수정/삭제  댓글쓰기

    정리를 정말 잘해놓으셨네요 감사합니다..^^

  7. 아호다 2011/06/19 12:27  댓글주소  수정/삭제  댓글쓰기

    문제 해결하는데 큰 도움이 되었습니다. 정말 너무 감사합니다!!

    • 녹두장군 2011/06/21 19:58  댓글주소  수정/삭제

      다시 프로젝트 투입되서 아티클을 잘 올리지 못해 죄송하네요
      더 좋은 정보로 다가갈수 있도록 더 노력하겠습니다 ..

      감사합니다

  8. 고목나무 2011/08/18 02:27  댓글주소  수정/삭제  댓글쓰기

    감사합니다.

    머가 문제인지 한참 찼다가 여기 와서 해결했어요 감사해요!

  9. 정문현 2011/08/18 11:41  댓글주소  수정/삭제  댓글쓰기

    와~ 정말 정리 깔끔하고 쉽게 설명해 놓으셨네요^^

    감사합니다!

  10. chrees 2011/10/13 15:58  댓글주소  수정/삭제  댓글쓰기

    감사합니다.. ^^

  11. 연금술사 2012/05/31 20:30  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다...^^*

  12. 상처의숲 2012/11/29 10:55  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.

    • 녹두장군 2012/12/07 08:30  댓글주소  수정/삭제

      좀더 도움이 될수 있도록 노력하겠습니다
      그럼 좋은 하루 되세요 ..감기 조심하시구요

  13. 아크 2013/07/29 17:51  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사하고 퍼갈께요~



티스토리 툴바