06. [뷰를 이용한 화면 구성]

728x90

[06. 뷰를 이용한 화면 구성]

[06-1. 화면 구성 방법]

[액티비티 – 뷰 구조]

-안드로이드 앱 = 컴포넌트들의 조합

-액티비티 : 유일하게 화면을 출력하는 컴포넌트. (단, 그 자체가 화면 X)

: 화면 구성 필요. (-> 뷰(View) 클래스 이용)

- 액티비티가 실행-> 화면 구성한 뷰 클래스들 이용-> 기기 화면에 출력하는 구조

[액티비티에 화면 구성 방법 2가지 ]

① 액티비티 코드로 작성하는 방법

-액티비티 클래스 안에서 직접 레이아웃 짜고 (필요한 뷰 객체) 화면 구성 코드를 직접 작성

-> 그 레이아웃 배치를 setContentView() 로 화면에 출력

② 레이아웃 XML 파일로 작성하는 방법 (사용 多)

-화면 구성은 XML태그로 짜고 그 XML 파일을 액티비티 클래스 코드 안에 지정

->setContentView() 로 화면 출력

[06-2. 뷰 클래스]

[뷰 클래스의 기본 구조]

-안드로이드는 다양한 뷰 클래스들 제공 (ex. TextView, ImageView, EditTest, Button ... )

-모든 뷰 클래스는 View의 하위 클래스

-즉, 화면 구성 관련 최상위 클래스 = View 클래스 (얘를 상속받은 하위 View클래스들)

<View 클래스 계층 구조> : 뷰 객체는 계층 구조를 따른다.

View	모든 뷰 클래스의 최상위 클래스 액티비티는 View의 서브 클래스만 화면 출력
ViewGroup	View의 하위 크래스지만 자체 UI 없음 컨테이너 기능. 여러 하위 뷰 묶어서 제어
TextView	특정 UI 출력 목적 클래스

-뷰 객체 계층 구조에서 가장 중요한 역할은 ‘레이아웃 클래스’ = 컨테이너역할

-레이아웃 이용 -> 뷰 객체를 계층으로 묶으면 한꺼번에 출력/정렬/제어 가능

<레이아웃 중첩>

-뷰 계층 구조를 레이아웃 객체 중첩해서 구성도 가능

<LinearLayout xmlns:android= ... // 바깥 레이아웃 객체
  android:layout_width: ...
   ...
  <Button 
    android:layout_width: ... 
    ...
  <LinearLayout  . . . // 중첩된 레이아웃 객체
    android:layout ...
    <Button 
    ...

[레이아웃 XML 뷰를 -> 액티비티 코드에서 사용하기]

-화면 구성은 Xml파일에 작성하고, 액티비티에서 setContentView() 함수로 해당 Xml파일 지정하면 화면 출력 가능

-다만, XML 파일 안에 여러 개의 뷰 객체가 포함될 수 O

<TextView
android:id=“@+id/___” //이 빈칸에 들어갈 값이 고유 id 속성값임

- id 식별자 : 속해있는 여러 뷰 객체들을 구별하여 지정해야 할 경우 각 객체 부르는 방법

<TextView
  android:id=“@+id/___” //이 빈칸에 들어갈 값이 고유 id 속성값임

-id 속성값은 식별자로서 앱 내에서 유일한 값이어야 함

-Xml에 id속성 추가 시 -> 자동으로 R.java파일에 상수 변수로 추가됨

-<xml 속성값이 @로 시작 = R.java 파일 의미>

-따라서, R.java파일의 상수 변수가 된 id값으로 뷰 객체를 액티비티에 얻어와 사용 O

: findViewById() 함수 이용

//XML 화면 출력
setContentView(R.layout.activity_main) //액티비티 화면 출력
//id 값으로 뷰 객체 획득
val textView1: TextView = findViewById(R.id.속성값)

[뷰의 크기 지정하는 방법]

-뷰 크기 설정은 수치값 X, 설정값 O (안드로이드 앱 호면 규격 다양 -> 화면 호환성 위함)

-<크기 속성값 종류 3가지>

수치값
match_parent	부모(상위) 객체 크기에 맞춤
wrap_content	내 콘텐츠 규격에 크기 맞춤

-크기 속성값에 match_parent를 줄 경우, 현재의 뷰 객체의 상위 객체 크기에 맞춘다

-크기 속성값에 wrap_content를 줄 경우, 현재의 뷰 객체 내용물 크기에 맞춘다. //문자열, 글꼴 크기 등의 규격에 맞춤

-예를 들어, 화면 XMl 구성은 레이아웃 객체로 전체 컴포넌트를 감싸고, 내부에 버튼 컴포넌트가 있을 수 있는데, 버튼 컴포넌트 크기 값에 match_parent 값을 줄 경우, 현재의 버튼 객체를 감싸고 있는 상위 객체인 레이아웃 객체 규격에 해당 컴포넌트 규격을 맞추게 됨

[뷰 간격 설정]

-margin 속성 : 뷰와 뷰 사이의 간격

