사용자 인터페이스 - 레이아웃[ View & ViewGroup 속성, 위치, 크기, 여백 및 패딩 ]

이 포스팅은

developer.android.com/guide/topics/ui/declaring-layout?hl=ko

레이아웃  |  Android 개발자  |  Android Developers

안드로이드 디벨로퍼 공식 홈페이지 문서를 읽고 요약한 글입니다.

 

이전글

---

https://ckstmsla.tistory.com/entry/사용자-인터페이스-레이아웃-View-ViewGroup-구조-XML

사용자 인터페이스 - 레이아웃[ View, ViewGroup 구조, XML ]

 

속성

---

- 모든 View와 ViewGroup 객체는 고유한 여러 가지 XML 속성을 지원

- 어떤 속성은 특정 View 객체에만 적용 ( 예 : TextView 속성 textSize, View 객체에 의해 상속받은 것 ) 

- 어떤 속성은 루트 View 클래스에서 상속되기 때문에 ( 예  : id 속성 ) 모든 View 객체에 공통적으로 적용

- 기타 속성은 'LayoutParam [ 레이아웃 매개변수] ' 로 간주됨,
이 매개변수는 View 객체의 특정 레이아웃 방향을 설명하는 속성으로 이 객체의 상위 ViewGroup 객체가 정의

 

[ ID ]

- View 객체는 트리 내에서 뷰를 고유하게 식별할 수 있는 정수 ID가 연결

- 일반적으로 id속성에서 문자열로 할당, 컴파일 할때 정수로 참조됨.

- 모든 View 객체에 공통적인 XML 속성 ( View 클래스에서 정의 됨 ).  

android:id="@id/tv"

-앳 기호  '@' :  XML 파서가 ID문자열의 나머지를 파싱하고 확장하여 ID리소스로 식별해야 한다는 것을 나타냄.

- 더하기 기호 ' + ' : 이것이 새 리소스 이름이며 리소스에 추가해야 한다는 뜻

- 이외에 Android 프레임워크는 다른 ID 리소스도 많이 제공.

- Android 리소스 ID 를 참조할 때 아래와 같이 android 패키지 네임 스페이스를 반드시 추가

android:id="@android:id/empty"

 - android 패키지 네임스페이가 들어가면 로컬 리소스 클래스가 아닌 android.R 리소스 클래스에서 ID 참조

 

[ 뷰 생성, 앱에서 참조하는 일반적인 패턴 ]

1. 레이아웃 파일에서 뷰/위젯 정의후 고유 ID 할당

<Button android:id="@+id/my_button"
	...
 />

 

2. 뷰 객체의 인스턴스를 생성 후, 이를 레이아웃에서 캡쳐

val myButton : Button = findviewById(R.id.my_button)

-> Android Studi 3.6 이상에서 findViewByID() 호출을 " View Binding " 기능으로 대체할 수 있음.

-> 뷰와 상호작용하는 코드에 관해 컴파일 시간, 유형 안정성 제공 

 

- RelativeLayout을 생성할 때 View 객체에서 ID를 정의하는 것이 중요

RelativeLayout에서는 형제 뷰 ( 동등 계층 )가 또 다른 형제 뷰를 기준으로 자신의 레이아웃을 정의할 수 있음. 이를 고유 ID로 참조 

- ID는 트리 전체를 통틀어 고유할 필요는 없지만, 트리에서 검색하고 있는 부분 내에서는 고유해야 함.

예) RelativeLayout 내 " Button View[ id = button2 ] 는 Button View [ id = button1 ]와 Button View [ id = button2 ] 사이에 위치 

-> Button View[ id = button2 ]에 각 layout_below, layout_above 속성에 고유 id를 명시

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	...
	<Button id="@+id/button1"
    	...>
     
	<Button id="@+id/button2"
        android:layout_below="@+id/buttn1"
        android:layout_above="@+id/button3"
        .../>
     
	<Button id="@+id/button3"
    	.../>
    
    ...
/>

 

[ 레이아웃 매개변수 ] 

- XML 레이아웃 속성이 View가 상주하는 ViewGroup에 적절한 View 레이아웃 매개변수를 정의 

- 모든 ViewGroup 클래스가 중첩된 클래스를 하나씩 구현, 이것이 ViewGroup.LayoutParams를 확장, 이 서브 클래스에는 각 하위 뷰의 크기와 위치를 뷰 그룹에 적절한 방식으로 정의하는 속성 유형이 들어 있음.

