[Chap 6] 뷰를 이용한 화면 구성

화면을 구성하는 방법

화면을 출력하는 컴포넌트 : 액티비티

화면에 내용을 표시하는 클래스 : 뷰 클래스(TextView, ImageView 등)

-> 액티비티가 실행되면서 뷰 클래스를 이용해 화면을 구성하고 이를 기기의 화면에 출력하는 구조

 

1) 액티비티 코드로 작성

화면을 구성하는 뷰 클래스를 액티비티 코드에서 직접 생성 -> XML 파일은 사용하지 않으므로 작성 X

 

2) 레이아웃 XML 파일로 작성

화면을 구성하는데 필요한 뷰를 XML의 태그로 명시해 화면을 구성하는 방법

XML에서 화면을 구현하므로 액티비티 코드에서는 화면을 출력하는 setContentView() 함수만 호출하면서 XML 파일을 전달하면 된다. 

class MainActivity: AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?){
    	super.onCreate(savedInstanceState)
        // 화면 출력 XML 명시
        setContentView(R.layout.activity_main)
    }
}

 

효율성을 고려한다면 XML 파일로 화면을 구현하는 것이 더 좋다. 화면 구현은 XML로 분리하고, 액티비티에서는 네트워킹, 데이터 핸들링, 사용자 이벤트 처리 등의 코드만 작성하는 것이 더 효율적.

 

뷰 클래스

뷰 객체의 계층 구조

액티비티 화면을 구성할 때 사용하는 클래스는 모두 View의 하위 클래스 -> 화면 구성과 관련된 클래스를 통칭하여 뷰 클래스라고 함.

1) View : 모든 뷰 클래스의 최상위 클래스. 액티비티는 View의 서브 클래스만 화면에 출력

2) ViewGroup : View의 하위 클래스지만 자체 UI는 없어서 화면에 출력해도 아무것도 나오지 않는다. 일종의 컨테이너와 비슷한 역할을 하며, 실제로는 ViewGroup의 서브 클래스인 레이아웃 클래스를 사용

* 레이아웃 클래스 : 다른 뷰 객체 여러 개를 담아서 한꺼번에 제어할 목적으로 사용

3) TextView : 특정 UI를 출력할 목적으로 사용되는 클래스. 문자열을 출력하는 뷰

 

레이아웃 중첩

레이아웃 객체를 중첩하여 뷰의 계층 구조를 만들 수 있다. 이처럼 객체를 계층 구조로 만들어 이용하는 패턴을 컴포지트 패턴(composite pattern) 또는 문서 객체 모델(document object model)이라고 한다.

 

레이아웃 XML의 뷰를 코드에서 사용하기

id 속성을 사용하여 식별자를 부여하고 그 식별자로 객체를 얻어와야 한다. id는 꼭 지정해야 하는 속성은 아니며 레이아웃 XML에 선언한 뷰를 구별할 필요가 없을 때는 생략해도 된다. 

<TextView android:id="@+id/text1" /> // id 값 : text1

- id 값은 앱에서 유일해야 한다.

- XML에 id 속성을 추가하면 자동으로 R.java 파일에 상수 변수로 추가

- XML 속성값이 @로 시작하면 R.java 파일을 의미

 

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

- setContentView() : 액티비티의 화면을 출력하는 함수. 이 함수를 호출하는 것만으로도 XML의 내용이 액티비티 화면에 출력

 

뷰의 크기 지정

layout_width, layout_height 속성을 이용하여 얼마만큼의 크기로 화면에 View를 출력할 것인지를 지정.

1) 수치

2) match_parent : 상위 계층의 크기

3) wrap_content : 자신의 콘텐츠를 화면에 출력할 수 있는 적절한 크기

-> 일반적으로 안드로이드 기기의 호환성을 위해 match_parent나 wrap_content를 사용한다.

 

뷰의 간격 설정

1) margin : 뷰와 뷰 사이의 간격

2) padding : 뷰의 콘텐츠와 테두리 사이의 간격

-> margin, padding 속성을 이용하면 간격이 네 방향 모두 같은 크기로 설정! 특정한 한 방향의 간격만 설정하고 싶다면 paddingLeft/Right/Top/Bottom과 Layout_marginLeft/Right/Top/Bottom 속성을 이용.

 

뷰의 표시 여부 설정(visibility 속성)

