코드몽키 찬스님의 모바일, 웹

왜 바꿨을까

- IntelliJ IDEA 와 더 밀접하게 맞추기 위함, IntelliJ IDEA는 Android Studio가 구축되는 IDE 임.

어떻게 바뀌었을까

기존

- Android Studio 4.3 처럼 숫자만 표기했던것에서

변경

아래 규칙이 적용됨.

동물 이름 | < IntellJ 버전 연도 >. < IntellJ 메이저 버전 >. <Studio 메이저 버전 >. < Studio 마이너 패치 버전 > 

예 )  Arctic Fox | 2020.3.1.1

- 동물이름  : 각 메이저 버전은 이름이 주어지며,  동물 이름을 기반으로 A에서 Z까지 증가한다.

ex) Arctic Fox, Bumblebee

- IntellJ Version, IntellJ 메이저 버전  : Android Studio 릴리즈의 기반이 되는 IntellJ 버전

Apple Silicon Preview 공개 : ARM64용 안드로이드 스튜디오

관련 내용 링크  ( 2021년 5월 18일자 )

https://android-developers.googleblog.com/2021/05/android-studio-arctic-fox-beta.html

다운로드 링크 ( 배포일 2020년 4월 29일 )

https://developer.android.com/studio/archive

* 2021년 5월 27일 기준 *  최신 ARM64용 지원 ( Preview ) 안드로이드 스튜디오 

> Android 스튜디오 Arctic Fox(2020.3.1) Canary 15

Activity Monitor 프로그램을 통해  안드로이드 스튜디오 아키텍쳐 확인

이 포스팅은
developer.android.com/guide/topics/ui/declaring-layout?hl=ko

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

이전글

https://ckstmsla.tistory.com/entry/사용자-인터페이스-레이아웃-일반레이아웃-어댑터

- 중첩 뷰 그룹이 없이 복잡한 레이아웃을 만들수 있다.
- 동위( or 형제 ) View들과 상위 레이아웃 사이의 관계에 따라 뷰의 레이아웃이 결정.
- RelativeLayout보다 유연하고 LayoutEditor와 함께 사용하기 쉬움
- Android Studio 3.0이상

제약조건 개요

- View의 위치를 정의하려면, View의 가로 및 세로 제약조건을 각각 하나 이상 추가 해야함
- 다른 View, 상위 레이아웃 또는 표시되지 않는 안내선을 기준으로 정렬 또는 연결
- 세로 또는 가로 축을 따라 보기의 위치를 정의하므로, 각 View에는 축마다 1개 이상의 제약조건이 있어야 함.
- 제약조건이 누락되어도 컴파일 오류 발생하지 않음, 레이아웃 에디터에 툴바 오류 표시, 자동연결 및 제약조건 추론 기능 사용하여 자동 추가 가능

레이아웃 변환

안드로이드 스튜디오에서 레이아웃 편집기 창 > 맨 아래 Design탭 > Component Tree 창 > 마우스 우 클릭 > Convert layout to ConstraintLayout클릭

제약조건 추가

- 각 모서리에 정사각형 크기 조절 핸들 : 뷰의 크기 변경

- 각 면에 원형 제약 조건 핸들 :
사용 예 )
1. 팔렛트탭에서 사용 가능한 앵커 포인트로 드래그
포인트는 다른 뷰의 가장 자리, 레이아웃의 가장 자리, 안내선

2. Layout탭에서 Create a Connection 버튼을 클릭

제약 조건 만들 때, 규칙
- 모든 뷰에는 가로, 세로 하나씩 두 개 이상의 제약조건이 있어야 함.
- 같은 평면을 공유하는 제약조건 핸들과 앵커 포인트 사이에만 제약조건 만들 수 있음.
- 각 제약조건 핸들은 하나의 제약조건에만 사용, 동일한 앵커 포인트에 여러 개의 제약 조건을 만들 수 있음.

기존 제약 조건에 반대 되는 제약 조건 추가

반대되는 제약조건을 추가하면, 제약조건 선이 위 그림의 빨간색 네모칸의 스프링처럼 표시 됨.
이로써 뷰의 크기가 콘텐츠 래핑( Wrap Contents ) 혹은 고정 ( Fixed )으로 설정되어
뷰가 제약조건 사이 중앙에 배치 될때 가장 잘 나타냄

* 제약조건에 맞게 뷰 크기를 늘리려면 제약조건과 일치 ( Match Constraints )로 전환
* 현재 크기는 유지, 뷰가 중앙에 오지 않도록 하려면 제약조건 편향 ( Constraint Bias )을 조정

상위 요소 포지셔닝
- 뷰의 측면을 레이아웃( 상위 요소 )의 대응하는 가장자리로 제한

정렬
- 뷰의 가장자리를 다른 뷰의 가장자리에 맞게 정렬

기준선 정렬

- 뷰의 텍스트 기준선을 다른 뷰의 텍스트 기준선에 맞춤.

안내선으로 제한 

- 레이아웃의 가장자리를 기준으로 dp 단위 혹은 백분율을 기반으로 안내선을 배치할수있다.

- 종류 : Vertical, Horizontal 

위 도표 속성 값을 적용하여 안내선에

2개의 버튼 뷰의 제약조건 앵커 포인트를 설정한 모습

경계선으로 제한

- 안내선과 비슷하지만 표시되지 않는 선.

- 자체 위치를 정의하지 읺고, 경계선 내로 제한된 뷰 위치를 기반으로 경계선 위치가 이동

- 뷰를 특정한 하나의 뷰가 아니라 뷰 집합으로 제한하려고 할 때 유용

- 

이 포스팅은

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

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

이전글

https://ckstmsla.tistory.com/entry/사용자-인터페이스-레이아웃-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 떨어진 곳에 있다는 뜻  

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

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

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

[ 크기 ]

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

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

[ 패딩 ] 

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

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

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

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

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

[ 여백 ]

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

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