Android 레이아웃 공식문서 정리

안드로이드 UI 개발을 하면 ConstraintLayout, LinearLayout , 레이아웃을 짜보자~~하고 말을 하곤 한다.

그러던 중 레이아웃이 무엇인지 묻는다면 뭐라고 대답할까? 하는 질문이 머릿속에 떠올랐고 레이아웃을 항상 접하고 있지만 개념을 말로써 설명하기에는 개념이 제대로 정립되지 않은 상태라고 느꼈다.

 

그 래 서 오늘은 안드로이드 공식문서 뷰 파트를 이해하고 정리해보려고 한다!!!

 

레이아웃이란?

그래서 레이아웃이 뭐야?

레이아웃은 액티비티에서와 같이 앱 내 사용자 인터페이스의 구조를 정의한다.레이아웃의 모든 요소는 View 및 ViewGroup 객체의 계층 구조를 사용하는데 이 때 뷰와 뷰 그룹의 차이가 무엇일까??

 

❓ 뷰와 뷰 그룹의 차이는 무엇일까?

🐤 View 객체는 위젯이라고 하며 Button 또는 TextView와 같은 서브 클래스 중 하나일 수 있다.

ViewGroup 객체는 레이아웃이라고 하며 ConstraintLayout이나 LinearLayout 와 같이 다양한 레이아웃 구조를 제공하는 여러 유형 중 하나일 수 있다.

 

레이아웃을 선언하는 방법

1️⃣UI 요소를 XML로 선언한다. 

   xml로 UI를 선언하면 동작을 제어하는 코드와 앱을 표현하는 UI 코드를 분리할 수 있다. 또한 XML파일을 사용하면 다양한 화면 크기와 방향에 다양한 레이아웃을 더 쉽게 제공할 수 있다.

2️⃣런타임에 레이아웃 요소를 인스턴스화 한다. 

    이 방식은 View와 ViewGroup 객체를 만들고 프로그래매틱 방식으로 속성을 조작하는 방법이다.

 

❓ 런타임과 컴파일의 의미는 무엇일까?

런타임 떄 인스턴스화 한다. 레이아웃을 XML로 선언한 후 컴파일되도록 ... 에서 나오는 런타임과 컴파일이 정확히 어떤 과정을 의미하는 것일까?

🐤

먼저 컴파일은 소스코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정을 말한다. 컴파일러는 소스 코드의 문법적 오류를 검사하고 문제가 없다면 바이너리 코드로 변환하게 된다!. 이 과정은 실행하기 전에 진행되는 과정으로 안드로이드에서는 .kt파일을 .class파일(바이트코드)로 변환되는 것을 의미한다.

 

런타임은 어플리케이션을 실제로 실행하는 동안의 시간을 의미한다. 즉 프로그램이 동작하는 동안에 발생하는 모든 것들을 말한다. 그래서 런타임 때 인스턴스화한다는 것은 프로그램 실행 중에 특정 객체를 생성한다는 의미가 된다!! 

 

사용자의 인터페이스를 구현해준 XML 레이아웃 파일들은 컴파일 시간에 View 리소스 안에 컴파일된다. 액티비티의 onCreate 콜백 구현에서 레이아웃 리소스를 로드한다. 그리고 우리가 자주 봤을 형태인 아래의 형태처럼 xml 레이아웃을 setContentView를 통해 전달하면 된다. 

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

 

속성

모든 View와 ViewGroup 객체는 고유한 다양한 xml 속성을 지원한다. 예를 들어 TextView 속성은 textSize라는 속성을 지원한다. 이 속성은 TextView에만 적용되는 것이 아니라 TextView 클래스를 확장하는 모든 View 객체에서도 상속된다. 

id 속성은 루트 View 클래스에서 상속되기 때문에 모든 View 객체에 공통적으로 적용된다.

레이아웃 매개변수로 여겨지는 속성도 있다. 이 속성은 View 객체의 상위 ViewGroup 객체에서 정의한대로  레이아웃 orientation,  특정 레이아웃 방향을 설명해주는 속성이다.

 

ID 속성

모든 view 객체에는 트리 내에서 View를 고유하게 식별하기 위해 연결된 정수인 ID가 있을 수 있다. 이 ID는 앱이 컴파일될 때 (즉 kt -> 바이트 코드로 변환 과정) 정수로 참조되지만 일반적으로 레이아웃 xml 파일에서 id 속성의 문자열로 할당된다. 

 

ID는 트리 전체에서는 고유하지 않아도 되지만 검색하는 트리의 부분 내에서는 고유해야한다. 가능하면 고유하게 만드는 것이 가장 좋다!

 

레이아웃 매개변수

이는 layout_somthing 형태를 가지는 레이아웃 속성이다.

이 속성은 속성이 있는 ViewGroup에 적절한 View의 레이아웃 매개변수를 정의한다. 

모든 ViewGroup 클래스가 ViewGroup.LayoutParams를 확장하는 중첩 클래스를 구현한다. 이 서브 클래스에는 각 하위 뷰의 크기와 위치를 뷰 그룹에 적절하게 정의하는 속성 유형들이 포함된다. 

 

모든 뷰 그룹에는 layout_width와 layout_height를 사용하여 너비와 높이를 정의해준다. 

너비와 높이는 정확한 치수로 자주 지정하지 않는 것이 좋다! 

 

- wrap_content : 콘텐츠에 필요한 크기로 자체 크기를 조절하도록 뷰에 지시한다.

- match_parent : 상위 뷰 그룹이 허용하는 한 최대한으로 커지도록 뷰에 지시한다.

 

레이아웃의 너비와 높이는 픽셀과 같은 절대적인 단위를 사용해서 지정하지 않는 것이 좋다!

그보다는 밀도 픽셀 단위인 dp, 그리고 위에서 알아본 wrap_content, match_parent와 같은 상대적인 측정값을 사용하는 것이 좋다.

 

일반 레이아웃

하나 이상의 레이아웃을 다른 레이아웃 내에 중첩할 수 있지만 레이아웃 계층 구조를 가능한 얕게 유지하는 게 좋다!

중첩된 레이아웃이 적을수록 더 빠르게 그려진다. 넓은 뷰 계층구조가 깊은 뷰 계층구조보다 낫다!

 

    지금 구현하고있는 메인화면 ui 구조 구현 시 잘 기억하고 구현해봐야겠다 

 

+ 찾아보니 그래서 ConstarintLayout을 사용하는 것이었다. 
ConstriantLayout을 사용하면 중첩된 뷰 그룹이 없는 플랫 뷰 계층 구조로 크고 복잡한 레이아웃을 만들 수 있다

 

LinearLayout은 모든 하위 요소를 가로 또는 세로로 한 방향으로 정렬하는 뷰 그룹이다. 

그렇지만 더 좋은 성능을 위해서는 ConstraintLayout으로 빌드를 권장한다! 

 

+ LinearLayout으로 구현한 경우 Component Tree에서 Convert LinearLayout to ConstraintLayout을 통해 변경할 수 있는 기능이 있다.

동적 목록 작성

레이아웃 콘텐츠가 동적이거나 미리 결정되지 않은 경우 RecyclerView 또는 AdapterView의 서브클래스를 사용할 수 있다. 일반적으로는 RecyclerView가 AdapterView보다 메모리를 더 효율적으로 사용한다.

 

사용할 수 있는 레이아웃은 1) 스크롤 형태의 단일 열 목록과 2) 열과 행의 스크롤 그리드이다.