KOTLIN

[Kotlin] 공부 9일차 (2022-01-23)

HJ39 2022. 1. 24. 00:48
더보기

▷ 기본적인 뷰

    ▶ 뷰 바인딩

▷ 실습

 

  • 뷰 바인딩

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

 

 

□ 레이아웃 XML에 선언한 뷰

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/visibleBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="visible"
        android:backgroundTint="#ff0000"/>

    <Button
        android:id="@+id/targetView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="hello world"
        android:background="#FF0000"
        android:textColor="#FFFFFF"/>
    <Button
        android:id="@+id/invisibleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="invisible"/>

</LinearLayout>

뷰 3개를 코드에서 id값으로 얻어서 사용할 수 있다. 하지만 뷰 바인딩 기법을 이용하면 코드에서 훨씬 더 간편하게 뷰 객체를 이용할 수 있다.

 

buildFeatures{
    viewBinding = true
}

build.gradle파일의 android영역에 위 코드와 같이 선언하면 그 안에 뷰 바인딩을 적용하라는 의미이다.

레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 만들어진다.

즉, 직접 코드에서 뷰를 선언하고 findViewById() 함수를 호출하지 않아도 이를 구현한 클래스가 자동으로 만들어진다.

 

□ 바인딩 객체 사용법

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding= ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.visibleBtn.setOnClickListener{
            binding.targetView.visibility = View.VISIBLE
        }
        binding.invisibleBtn.setOnClickListener{
            binding.targetView.visibility = View.INVISIBLE
        }
    }

}

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

→ 자동으로 만들어진 클래스의 inflate() 함수를 호출하면 바인딩 객체를 얻을 수 있다.(인자로 layoutInflater를 전달)

바인딩 객체의 root프로퍼티에는 XML의 루트 태그 객체가 자동으로 등록되므로 액티비티 화면 출력은 setContentView() 함수에 binding.root를 전달하면 된다.

→ <Button android:id= "@+id/visibleBtn" />처럼 등록했다면 바인딩 객체에 visibleBtn이라는 프러퍼티(property) 명으로 등록되므로 binding.visibleBtn으로 이용하면 된다.

→ 어떤 레이아웃 XML 파일은 바인딩 클래스로 만들 필요가 없을 수도 있다. 이런 경우에는 XML 파일의 루트 태그에 tools:viewBindingIgnore="true"라는 속성을 추가한다.( 해당 XML 파일을 위한 바인딩 클래스를 만들지 않는다)

 

 

  • 실습

카카오톡 비밀번호 확인 화면 만들기

카카오톡 비밀번호 확인 화면

  • 1단계

문자열 리소스 등록하기

res/values/strings.xml 파일에 아래와 같이 입력한다.

<string name="main_desc">
    회원님의 소중한 정보 보호를 위해, 카카오계정의 현재 비밀번호를 확인해 주세요.
</string>

<string name="password_txt">비밀번호가 기억나지 않으세요?</string>

 

  • 2단계

레이아웃 XML 파일 작성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="wrap_content"
        android:text="@string/main_desc"
        android:textSize="17dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="jeonghojin03@gmail.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:hint="비밀번호"
        android:inputType="textPassword"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="@string/password_txt"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="확인"
        android:layout_marginTop="16dp"/>

</LinearLayout>

앱 실행화면

 

 

  • 선형으로 배치-LinearLayout
  • LinearLayout 배치 규칙

LinearLayout 은 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스이다.

 

□ orientation속성

horizontal 가로 방향
vertical  세로 방향

→ 방향만 설정하면 뷰를 추가한 순서대로 나열한다.

→ 화면에서 벗어나도 줄을 자동으로 바꾸지 않는다.

 

  • layout_weight 속성

화면에 뷰를 배치하다 보면 가로나 세로 방향으로 여백이 필요할 때 사용한다.

 

→ 뷰 1개로 전체 여백 채우기

layout_weight 속성을 사용하면 수치를 따로 계산하지 않아도 각 뷰에 설정한 가중치로 여백을 채울 수 있어 편리하다.

 

□ 버튼이 2개인 화면 구현 예시 1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2"/>
</LinearLayout>

예시 1 실행화면

□ 여백 없이 채우는 weight 속성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight ="1"
        android:text="BUTTON1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2"/>
</LinearLayout>

