[Android] 16. 레이아웃 : 컨스트레인트 레이아웃(Constraint Layout) 개요 및 실습(1), 액티비티(Activity)

# 레이아웃 : 컨스트레인트 레이아웃(Constraint Layout) 개요 및 실습(1), 액티비티(Activity)

 

 

# 레이아웃 : 컨스트레인트 레이아웃(Constraint Layout) 개요 및 실습(1)

: 안드로이드의 기본 레이아웃으로, 화면에 배치되는 위젯들 사이 간단한 제약조건을 설정하는 것만으로도 화면을 구성할 수 있게 한다.

-->  상대 위치를 지정하는 것과 관련이 깊으며, 주어진 위젯을 타 위젯에 상대적으로 배치한다.

 

 

 

- 레이아웃 에디터의 기본 화면

팔레트 창	레이아웃 디자인 시 필요한 뷰 제공
컴포넌트 트리 창	레이아웃의 전체 구조를 볼 수 있음
UI 편집(디자인) 창	뷰를 배치하여 레이아웃을 작성하는 화면
속성 창	속성을 설정하는 창

 

 

+ UI 편집창의 경우 Design, BluePrint, Design+BluePrint 3가지 모드가 존재한다.

좌측부터 순서대로 Design, BluePrint, Design+BluePrint 모드

 

+ 속성 창의 경우 디자인 창에 배치된 뷰를 클릭함으로써 표시가 가능하다.

 

+ 제약이 설정된 방향에는 1번과 같이 여백이 표시되며, 제약을 삭제할 때에는 뷰의 4면에 있는 2번을 클릭한다.

-->  길이에 대한 제약은 4면의 3번을 클릭하여 설정하며, 7번과 8번에서 원하는 설정을 직접 선택할 수도 있음.

 

 

+ 4번과 5번은 상, 하, 좌, 우의 제약이 있을 경우에만 나타나며, 이를 이용해 슬라이드하여 뷰의 위치를 상대적으로 결정할 수 있음

-->  6번 뷰에 ID를 지정하면 Kotlin 코드에서 참조 가능

 

 

 

 

- UI 편집창 추가 요소

핸들러 (Handler)	위젯 상, 하, 좌, 우에 위치한 4개의 원
컨스트레인트 (Constraint)	위젯과 타 위젯의 핸들러 또는 레이아웃과 연결된 선
앵커 포인트 (Anchor Point)	Constraint가 연결될 수 있는 부위

 

+ 컨스트레인트 편집기와 크기 조절 핸들러

 

 

ex) 편집창을 이용하여 버튼 추가하기

 

 

 

- 가이드라인(GuideLine)

: 컨스트레인트 레이아웃에만 사용 가능한 보조 도구로, 가로 및 세로 가이드라인을 화면 속 임의의 위치에 드래그할 때 레이아웃에 배치되는 위젯이 대해 가상의 앵커 포인트를 제공한다.

 

ex) 버튼에 가이드라인 추가하기

 

 

 

 

# 레이아웃 : 액티비티(Activity)

: 화면을 구성하는 가장 기본적인 컴포넌트로, 앱을 실행할 때 보여지는 화면을 구성할 수 있도록 해주는 Android 구성 요소 중 하나

-->  App은 1개 또는 여러 개의 액티비티로 구성된다.

좌측부터 1번째, 2번째, 3번째 Activity

 

 

 

- 액티비티 클래스 (Activity Class)

: Android의 Activity 클래스를 상속한 클래스를 의미하며, Activity나 FragmentActivity, AppCompatActivity 등 다양한 액티비티 클래스가 존재한다.

 

ex) 하위 호환성을 위해 AppCompatActivity 클래스를 사용한 사례

class MainActivity : appCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
    	super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

 

 

 

- 액티비티와 레이아웃 파일 간 전환법

: 코드 파일의 레이아웃 아이콘을 클릭하여 연관된 레이아웃 XML 파일로 전환할 수 있다.

 

 

 

 

# 레이아웃 : 컨스트레인트 레이아웃(Constraint Layout) 실습(1)

 

1. Text View 배치하기

① 자석 모양의 아이콘을 클릭하여 Autoconnect 모드를 켠다.

② 팔레트 창에서 TextView를 드래그히야 정중앙에 위치시킨다.

텍스트 뷰를 배치하면 좌측 사진처럼 코드가 자동으로 생성된다.

 

 

 

2. 속성창에서 문자열 내용 변경하기

변경 전

변경 후

 

 

 

3. 속성창에서 문자열 크기 변경하기

textAppearance 속성값을 Large로 바꾸기

-->  글자 크기가 커진 것을 확인 가능

 

 

 

4. 문자열을 리소스로 만들기

① 컴포넌트 트리 창 속 “hello” 텍스트 뷰 우측에 경고 아이콘 클릭

 

 

② Fix 버튼을 클릭  -->  문자열을 리소스화하도록 도와주는 화면이 표시됨

 

 

③ Resource name에 'hello' 입력 후 OK를 클릭함  -->  text 속성값이 @string/hello로 변경

좌측 사진에 경고 표기가 사라진 것을 확인할 수 있다.

 

 

④ 프로젝트 창에서 res/values/strings.xml 파일 클릭 -->  프로젝트에서 사용 중인 모든 문자열 리소스 확인 가능

Line 3에 추가한 리소스명 'hello' 확인