[Android] 뷰 클래스 ( 화면 구성)

안드로이드에서 화면을 만들어 표시하는 컴포넌트는 액티비티이다. 액티비티가 실행되면서 뷰 클래스를 이용하여 화면을 구성한다. 안드로이드가 제공하는 뷰 클래스는 TextView, ImageView, EditText, Button, Spinner 등이 있다.

뷰 클래스의 구조

그림은 뷰 클래스의 계층 구조이다.

• View : 모든 뷰 클래스의 최상위 클래스이다. 액티비티는 View의 서브 클래스만 화면에 출력한다.
• ViewGroup : View의 하위 클래스지만 자체 UI는 없어서 화면에 출력해도 아무것도 나오지 않는다. 다른 뷰 여러개를 묶어서 제어하기 위한 목적으로 사용한다. 일종의 그릇 역할을 하는 클래스로 컨테이너 기능을 담당한다.

 

뷰의 간격 설정

뷰의 간격은 margin과 padding 속성으로 설정한다.

• margin : 뷰와 뷰 사이의 간격
• padding : 뷰의 콘텐츠와 테두리 사이의 간격

margin과 padding 속성

 

텍스트 뷰

문자열을 화면에 출력하는 뷰

• android:text - 텍스트뷰에 출력할 문자열 지정(문자열 대입 또는 문자열 리소스 지정)
• android:textColor - 문자열의 색상 지정
• android:textSize - 문자열의 크기 지정
• android:textStyle - 문자열의 스타일 지정(속성값은 bold, italic, normal)
• android:autoLink - 텍스트뷰에 출력할 문자열을 분석해 특정 형태의 문자열에 자동 링크를 추가해줌                                            (속성값으로는 web, phone, email 등이 있으며 여러 개를 함께 설정할 때는 |로 연결)
• android:maxLines - 문자열을 출력할 때 특정 줄까지만 나오도록 설정
• android:ellipsize -  출력되지 않은 문자열이 더 있다는 것을 줄임표(...)로 표시하는 속성                                                            (속성값은 end, start, middle인데 start와 middle은 문자열을 한줄로 출력했을 때만 적용됨)

 

이미지 뷰

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

• android:src - 출력할 이미지 설정
• android:maxWidth, android:maxHeight - 출력할 뷰의 최대 크기 지정(adjustViewBounds 속성과 함께 사용해야 함)
• android:adjustViewBounds - 이미지의 가로세로 길이 비례 여부 설정

 

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

• Button : 사용자 이벤트 처리 뷰
• CheckBox : 다중 선택제공 뷰
• RadioButton : 단일 선택제공 뷰(RadioGroup과 함께 사용하여 하나만 선택하도록 처리)

 

에디트 텍스트

사용자가 글을 입력할 수 있는 뷰. 한 줄 입력 크기로 출력되었다가 사용자가 키보드에서 엔터를 누르면 아래로 늘어나서 여러 줄 입력크기가 됨

• android:lines - 여러 줄 입력크기로 나오게 하는 속성
• android:maxLines - 처음에는 한 줄 입력 크기로 출력되고, 지정한 수만큼 늘어나면 더 늘어나지 않음
• android:inputType - 글을 입력할 때 올라오는 키보드 지정

속성값	설명
none	디폴트 값. 모든 문자 입력 가능하며 줄 바꿈 가능
text	none과 동일하고 줄 바꿈만 불가능합니다.(정해진 라인수 이상 입력은 불가능)
textCapCharacters	키보드가 자동 대문자 입력 모드로 바뀜
textCapWords	각 단어의 첫글자 입력시 키보드가 자동 대문자 입력 모드
textCapSentences	각 문장의 첫글자 입력시 키보드가 자동 대문자 입력 모드
textMultiLine	여러 줄 입력 가능
textNoSuggestions	단어 입력 시 키보드의 추천 단어 보여주기 비활성화
textUri	키보드의 URI 입력 모드
textEmailAddress	키보드의 이메일 주소 입력 모드
textPassword	비밀번호 입력용으로 입력된 문자가 점으로 표시. 영문 + 특수문자 키보드
textVisiblePassword	textPassword와 동일한데 점이 아니라 문자열이 그대로 표시
number	키보드 숫자 입력 모드 사용
numberSigned	number과 동일하며 부호 키 - 입력 가능
numberDecimal	number과 동일하며 소수점 입력 가능
numberPassword	숫자 키만 입력 가능한 password
phone	전화번호 입력 모드
datetime	날짜와 시간 입력 전용 키보드 제공
date	날짜 입력 전용 키보드 제공
time	시간 입력 전용 키보드 제공

---

뷰 바인딩

뷰 바인딩은 레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 쉽게 이용하는 방법이다. 레이아웃에 등록한 뷰는 findViewById()로 얻어서 사용해야 한다. 하지만 액티비티에서 findViewById() 함수를 이용하지 않고 레이아웃에 등록된 뷰 객체를 이용할 수 있는 방법이 있다.!

 

우선 뷰 바인딩을 사용하려면 gradle 파일에 선언을 해주어야 한다.

android{
	//...생략...
    buildFeatures {
    	viewBinding = true
    }
}

이렇게 하면 레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 만들어진다. 따라서 직접 코드에서 뷰를 선언하고 findViewById()를 호출하는 과정을 생략할 수 있다.

 

자동으로 만들어지는 클래스의 이름은 레이아웃 파일명을 따른다. 첫 글자를 대문자로 하고 밑줄(_)은 빼고 뒤에 오는 단어를 대문자로 만든 후 Binding을 추가한다.

ex) activity_main.xml -> ActivityMainBinding    /   item_main.xml -> ItemMainBinding

 

자동으로 만들어진 클래스의 inflate() 함수를 호출하면 객체를 얻을 수 있다. 이 때 인자로 layoutInflater를 전달한다. 그리고 바인딩 객체의 root 프로퍼티에는 xml의 루트 태그 객체가 자동으로 등록되므로 액티비티 화면 출력은 setContentView에 binding.root를 전달한다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        //바인딩 객체 획득
        val binding = ActivityMainBinding.inflate(layoutInflater)
        //액티비티 화면 출력
        setContentView(binding.root)
    }
}

뷰 객체를 이용할  때는 바인딩 객체.ViewId로 사용하면 된다.

만약 바인딩 클래스를 만들 필요가 없다면 tools:viewBindingIgnore = "true" 라는 속성을 추가해준다