→ 예시 1 코드에서 android:layout_weight ="1" 이 추가되었다.

여백 없이 채우는 weight 속성 실행화면

→ 중첩된 레이아웃에서 여백 채우기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="BUTTON1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:text="BUTTON2" />
    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON3"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON4"/>

</LinearLayout>

 

중첩된 레이아웃 실행 화면

이와 같이 같은 영역에 있는 뷰끼리만 여백을 나누어 차지하는 것을 알 수 있다.

뷰의 크기를 0으로 하고 layout_weight값만 설정하기도 한다.

 

  • gravity, layout_gravity 속성

→ 뷰를 정렬할 때 사용한다.

→ 기본값으로 left/top(왼쪽/위)이다.

gravity 콘텐츠 정렬
layout_gravity 뷰 정렬

 

□ 뷰 정렬하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="left|top"
        android:text="2" />
</LinearLayout>

뷰 정렬하기 실행 화면

→ orientation 속성에 설정한 방향과 같은 방향으로는 layout_gravity 속성이 적용되지 않는다.

 

□ 화면 가운데로 정렬

위 코드에서 android:gravity="center"을 추가하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="left|top"
        android:text="2" />
</LinearLayout>

화면 가운데로 정렬 실행 화면

 

  • 상대 위치로 배치- RelativeLayout

상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스

 

  • RelativeLayout 배치 규칙
android:layout_above 기준 뷰의 위쪽에 배치
android:layout_below 기준 뷰의 아래쪽에 배치
android:layout_toLeftOf 기준 뷰의 왼쪽에 배치
android:layout_toRightOf 기준 뷰의 오른쪽에 배치

 

□ 상대 뷰의 오른쪽에 배치 예시

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/testImage"
        android:layout_width= "wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:layout_toRightOf="@id/testImage"/>


</RelativeLayout>

상대 뷰의 오른쪽 배치 실행 화면

ImageView에 id값을 설정하고 이 값을 Button의 layout_toRightOf 속성 값으로 지정

 

 

 

 

 

 

  • 맞춤 정렬하는 align 속성

위 예시에서 이미지의 세로 크기가 버튼보다 커서 버튼이 이미지 위쪽에 맞춰졌다. 이런 경우에 정밀하게 배치할 때 사용한다.

 

□ align 속성들

android:layout_alignTop 기준 뷰와 위쪽을 맞춤
android:layout_alignBottom 기준 뷰와 아래쪽을 맞춤
android:layout_alignLeft 기준 뷰와 왼쪽을 맞춤
android:layout_alignRight 기준 뷰와 오른쪽을 맞춤
android:layout_alignBaseline 기준 뷰와 텍스트 기준선을 맞춤

 

□ 기분 뷰와 아래쪽을 맞춰 정렬

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/testImage"
        android:layout_width= "wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:layout_toRightOf="@id/testImage"
        android:layout_alignBottom="@id/testImage"/>


</RelativeLayout>

위 예시에서 android:layout_alignBottom="@id/testImage" 코드가 추가되었다.

 

 

 

 

 

□ 상위 레이아웃 기준으로 맞춤 정렬

android:layout_alignParentTop 부모의 위쪽에 맞춤
android:layout_alignParentBottom 부모의 아래쪽에 맞춤
android:layout_alignParentLeft 부모의 왼쪽쪽에 맞춤
android:layout_alignParentRight 부모의 오른쪽에 맞춤
android:layout_centerHorizontal 부모의 가로 방향 중앙에 맞춤
android:layout_centerVertical 부모의 세로 방향 중앙에 맞춤
android:layout_centerInParent 부모의 가로,세로 중앙에 맞춤

 

9일 차 공부 끝!

'KOTLIN' 카테고리의 다른 글

[Kotlin] 공부 11일차 (2022-01-25)  (0) 2022.01.25
[Kotlin] 공부 10일차 (2022-01-24)  (0) 2022.01.24
[Kotlin] 공부 8일차 (2022-01-20)  (0) 2022.01.21
[Kotlin] 공부 7일차 (2022-01-19)  (0) 2022.01.19
[Kotlin] 공부 6일차 (2022-01-18)  (0) 2022.01.18

'KOTLIN'의 다른글

  • 현재글[Kotlin] 공부 9일차 (2022-01-23)

관련글

티스토리툴바