- 상위 뷰 그룹이 각 하위 뷰의 레이아웃 매개 변수를 정의 ( 하위 뷰 그룹 포함 ). 

-> 최상위 ViewGroup인 LinearLayout이 하위 뷰, 뷰 그룹인 ConstraintLayout 와 View 2개의 매개 변수를 정의

각 뷰와 연결된 레이아웃 매개변수가 있는 뷰 계층 구조 시각화

각 뷰와 연결된 레이아웃 매개변수가 있는 뷰 계층 구조 시각화

- 모든 LayoutParams서브 클래스에는 설정 값에 관한 각기 자신만의 구문이 있음.

- 각 하위 요소는 자신의 상위 요소에 적합한 LayoutParams를 정의 해야함

- 모든 View Group 에는 width, height가 포함 ( layout_width, layout_height )
각 뷰는 이들을 반드시 정의해야 함 

- LayoutParams 선택사항 : 여백, 테두리 속성

- width와 height는 아래 3가지와 같은 상대적인 측정값을 사용하는 것이 좋음.

• wrap_content : 콘텐츠에 필요한 치수대로 알아서 크기 조절
• match_parent : 상위 뷰 그룹이 허용하는 한 최대한 커지도록 함
• dp : 밀도 독립형 픽셀 단위

 이러면 앱이 다양한 기기 화면 크기에 적절하게. 표시.

 

[ 레이아웃. 위치 ]

- 뷰의 도형은 직사각형

- 뷰에는 위치가 있음. left 및  top 좌표 그리고 width, height를 나타내는 형식으로 표현

- 위치와 치수의 단위는 픽셀

- 뷰의 위치 검색 : getLeft () 및 getTop() 메서드를 호출

• getLeft () : 뷰를 나타내는 직사각형의 왼쪽, X 좌표 반환
• getTop () : 뷰를 나타내는 직사각형의 상단, Y 좌표를 반환

둘다 뷰의 상위 요소에 상대적인 뷰의 위치를 반환 
예 ) getLeft() 가 20인 경우, 해당 뷰가 직접적인 상위 요소의 왼쪽 가장자리에서 오른쪽으로 20px 떨어진 곳에 있다는 뜻  

*아래 그림은 이해를 돕기 위해 작성하였으며 개념이 정확히 일치하지 않을수도 있음

getLeft ()

 

 

- 그외 getRight(), getBottom() 으로 직사각형의 오른쪽 하단 가장자리를 나타냄

-> getRight () : getLeft() + getWidth() 계산된 px 값 반환 

getRight()

 

 

[ 크기 ]

- 뷰의 크기는 너비와 높이로 표현, 하나의 뷰는 두 쌍의 너비 및 높이 값을 소유

• 첫번째 쌍 : 측정된 너비 및 측정된 높이
  > 이 치수는 뷰가 상위 요소 내에서 얼마나 커지고자 하는지 정의 
  > getMeasureWidth(), getMeseuredHeight () 
  
  
• 두번째 쌍 : 단순히 너비 및 높이 라고 일 컬음
  > 그리기 ( Draw ) 너비 및 그리 높이로 불려지기도 함
  > 이 치수는 Drawing 시점? 및 레이아웃? 후에 뷰가 화면에 표시되는 실제 크기 정의
  > 측정된 너비 및 높이와 달라도 되지만 꼭 달라야 하는 것으 ㄴ아님.
  > getWidth(), getHeight () 

[ 패딩 ] 

- 뷰의 치수를 측정하기 위해 뷰는 자신의 패딩을 감안

- 패딩은 뷰 왼쪽, 상단, 오른쪽 및 하단부분에 관해 픽셀로 표시

- 패딩은 정해진 픽셀 수를 사용하여 뷰의 콘텐츠를 오프셋하는데 쓰일 수도 있음.

예) 왼쪽 패딩 2로 설정하면, 뷰의 콘텐츠를 왼쪽 가장 자리에서 오른쪽으로 2픽셀 밀어냄.

- setPadding ( int, int, int, int ) 
- getPaddingLeft (), getPaddingTop (), getPaddingRIght (), getPaddingBottom () 

[ 여백 ]

-뷰는 패딩을 정의할 수 있지만, 여백 지원은 제공하지 않음.

- 뷰 그룹이 그와 같은 지원을 제공 
-> ViewGroup 및 ViewGroup.MarginLayoutParmas