[3팀] Android-12-Kotlin : 계산기 - XML사용법과 UI생성법 배우기(선형레이아웃)

 

이 글은 유데미 강의 Android 12 및 Kotlin 개발 완전 정복을 참고하여 작성하였습니다.

작성자 : 김은비

개발환경은 Windows, Android Studio입니다.

 

강의영상 91 ~ 94를 시청하고 작성한 글입니다.

1. UI 생성  

1-1. LinearLayout 

• LinearLayout : view 를 수평또는 수직 방향으로 배치할 수 있는 레이아웃
  • orientation 속성을 통해 배치방향 결정
    • android : orientation = "vertical"  : 하위 view 들을 수직방향으로 배치
    • android : orientation = "horizontal" : 하위 view 들을 수평방향으로 배치
  • Match_parent : 자신의 부모에 높이나 폭을 맞춤 , 보통은 너비 혹은 높이가 화면 전체 길이
  • Wrap_content : 글자 혹은 이미지의 크기에 맞춤

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">
</LinearLayout>

 

1-2. Textview 

• Textview : Layout에 문자열 출력하는 뷰
  • background : 색상 결정
  • padding : 위젯 테두리와 위젯 안에 있는 내용 사이의 여백
  • gravity : 문자열 위치 설정
                   ‘(가로)|(세로)’

<TextView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/Light_grey"
        android:padding="10dp"
        android:textSize="48sp"
        android:text="@string/calc_text"
        android:gravity="end|bottom"
    />

 

1-3. Button 

• Button : 사용자가 화면을 터치했을 때 발생하는 클릭 이벤트를 처리하는 기능을 가진 뷰 위젯
  • onClick : 이를 사용하면 코드 유지가 어려워짐 → onClickListener, databinding 사용 추천

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

        <Button
            android:id="@+id/btnSeven"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:onClick="onDigit"
            android:text="@string/_7"
            tools:ignore="UsingOnClickInXml"
            />
            
    </LinearLayout>