안드로이드 앱 프로그래밍 - 5(뷰를 이용한 화면 구성)

- 뷰 클래스

액티비티는 화면을 표시하는데, 뷰 클래스의 하위 클래스들을 실행시켜서 화면을 구성합니다. 뷰 클래스의 하위 클래스들의 종류는 아래와 같습니다.

TextView : 화면에 글자를 출력합니다.

ImageView : 화면에 사진을 출력합니다.

EditText : 화면에 글을 쓸 수 있는 상자를 출력합니다.

Button : 화면에 버튼을 출력합니다.

ListBiew : 화면에 리스트를 출력합니다.

View : 구분선을 출력합니다.

 

- View Group

뷰 클래스의 하위 클래스로 실제 화면을 출력하는 클래스들을 묶어서 제어할 클래스들의 모임입니다. 일조의 그릇 역할, html의 <div>와 비슷합니다. 아래는 종류입니다.

LinearLayout : 레이아웃 안에 있는 뷰 클래스들을 하나의 줄에 배치합니다.

RelativeLayout : 뷰를 상대적으로 배치합니다.

 

- 뷰의 크기 지정

layout_width, ;ayout_height 속성을 이용해 뷰의 크기를 지정할 수 있습니다. 크기를 나타내는 속성값은 아래중 하나를 선언합니다.

• 수치 : 10dp
• match_parent : 부모의 크기 전체를 의미합니다.
• wrap_content : 콘텐츠를 화면에 출력할 수 있는 적절한 크기를 지정해줍니다.

- 뷰의 간격 설정

html과 비슷하게 마진과 패딩이 있습니다. 아래는 마진과 패딩의 속성입니다.

• layout_marginLeft : 마진 왼쪽입니다.
• layout_marginRight : 마진 오른쪽입니다.
• layout_marginTop : 마진 위쪽입니다.
• layout_marginBottom : 마진 아래쪽입니다.
• paddingLeft : 패딩 왼쪽입니다.
• paddingRight : 패딩 오른쪽입니다.
• paddingTop : 패딩 위쪽입니다.
• paddingBottom : 패딩 아래쪽입니다.

- 뷰의 표시 설정

visibility 속성은 뷰가 화면에 출력되어야하는지 설정합니다. 값은 아래와 같은 값으로 줄 수 있습니다.

• visible : 보이게합니다.
• invisible : 안보이지만 자리는 차지합니다.
• gone : 안보이고 자리도 차지하지 않습니다.

- TextView

• TextView는 문자열을 화면에 출력하는 뷰입니다. Textview에서 자주 이용하는 속성은 아래와 같습니다.
• android:text : TextView에 출력할 문자열을 지정합니다.
• android:textColor : 문자열의 색상을 지정합니다. #FF0000과 같은 16진수 RGB값을 사용하빈다.
• android:textSize : 문자열의크기를 지정합니다. px,dp,sp 등을 사용합니다.
• android:textStyle : 문자열의 스타일을 지정합니다. bold,italic,normal 중에 선택합니다.
• android:autoLink : TextView에 출력할 문자열을 분석해 특정 형태의 문자열에 자동 링크를 추가해줍니다. web, email, phone 속성값을 사용하며 | 기호로 여러개 연결 할 수 있습니다.
• android:maxLines : 최대 나타낼 문자열의 줄의 갯수를 의미합니다. 최대가 넘으면 스크롤로 변합니다.
• android:ellpipSize:  maxLines 속성을 이용할때 문자열이 더있다는(...)표시를 넣습니다. 이때 end,middle,start로 ...이 표시되는 위치를 정할 수 있습니다.

- ImageView

ImageView는 이미지를 화면에 출력하는 뷰입니다. ImageView에서 자주 이용하는 속성은 아래와 같습니다.

android:src : 출력할 이미지의 경로를 나타냅니다.

android:maxWidth : 출력할 이미지의 최대 너비를 설정합니다. 보통 dp를 사용합니다.

android:maxHeight : 출력할 이미지의 최대 높이를 설정합니다. 보통 dp를 사용합니다.

android:adjustViewBounds : 출력할 이미지의 크기의 비율을 유지하는 속성값으로 true일때 비율을 유지합니다.

 

- EditText

EditText는 사용자가 글을 입력할 수 있는 뷰입니다. EditText에서 자주 이용하는 속성은 아래와 같습니다.

• android:inputType : 글을 입력할때 올라오는 키보드를 지정하는 속성입니다. 속성을 설정하지않으면 기본 문자 입력 키보드가 올라오며 여러줄을 입력할 수 있습니다. 아래는 자주 사용하는 속성값들입니다.

• text : 문자열 한줄 입력
• textEamilAddress : 이메일 주소 입력 모드
• textPassword : 비밀번호 입력시 입력한 문자를 점으로 표시, 키보드는 영문자 숫자 특수키만 표시
• textVisiblePassword : textPassword와 같으나 입력한 문자 표시
• number : 숫자입력 모드
• phone : 전화번호 입력 모드

• android:hint : 글을 입력하기 전에 나타나는 문자열입니다.

- 기타 뷰들

• button : 버튼입니다.
• checkBox : 체크박스입니다.
• RadioButton : 라디오 버튼입니다. RadioGroup으로 묶어서 사용합니다.

- 뷰바인딩

원래 뷰 객체를 코드에서 이용할때는 findViewById() 함수로 id값으로 객체를 얻어와서 사용했습니다. 하지만 이런 방법이 불편해서 이제는 뷰바인딩이라는 기술로 편리하게 사용합니다. 뷰바인딩 기술을 사용하려면 먼저 xml 파일에 등록된 뷰 객체를 포함하는 클래스를 자동으로 만들어지게 해야합니다. 이를위해 build.gradle 파일을 수정해야합니다.

gradle 파일 android{} 부분에 뷰바인딩 설정을 추가해줍니다. 이제 바인딩 객체가 생성되며 아래와 같이 사용합니다.

package com.example.androidlab

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val =binding = ActivityMainBinding.inflate(layoutInflater) //activity_main_xml 파일의 객체들을 가져옵니다.
       
        setContentView(binding.root) //activity_main_xml을 화면에 출력합니다.
        
        binding.visibleBtn.setOnClickListener{
        	binding.targetView.visibility = view.VISIBLE
        }
    }
}

바인딩 클래스 이름은 xml 파일의 이름을 사용해서 만들어집니다.

activity_main.xml -> ActivityMainBinding

만약, xml 파일하나당 바인딩 클래스가 하나 만들어지는데, 바인딩 클래스가 필여앖다면 xml 파일 루트태그에 tools:viewBindingIgnore="true" 를 추가하면 클래스가 만들어지지않습니다.

 

- 실습 : 카카오톡 비밀번호 확인 화면 만들기

<activity_kakaotalk.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".kakotalk">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="51dp"
            android:text="@string/main_desc"
            android:textSize="17dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="nova.tistory.com"
            android:textColor="#CFCFCE"
            android:layout_marginTop="10dp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#D4D4D3"
            android:layout_marginTop="10dp"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="비밀번호"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/password_text"
            android:layout_marginTop="10dp"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="확인"
            android:layout_marginTop="10dp"/>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

<string.xml>

<resources>
    <string name="app_name">KaKao_doIt</string>
    <string name="main_desc">회원님의 소중한 정보보호를 위해, 카카오계정의 현재 비밀번호를 확인해주세요.
    </string>
    <string name="password_text">비밀번호가 기억나지 않으세요?</string>

</resources>

<kakaotalk.kt>

package com.example.myapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class kakotalk : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_kakotalk)
    }
}

<화면>