티스토리 뷰
안드로이드 이미지뷰(ImageView)를 사용하면 화면에 이미지 파일을 출력할 수 있습니다. 안드로이드 앱에서는 TextView와 더불어 그 활용도가 높은 뷰(View)입니다.
1. Drawable 리소스에 이미지 등록하기
ImageView에 이미지 파일을 출력하기 위해서는 먼저 안드로이드 프로젝트 안에 Drawable 리소스에 이미지 리소스가 등록되어 있어야 합니다. Drawable 리소스 등록 방법은 여러 가지가 있지만, 이미지 파일을 복사(Ctl + C) 후에 app\src\main\res\drawable 경로에 복사해주는 방법이 가장 간단합니다.
▼ 파일을 복사하기를 하면 이름을 지정하라고 합니다. 이때 지정하는 이름은 확장자를 제외한 이름이 리소스 ID로 지정되며 특수문자나 대문자 사용을 피해서 적절한 Image 이름을 지정해줍니다.
2. ImageView로 이미지 보여주기
위에서 이미지 파일 리소스 추가가 끝났다면 ImageView를 통해 이미지를 출력해보겠습니다.
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/myimage" />▼ ImageView의 src 속성값을 drawavble 리소스 ID 값을 지정해줍니다.
▼ 원본 이미지는 1920x1080 으로 ImageView가 화면상에서 차지하는 영역보다 훨씬 큽니다. 다만, 원본이미지가 ImageView 크기에 맞게끔 너비와 높이가 적절한 비율로 축소되기 때문에 이미지가 깨지지 않고 화면에 출력됩니다.
3. ImageView 속성 - baseLine 속성
baseLine 속성은 화면상에서 ImageView의 정렬 기준선을 지정하는 속성입니다. 보통 TextView와 이쁘게 정렬하기 위해 사용됩니다.
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hello World" />
<ImageView
...
android:baseline="100dp"
... />
▼ LinearLayout 밑에 TextView와 ImageView를 나란히 배치하고 ImageView의 baseline 속성값을 100dp로 지정합니다. ImageView의 상단 기준으로 100dp 떨어진 위치에 정렬 기준선이 생성되고 TextView의 Text 하단이 정렬 기준선에 맞춰서 배치 되는것을 확인할 수 있습니다. 만약 Text를 ImageView 하단에 딱 맞춰서 정렬하고 싶은 경우 ImageView의 속성 중 baseLineAlignBottom 속성을 true로 지정하시면 됩니다.
4. 자바 소스에서 ImageView의 이미지 변경하기
예제 소스를 위해 변경되는 이미지 파일을 drawable 리소스에 등록합니다.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="btn_Click"
android:text="변경" />
<ImageView
android:id="@+id/imageView"
android:layout_width="253dp"
android:layout_height="124dp"
android:adjustViewBounds="true"
android:src="@drawable/myimage"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp" />
</LinearLayout>▼ 최상단에 수직 LinearLayout을 배치하고 그 밑에 Button과 ImageView를 배치합니다. Button을 클릭하였을 때 ImageView의 이미지를 변경하기 위해 onClick 속성값을 지정합니다.
public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void btn_Click(View view)
{
ImageView imageView = (ImageView)findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.hello);
}
}▼ Button이 클릭되었을 때 Layout 리소스상의 ImageView 참조 객체를 먼저 받아옵니다. 그런다음 변경하고자 하는 이미지의 리소스 ID를 사용하여 setImageResource() Method를 통해 이미지를 변경합니다.
▼ Button을 클릭하면 이미지가 변경되는 것을 확인할 수 있습니다.