1) visible(default) : 뷰가 화면에 출력

2) invisible : 뷰가 화면에 출력되지 않고 자리를 차지

3) gone : 뷰가 화면에 출력되지 않고 자리 차지 X - 처음에는 화면에 보이지 않다가 어떤 순간이 되면 보이게 처리

android:visibility="invisible"

 

- 코드에서 뷰의 visibility 속성 조정하는 방법 : 뷰의 visibility 속성을 View.VISIBLE / View.INVISIBLE로 설정

visibleBtn.setOnClickListener {
	targetView.visibility = View.VISIBLE
}

* setVisibility를 호출하지 않는 이유는?

코틀린은 자바와 다르게 field가 아니라 property! 즉, 변수에 getter/setter가 내장되어 있다. 

 

기본적인 뷰 살펴보기

텍스트 뷰 : 문자열을 화면에 출력하는 뷰

• android:text : TextView에 출력할 문자열/문자열 리소스 지정
• android:textColor : 문자열의 색상 지정(16진수 RGB 형식)
• android:textSize : 문자열의 크기 지정(숫자 사용, 단위 생략 불가) - 단위는 px, dp, sp 등을 사용
• android:textStyle : 문자열의 스타일을 지정(bold, italic, normal 중에서 선택)
• android:autoLink : TextView에 출력할 문자열을 분석해 특정 형태의 문자열에 자동 링크를 추가(web, phone, email)
• android:maxLines : 문자열이 특정 줄까지만 나오도록 하는 함수
• android:ellipsize : maxLines 속성을 이용할 때 출력되지 않은 문자열이 더 있다는 것을 표시(start, middle, end)
  • start, middle의 경우 singleLine = "true" 속성으로 문자열을 한 줄로 출력했을 때만 적용

 

이미지 뷰 : 이미지를 화면에 출력하는 뷰

• android:src : ImageView에 출력할 이미지를 설정(리소스 이미지, 파일 이미지, 네트워크 이미지 등)
• android:maxWidth, maxHeight, adjustViewBounds 속성 : ImageView가 출력하는 이미지의 최대 크기 지정
  
  • maxWidth, maxHeight 속성은 adjustViewBounds와 함께 사용해야 함.
  • 속성값을 true로 설정할 경우, 이미지의 가로세로 길이와 비례해 뷰의 크기를 맞춤
  • 이미지 크기나 가로세로 비율이 다양하다면 뷰의 크기가 이미지 크기보다 커질 수 있기 때문에 layout_width, layout_height 속성에 숫자를 지정하지 않는다! 

 

버튼, 체크박스, 라디오 버튼

1) Button : 사용자 이벤트를 처리

2) CheckBox : 다중 선택

3) RadioButton : 단일 선택을 제공

-> RadioGroup과 함꼐 사용하며 그룹으로 묶은 라디오 버튼 중 하나만 선택 가능

 

에디트 텍스트 : 사용자가 글을 입력할 수 있는 뷰

• android:lines : 처음부터 여러 줄 입력 크기로 나오게 하는 속성
• android:maxLines : 처음에는 한 줄 크기로 출력, 엔터를 눌렀을 때 최대 몇 줄까지 늘어날 것인지를 정함
• android:inputType : EditText에 글을 입력할 때 올라오는 키보드를 지정하는 속성

 

뷰 바인딩

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

1) gradle 파일에 다음처럼 선언

android {
	(...생략...)
    buildFeatures {
    	viewBinding = true
    }
}

-> 레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 생성. 즉, 우리가 직접 코드에서 뷰를 선언하고 findByViewById() 함수를 호출하지 않아도 이를 구현한 클래스가 자동으로 만들어지므로 이 클래스를 이용해 뷰를 사용

 

2) 클래스 자동 생성

ex) activity_main.xml -> ActivityMainBinding

 

3) 바인딩 객체 획득

// 바인딩 객체 획득
val binding = ActivityMainBinding.inflate(layoutInflater)
// 액티비티 화면 출력
setContentView(binding.root)
// 뷰 객체 이용
binding.visibleBtn.setOnClickListener { ... }

 

+a) 특정 레이아웃 XML 파일을 바인딩 클래스로 만들고 싶지 않을 때 : XML 파일의 루트 태그에 아래 속성 추가

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
    (생략)
	tools:viewBindingIgnore="true">