-padding 속성 : 뷰 콘텐츠(내용물)과 테두리 사이 간격

[뷰 표시 여부 설정]

-visibility 속성 : 뷰가 화면 출력되어야 하는지 설정함

<이 속성의 값 종류>

visible(기본값)	뷰 화면 출력 O
invisible	뷰 화면 출력 X 자리 차지 O
gone	뷰 화면 출력 X 자리 차지 X

-visibility 속성값을 설정하는 이유 : 화면 전환 처리 이벤트 위함

+ 코틀린 뷰 속성 접근 시, set/get() 호출 필요X
-코틀린 변수는 그 자체로 프로퍼니이다. 변수에 set/get() 내장되어 있음
-따라서, 변수처럼 접근하여 내부 속성 이용해도 알아서 세터/게터 함수 호출됨

[06-3. 기본적인 뷰]

▶[텍스트 뷰] TextView – 문자열을 화면에 출력하는 뷰 클래스

android: src 속성	ImageView에 출력할 ‘이미지’ 설정
android: maxWidth 속성	출력하는 이미지 최대 너비 지정
android: maxHeight 속성	출력하는 이미지 최대 높이 지정
android: adjustViewBound 속성	출력하는 이미지 가로 세로 길이 비례하게 지정

▶[이미지 뷰] ImageView – 이미지를 화면에 출력하는 뷰

-maxWidth/maxHeight 속성과 adjustViewBound 속성을 함께 지정해야 비례하게 출력됨

-원하는 이미지를 원하는 크기로 출력하고 뷰 크기에 해당 이미지를 비례하여 규격 맞춤

▶[버튼/체크박스/라디오 버튼]

Button	사용자 이벤트 처리
CheckBox	다중 선택
RadioButton	단일 선택->따라서 RadioGroup함께 사용

▶[에디트 텍스트] EditText – 사용자가 입력 가능한 텍스트 뷰

-EditText 기본적으로 한 줄 입력 크기로 출력되다가 사용자 엔터키 누를 경우 여러 줄 입력 크기로 늘어남

android: lines 속성	처음부터 여러 줄 입력 크기로 나오게 하는 속성
android: maxLines 속성	처음에는 한 줄 입력 -> (엔터) -> 지정한 여러 줄 크기
android: inputType 속성	사용자 글 입력 시 올라오는 키보드 지정 속성

<inputType 속성값>

none	입력 유형 지정 X. 모든 문자 입력 가능O 줄바꿈 O
text	문자열 한 줄 입력
textCapCharacters	대문자 입력 모드
textCapWords	각 단어 첫 글자 자동 대문자 입력 모드
textCapSentences	각 문단 첫 글자 자동 대문자 입력 모드
textMultiLine	여러 줄 입력 가능
textNoSugestions	단어 입력 시 키보드 추천 단어 X
textUri	URL 입력 모드
textEmailAddress	이메일 주소 입력 모드
textPassword	비밀번호 입력모드, 입력 문자 표시 X
textVisiblePassword	textPassword와 같으나, 입력 문자를 표시O
number	숫자 입력 모드
nuberSigned	숫자 입력 모드, (-)마이너스 입력 가능
numberDecimal	숫자 입력 모드, 소숫점 입력 가능
numberPassword	숫자 키만 입력 가능. 입력 문자 표시 X
phone	전화번호 입력 모드

[06-4. 뷰 바인딩]

[뷰 바인딩] View binding

-레이아웃 Xml 파일에 선언한 뷰 객체를 액티비티 코드에서 쉽게 이용하는 방법

-기존 방식 : XMl 파일 내부의 여러 뷰 객체에 id 속성값 주어 지정한 뒤 findViewById() 함수로 원하는 객체 하나하나 가져와야 하는 번거로움 존재

[뷰 바인딩 기법 사용 방법]

..
android {
. . .
viewBinding {
enabled = true //뷰 바인딩 적용 설정
}
}

-build.gradle 파일의 android 영역에 buildReatures 선언 -> 내부에 viewBinding 값 true

-이렇게 하면 레이아웃 XML 파일에 등록된 뷰 객체 포함하는 ‘새로운 클래스’가 자동 생성됨
-이 클래스에 접근하여 뷰를 사용하면 됨(findViewById() 호출 불필요)
-이 클래스 이름 규격: 각 단어의 첫글자 대문자, _(밑줄) 제거
-이 클래스 대상으로 inflate() 호출 시 -> 바인딩 객체 얻을 수 O
-바인딩 객체의 root 프로퍼티에는 XML 루트 태그 객체 자동 등록되므로
액티비티 화면 출력을 setContentView() 함수에 binding.root 전달하면 됨
-만약, 여러 XML 파일 중 일부 XML파일에 바인딩 클래스 적용 원하지 않으면
해당 XML 루트 태그에 tools:viewBindingIgnore = “true” 속성 추가함

[06-5. 카카오톡 비밀번호 확인 화면 만들기] : 실습

[참고] : Do It 안드로이드 앱 프로그래밍 with 코틀린