리팩토링하는 블로그

개발/Android

뷰(View)와 뷰그룹(ViewGroup, Layout)

Debin 2022. 4. 4.
반응형

이번학기 모바일 프로그래밍(안드로이드) 강의를 들으면서 배운 부분을 남기고자 합니다.

View

  • View는 사용자와 상호작용하는 요소로서 안드로이드에서 화면을 구성하는 Button, TextView 등 어떤 기능을 수행하는 Component다.
  • 모든 View는 class로 제공되며, View 클래스를 상속한다.
  • Button, TextView, CheckBox, RadioButton 등과 같이 사용자와 상호작용을 하는 View 객체를 통칭해서 위젯이라고 부른다.
  • View 객체는 다양한 속성을 가질 수 있으며, 속성 값에 따라 UI가 변경된다.

View와 ViewGroup의 관계

 

ViewGroup(Layout)

  • ViewGroup은 하위에 여러 ViewGroup과 View를 포함하고 있으며 ViewGroup, View 객체들의 배치를 위한 컨테이너 역할을 맡은다.
  • ViewGroup은 View와 다른 ViewGroup 객체의 레이아웃 구조를 정의하는 컨테이너로서 다양한 유형의 레이아웃을 제공. 예를 들어 ConstraintLayout, LinearLayout, RelativeLayout, TableLayout, FrameLayout 등이 있다.
  • ViewGroup는 View를 상속한다.
  • 레이아웃도 뷰이므로 레이아웃 안에 레이아웃을 포함할 수 있다.

레이아웃과 뷰의 예시

화면(Activity)작성 절차

  • 뷰 그룹 생성(레이아웃)
  • 뷰 그룹에 필요한 뷰(위젯) 배치
  • 액티비티 화면 설정

UI 작성 방법

XML을 이용해 UI를 작성하고 코틀린 코드로 UI를 제어한다. 예시는 아래와 같다.

UI 작성법

뷰의 대표적인 속성

1. layout_width, layout_height

가장 기본적이면서 필수 속성으로 뷰의 폭과 넓이를 설정한다.

  1. match_parent, match_constraint(constraintLayout) == odp : 무조건 남아있는 여유 공간을 채운다.
  2. wrap_content : 뷰에 들어 있는 내용물의 크기에 따라 뷰의 크기가 결정된다.
  3. 크기 값 지정 : 크기를 고정된 값으로 직접 지정하고 싶을 때 사용한다.

2. id

  • 뷰의 ID를 지정한다.
  • XML 레이아웃에 정의한 뷰를 자바 소스에서 참조하는 데 사용한다.
  • XML 레이아웃 안에서 다른 뷰를 참조하는데 사용한다.

3. background

  • 뷰의 배경을 설정한다. (배경색, 배경 이미지 등)

 

아래와 같은 xml 코드를 확인하자.

1번
<Button 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“Button"
/>
2번
<Button 
android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:text=“Button“
/>
3번
<Button 
android:layout_width="wrap_content"
android:layout_height=“match_parent"
android:text=“Button"
/>
4번
<Button 
android:layout_width=“match_parent"
android:layout_height=“match_parent"
android:text=“Button"
/>

그러면 아래와 같은 뷰를 확인할 수 있다.

위 xml 기반으로 출력한 UI

뷰의 크기 지정에 사용되는 단위들은 아래와 같다. 주로 dp와 sp를 사용한다고 한다.

단위 단위 표현 설명
px 픽셀 화면 픽셀
dp or dip (density independent pixel) 밀도 독립적 픽셀 단말의 해상도에 따라 비율로 픽셀 값이 계산되므로
대부분의 단말에서 비슷한 크기로 보인다.
160dpi 화면을 기준으로 한 픽셀
예) 1인치 당 160개의 점이 있는 디스플레이 화면에서 1dp는 1px와 같다.
1인치 당 320개의 점이 있는 디스플레이 화면에서 1dp는 2px와 같다.
sp or sip  (scale independent pixel) 축적 독립적 픽셀 글꼴을 기준으로 한 텍스트 크기를 나타낸다.
dp와 유사하나 뷰의 크기에는 사용하지 않음
글꼴의 크기 지정시 주로 사용한다.
in 인치 1인치로 된 물리적 길이
mm 밀리미터 1밀리미터로 된 물리적 길이
em 텍스트 크기 글꼴과 상관없이 동일한 텍스트 크기 표시

 

뷰의 ID 속성

인플레이션

  • xml 레이아웃에 정의된 레이아웃(뷰)들은 애플리케이션이 시작될 때 메모리에 객체로 만들어지는데 이를 인플레이션이라고 한다(객체화 과정) - setContentView() 메서드
<Button 
android:id="@+id/button" 
android:layout_width=“match_parent"
android:layout_height=“match_parent"
android:text="Layout"
/>

id 속성

  • 애플리케이션이 시작될 때 메모리 상에 만들어진 객체들을 참조하기 위해 id를 지정하며, 이 id를 이용해 코드에서 객체를 찾아낸다.
  • id 속성은 소스 코드에서 R.id.[ID]와 같은 형태로 참조한다. ("@+id/id 이름")
  • ViewBinding 또는 findViewById 메소드 사용을 권고한다.
  • 모든 뷰는 선언된 View 형식으로 반환된다.
class MainActivity : AppCompatActivity() {
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    val button = (Button) 
    findViewById(R.id.button );
	}
}

 

이상으로 뷰와 레이아웃에 관한 첫 수업 포스팅을 마치겠습니다.

반응형

댓글

티스토리툴바