[깡쌤의 안드로이드 프로그래밍 with 코틀린][3. 앱의 기본 기능 구현하기] 7. 뷰를 배치하는 레이아웃

1. 전화 앱의 키패드 화면 만들기

 

이미지 준비

전화 앱 키패드 화면에 사용될 이미지

 

add.png

0.00MB

back.png

0.00MB

call.png

0.00MB

video.png

0.00MB

 

레이아웃 XML 작성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:id="@+id/main">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp">

        <ImageView
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/add"
            app:tint="#00FF00"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="연락처 추가"
            android:textColor="#00FF00"
            android:textStyle="bold"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="02-120"
        android:textSize="40dp"/>

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:columnCount="3"
        android:orientation="horizontal">
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="1"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="2"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="3"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="4"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="5"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="6"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="7"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="8"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="9"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="*"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="0"
            android:textSize="30dp"
            android:textStyle="bold"/>
        <TextView
            android:paddingLeft="40dp"
            android:paddingTop="10dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="#"
            android:textSize="30dp"
            android:textStyle="bold"/>
    </GridLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">
        <ImageView
            android:id="@+id/icon_video"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginRight="30dp"
            android:src="@drawable/video"/>
        <ImageView
            android:id="@+id/icon_call"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_toRightOf="@id/icon_video"
            android:src="@drawable/call"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:layout_toRightOf="@id/icon_call"
            android:src="@drawable/back"/>
    </RelativeLayout>

</LinearLayout>

 

앱 실행 후 화면 확인