6-3 기본적인 뷰 살펴보기
1. 간단한 속성 설명
텍스트 뷰 (TextView)
text: 텍스트 뷰에 표시할 문자열을 설정합니다.textColor: 텍스트의 색상을 설정합니다.textSize: 텍스트의 크기를 설정합니다.textStyle: 텍스트의 스타일을 설정합니다 (예:bold,italic).autoLink: 자동으로 링크를 감지하고 클릭 가능하게 만듭니다 (예:web,phone).maxLines: 텍스트 뷰가 표시할 최대 줄 수를 설정합니다.ellipsize: 텍스트가 길어지면 생략 부호(...)를 표시하는 방법을 설정합니다 (예:end,start,middle).
이미지 뷰 (ImageView)
src: 이미지 뷰에 표시할 이미지 리소스를 설정합니다.maxWidth: 이미지 뷰의 최대 너비를 설정합니다.maxHeight: 이미지 뷰의 최대 높이를 설정합니다.adjustViewBounds: 이미지의 비율을 유지하면서 뷰의 경계를 조정할 수 있게 설정합니다.
버튼, 체크박스, 라디오 버튼
Button: 클릭 가능한 버튼을 생성합니다.CheckBox: 선택할 수 있는 체크 박스를 생성합니다.RadioButton: 라디오 그룹 내에서 단일 선택을 허용하는 라디오 버튼을 생성합니다.
EditText
lines: EditText의 기본 줄 수를 설정합니다.maxLines: EditText가 표시할 수 있는 최대 줄 수를 설정합니다.inputType: 사용자가 입력할 수 있는 데이터의 유형을 설정합니다 (예:text,number,phone).
2. maxWidth, maxHeight, adjustViewBounds 예제
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:src="@drawable/tupac" />
</LinearLayout>ImageView가 출력하는 이미지의 최대 크기를 지정한다.
뷰의 크기는 layout_width, layout_height으로 설정한다.
하지만 이 속성은 크기가 고정되어 있어서 뷰에 넣을 이미지 크기가 다양하다면 이미지와 뷰의 크기가 맞지 않는 상황이 발생할 수 있다.
또한, 이미지가 클 때 layout_width, layout_height의 속성값을 wrap_content로 지정하면 뷰의 크기가 지나치게 커지는 문제가 있다.
실행 결과를 보면 이미지가 화면에 출력됐지만 뷰가 너무 크게 출력되었다.
이렇게 하면 다른 뷰와 함께 화면을 구성하기가 어렵다.
이 때 maxWidth, maxHeight를 이용해 뷰를 출력할 최대 크기를 지정하면 문제를 해결할 수 있다.
maxWidth, maxHeight 속성은 adjustViewBounds 속성과 함께 사용해야 한다.
이 속성을 true로 설정하면 이미지의 가로세로 길이와 비례해 뷰의 크기를 맞춘다.
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:maxHeight="100dp"
android:adjustViewBounds="true"
android:background="#ff0000"
android:src="@drawable/tupac" />
</LinearLayout>
maxWidth, maxHeight에 설정한 값만큼 이미지가 작게 출력되었으며, 가로세로 비율도 유지된다. 그리고 뷰 자체의 크기도 maxWidth, maxHeight에 설정한 값으로 지정되어 배경색을 지정했음에도 보이지 않는다.
이처럼 maxWidth, maxHeight, adjustViewBounds를 사용하면 이미지를 원하는 크기로 출력하고, 뷰의 크기도 이미지에 맞출 수 있다.
cf. layout_width, layout_height에 숫자를 지정하면 이미지를 원하는 크기로 출력할 수 있지 않나요?
layout_width, layout_height에 숫자를 지정하면 이미지를 그 값의 범위 내에 줄여서 출력할 수 있다. 하지만 이미지 크기나 가로세로 비율이 다양하다면, 뷰의 크기가 이미지 크기보다 커질 수 있다.
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/test"
android:background="00ff00" />이미지는 100dp 범위 내에서 나오기는 하지만, 뷰 크기가 가로세로 각각 100dp를 차지하므로 이미지 크기에 정확히 맞추지는 못한다.
요약
-
이미지뷰 크기 설정:
- layout_width와 layout_height에 숫자를 지정하면, 이미지뷰의 크기를 정할 수 있다.
- 예를 들어, 100dp x 100dp로 설정하면 이미지뷰는 항상 그 크기를 유지한다.
-
이미지 표시:
- 이미지는 이 이미지뷰 안에 들어간다.
- 하지만 이미지의 원래 크기나 비율에 따라 다르게 보일 수 있다.
-
발생할 수 있는 상황:
- 이미지가 뷰보다 작으면: 이미지 주변에 빈 공간이 생긴다.
- 이미지가 뷰보다 크면: 이미지가 잘리거나 축소된다.
- 이미지 비율이 다르면: 이미지가 늘어나거나 빈 공간이 생길 수 있다.
a) 이미지가 정사각형이고 100dp x 100dp일 경우:
이미지가 이미지뷰에 딱 맞게 표시된다.
b) 이미지가 직사각형(예: 150dp x 75dp)일 경우:
이미지의 가로나 세로 중 하나가 이미지뷰에 맞춰지고, 나머지 부분은 여백으로 남는다.
예를 들어, 세로가 100dp에 맞춰지면 가로는 약 66.7dp가 되어 양옆에 여백이 생긴다.
c) 이미지가 매우 큰 경우(예: 500dp x 500dp):
이미지가 100dp x 100dp로 축소되어 표시된다.
d) 이미지가 매우 작은 경우(예: 50dp x 50dp):
이미지가 원래 크기로 표시되고, 주변에 여백이 생긴다.
- 결론:
- layout_width와 layout_height로 이미지뷰의 크기는 정확히 정할 수 있다.
- 하지만 이 방법은 이미지 자체의 크기를 정확히 조절하기는 어렵다.
