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

이 포스팅은
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

이 포스팅은

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

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

레이아웃

- 앱에서 사용자 인터페이스 위한 구조 

- 모든 요소는 View와 ViewGroup 객체의 계층 구조를 사용하여 빌드

- View는 일반적으로 사용자가 보고 상호작용할 수있는 것을 그림.

-ViewGroup은 View및 기타 ViewGroup 객체의 레이아웃 구조를 정의하는 보이지 않는 컨테이너

View 객체

- 일반적으로 위젯 이라고 함

- Button, TextView와 같은 여러 시브클래스 중 하나

ViewGroup 객체

- 일반적으로 레이아웃 이라고 함

- LinearLayout 또는 ConstraintLayout과 같은 다양한 레이아웃 구조를 제공하는 여러 유형 중 하나 

레이아웃을 선언하는 방법

UI 요소를 XML로 선언

- Android는 위젯, 레이아웃과 같이 View클래스와 서브 클래스에 상응하는 간단한 XML어휘를 제공.

- Android Studio의 Layout Editor를 사용하여 드래그 앤 드롭 인터페이스로 XML 레이아웃을 빌드 할 수 있음.

- 동작을 제어하는 코드로부터 앱 표현을 분리 

- 다양한 화면 크기와 방향에 여러가지 레이아웃을 쉽게 제공.

런타임에 레이아웃 요소 인스턴스 화

- 앱은 프로그래매틱 방식으로 View 및 ViewGroup 객체를 만들고 그 속성을 조작할 수 있음.

Android 프레임워크는 두가지 방법을 조합하여 사용가능

> 앱의 기본 레이아웃을 XML에서 선언.

> 런타임에 레이아웃을 수정.

XML 쓰기

- 각 레이아웃 파일에는 반드시 딱 하나의 루트 요소만 있어야 하며, View 또는 ViewGroup 객체여야 함.

- 루트 요소를 정의한 후, 더 많은 레이아웃 객체 또는 위젯을 하위 요소로 추가하여 계층적으로 레이아웃을 정의하는 뷰 계층 구조를 빌드

Example ) Vertical 방향 LinearLayout을 사용, TextView, Button을 보유하는 XML

- res/layout디렉터리에 .xml확장자로 저장

XML 리소스 로드

- 각 XML레이아웃 파일이 View리소스 안에 컴파일 됨

- Activity.onCreate() 콜백 구현에서 앱코드로부터 레이아웃 리소스를 로드해야 함.

> setContentView() 호출, R.layout.layout_file_name의 형태로 레이아웃 리소스 참조로 전달.

이 글은 android.View 클래스 학습을 위해

아래 레파지토리 Google Samples / mlKit을 활용하였습니다.

mlkit/android/material-showcase at master · googlesamples/mlkit · GitHub

material-showcase

출처: https://ckstmsla.tistory.com/entry/Android-View-GraphicOverlay-01-클래스-다이어그램 [찬스님의 안드로이드, 웹 기록장]

목표 :

ML Kit 프로젝트의 GraphicOverlay ( 이하 관련 클래스 포함 ) 를 분석하여

사용자 정의 뷰를 그리는 방법과 구현 흐름을 익힌다.

java.lang.Object
	android.view.View

무엇을 준비해야 할까? 

처음에 android.view.View 클래스를 구현하는 클래스를 정의한다.

이 View 클래스는 Button이나 EditText와 같은 위젯의 뷰 클래스 최상위이다.

( 물론 Object 클래스가 더 상위에 위치 하지만 뷰 관련 클래스 한정 )

View 클래스의

여러 카테고리 요소 중 " Drawing " 에 해당하는 onDraw( android.graphics.Canvas ) 메서드를 오버라이딩한다.

뷰 카테고리

어디에 그려지는걸까 ?

onDraw( Cavans ) 메서드는 뷰의 위치와 크기가 정의된 뒤, 뷰가 콘텐츠를 렌더링 할 때 호출된다.

즉, 그려져야 할 때 호출된다. 

이 때, " 그려지는 곳 "을 알려준다.

그게 바로 Canvas 인스턴스이다.

무엇을 그릴지 ?

Canvas 인스턴스에 무엇을 그릴지 알려주면 된다.

Canvas를 통해 그릴 수 요소는 아래

Text, Verticle, RoundRect, Rect, Picture, Circle, Bitmap 등 다양하다.

여기서 android.graphics.Paint 클래스를 이용하여

위 요소들을 어떻게 그릴지에 대한 정보 ( 속성 )  Color, Style, Anti Aliasing, Alpha 등 을

설정할 수도 있다.

Paint 클래스 알아보기