코틀린 5장

손현수·2022년 11월 10일

뷰 소개

  • 뷰란 앱에서 우리가 눈으로 볼 수 있는 모든 것을 말한다. 버튼, 이미지, 리스트, 입력창 등이 뷰이다. 뷰를 위젯이라고 부르기도 하고 뷰의 종류에는 위젯외에도 뷰 그룹도 있다. 뷰 그룹은 독특하게 보이지 않는 뷰로서 레이아웃의 역할을 하며 여러 위젯을 담거나 혹은 또 다른 뷰 그룹을 담는 역할을 한다.

  • 위의 예시를 보면 뷰 그룹1이 위젯 1과 그룹 2를 담고 있고 그룹 2는 위젯 2개를 담고 있다. 이렇듯이 위젯과 뷰 그룹은 하는 일이 다르다.

UI 구성요소

  • 뷰: UI 구성요소의 기본 클래스이면서 화면을 구성하는 기본 단위. 뷰의 종류로는 버튼, 텍스트뷰, 이미지뷰 같은 위젯과 컨스트레인트 레이아웃, 리니어 레이아웃과 같은 뷰 그룹이 있다.

  • 위젯(뷰): 위젯은 화면에 직접적으로 보이고 사용자와 상호작용하는 구성요소이다. 위젯은 뷰 그룹에 속해야 한다. 텍스트뷰, 버튼, 에디트텍스트 등의 위젯을 통해 사용자의 이벤트를 처리하고 정보를 보여준다. 위젯을 편의상 뷰라고 부른다.

  • 뷰 그룹(레이아웃): 뷰 그룹은 한 개 이상의 뷰 혹은 다른 뷰 그룹을 담고 뷰들을 배치하는 역할을 한다. 그래서 뷰 그룹을 레이아웃이라고도 부른다.

뷰 공통 속성

  • 뷰들은 용도별로 고유 속성과 필수로 지정하는 공통 속성을 가지고 있다. 공통 속성으로는 layout_width와 layout_height, 즉 너비와 높이가 있다. 또 여백도 있다.

너비와 높이

  • layout_width는 뷰 너비를, layout_height는 뷰 높이를 지정한다. 다음은 layout_width와 layout_height값으로 쓰이는 대표적인 3가지이다.
  1. match_parent: 해당 뷰를 부모 레이아웃의 크기에 맞춘다.
  2. wrap_content: 해당 뷰 안에 들어있는 내용에 크기를 자동으로 맞춘다.
  3. 직접 지정: 크기를 직접 지정해준다. 예를 들면 100dp, 200dp 이렇게 설정하면 된다.
  • LearningView라는 프로젝트를 하나 만들고 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="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        />

</LinearLayout>
  • 버튼의 부모 레이아웃인 LinearLayout은 너비와 높이 둘 다 속성값이 match_parent이므로 화면을 꽉 채운다.
  • 버튼 속성값이 wrap_content이므로 내용물 크기로 너비와 높이를 맞춘다.

  • 이제 버튼의 속성 중에서 layout_width를 match_parent로 바꿔본다. 그러면 다음과 같이 너비가 부모 레이아웃의 너비만큼 커지게 된다.

  • 이번에는 layout_width를 wrap_content로 바꾸고 layout_height를 match_parent로 바꿔본다. 그럼 다음과 같이 세로 방향으로 버튼이 길쭉해진다.

  • 이번에는 원하는 크기를 숫자로 넣어본다. layout_width값에 150dp, layout_height값에 400dp를 넣어본다. 그 결과 다음과 같이 위로 길쭉한 모양이 된다.

dp란 무엇인가?

  • dp는 density-independent pixel의 준말이다. 픽셀의 경우 저해상도일 때의 4픽셀과 고해상도일 때 4픽셀의 크기 차이가 존재한다.(고해상도일 경우 전체 픽셀이 늘어나므로 4개의 픽셀이 차지하는 영역이 줄어듦) dp의 경우 픽셀과 달리 해상도에 관계없이 이미지를 같은 크기로 표현한다. 따라서 dp를 사용하면 안드로이드 운영체제에서 기기의 해상도에 맞춰 자동으로 픽셀값을 조정해준다. 결국 개발자들이 모든 기기의 해상도를 대응할 필요 없이 dp 값으로만 레이아웃을 만들면 되는 것이다. 안드로이드에는 총 5가지의 대표적인 DPI가 존재하는데 DPI는 dot per inch의 약자로 1인치당 들어가는 픽셀 개수를 뜻한다. 예를 들어 160DPI는 1인치에 픽셀 160개가 들어간다는 것이다. DPI가 높을수록 해상도가 높다.

패딩과 마진

  • 모든 뷰가 여백 없이 다닥다닥 붙어있으면 사용자가 내용을 한눈에 알아보기도 힘들고 버튼을 잘못 누를 수 있다. 이러한 상황을 방지하는 데 뷰와 뷰 사이에, 그리고 뷰 안에 여백을 사용한다. 뷰에 여백을 주는 데 마진과 패딩 개념을 활용한다.

  • 패딩은 텍스트뷰 안에 있는 내용(콘텐츠)과 텍스트뷰 외곽 사이의 여백이다.
  • 마진은 부모 레이아웃과 텍스트뷰 사이의 간격을 의미한다. 부모 레이아웃뿐만 아니라 다른 뷰 혹은 다른 뷰 그룹과의 간격일 수도 있다.

  • 다음은 텍스트뷰에 패딩과 마진을 적용해보는 코드이다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D7FAEA"
        android:text="패딩, 마진 둘 다 없음"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4B653B"
        android:text="패딩, 마진 둘 다 없음"
        android:textColor="#FFFFFF"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="#D7FAEA"
        android:text="마진만 있음"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="#4B653b"
        android:text="마진만 있음"
        android:textColor="#ffffff"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#d7faea"
        android:padding="10dp"
        android:text="패딩만 있음"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4b653b"
        android:padding="10dp"
        android:text="패딩만 있음"
        android:textColor="#ffffff"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="#d7faea"
        android:padding="10dp"
        android:text="패딩, 마진 둘 다 있음"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="#4b653b"
        android:padding="10dp"
        android:text="패딩, 마진 둘 다 있음"
        android:textColor="#ffffff"
        android:textSize="20sp"/>


</LinearLayout>

텍스트뷰의 기본 속성

  • 가장 많이 사용하는 속성은 text, textColor, textSize, textStyle이다.
  • 새 레이아웃 리소스 파일을 만든다. [app]->[res]->[layout]위에서 마우스 우클릭->[new]->[layout resource file]을 클릭
  • 새로운 파일의 xml 코드를 다음과 같이 바꾼다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요. 손현수입니다."
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

  • text: 텍스트뷰에서 보여줄 글자를 지정한다. 이 속성에 직접 텍스트를 입력할 수도 있고, stirngs.xml 파일에 선언한 문자열을 불러올 수도 있다.
  • textColor: 텍스트 색깔을 지정한다. #000000은 검은색이다.
  • textSize: 텍스트 크기를 지정한다. 텍스트 크기를 나타내는 숫자 뒤에 sp 또는 dp를 붙인다.
  • textStyle: 텍스트 스타일을 지정한다. bold는 글자를 굵게 보이게 한다. 기울임체를 사용하려면 italic값을 주면 된다. 굵은 기울임체를 사용하려면 italic | bold값을 주면 된다. 이와 같이 일부 속성은 둘 이상의 값을 허용하는데, | 를 사용해서 열거하면 된다.

색상을 지정하는 숫자

  • textColor를 #000000으로 지정했다. 숫자는 두 자리 단위로 빨강, 초록, 파랑값이다. 각 색마다 00부터 FF까지 값을 지정할 수 있다. 주요 색상별 값은 다음과 같다.
  • 빨간색: #FF0000
  • 초록색: #00FF00
  • 파란색: #0000FF
  • 흰색: #FFFFFF
  • 검정색: #000000

dp와 sp의 차이점

  • dp는 해상도에 상관없이 동일한 크기로 뷰를 보여주려고 안드로이드에서 정한 단위이다. 그에 비해서 sp(scale-independent pixels)은 텍스트 크기를 지정하는 단위이다.

strings.xml과 color.xml 사용하기

  • 예를 들어 100개의 텍스트뷰의 textColor 속성에 #000000을 주어 검은색으로 지정했다고 하자. 만약 텍스트 색을 초록색으로 바꾸고 싶다면 100개의 텍스트뷰를 일일이 바꾸지 않아도 colors.xml 밸류 리소스 파일을 이용하면 손쉽게 바꿀 수 있다.
  • [app]->[res]->[values]->colors.xml 클릭
  • colors.xml 파일에 다음 코드를 추가하여 메인 컬러와 서브 컬러를 지정해주면 메인 컬러와 서브 컬러를 한 번만 변경해 원하는 효과를 얻을 수 있다.

``kotlin

#FFBB86FC #FF6200EE #FF3700B3 #FF03DAC5 #FF018786 #FF000000 #FFFFFFFF #000000//새로 추가한 메인 컬러 #25a632//새로 추가한 서브 컬러 ```
  • 또 색상뿐 아니라 텍스트도 미리 지정해줄 수 있다. 여러 레이아웃 파일에 직접 텍스트를 하드코딩하는 대신 strings.xml 한 곳에서 관리하면 유지보수도 용이하다.
  • [app]->[res]->[values]->strings.xml에 다음과 같이 한 줄을 추가한다.(인사말)
<resources>
    <string name="app_name">LearningViews</string>
    <string name="greeting">안녕하세요. 손현수입니다.</string>//새로 추가한 인사말 코드
</resources>

미리 지정한 색상과 텍스트 사용해보기

  • [app]->[res]->[layout] 위에서 마우스 우클릭 [new]->[layout resource file]클릭->sample_textview->with_values 파일 생성->그 후에 xml 코드를 다음과 같이 작성
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/greeting"//미리 지정한 텍스트 사용
        android:textColor="@color/colorMain"//미리 지정한 색상 사용
        android:textSize="20sp"
        android:textStyle="bold"/>
    
</LinearLayout>

  • 결과는 이전과 같지만 훨씬 더 유지보수가 쉽고 실무에 자주 쓰는 코드가 되었다.

이미지뷰

  • 이미지는 화면에 이미지를 출력해주는 뷰이다.

이미지를 리소스에 추가하기

  • 원하는 이미지를 [res]->[drawable]에 드래그 앤 드롭 후 refactor 클릭
  • [app]->[res]->[layout]->[new]->[layout resource file]->sample_imageview 생성
  • xml 코드를 다음과 같이 수정
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/sample_image"/>

</LinearLayout>

이미지뷰 비율 조정하기: Scale Type

  • 사용할 이미지의 비율이 이미지뷰의 비율과 같다면 비율을 조정할 필요가 없음. 하지만 현실에서는 그렇지 않은 경우가 많기 때문에 scaleType 속성으로 비율을 조정한다.

  • fitCenter: ScaleType의 기본값이므로, 아무 속성도 지정하지 않으면 이미지뷰에 fitCenter가 적용됨. 여백이 어디 생기냐의 문제이지 원본 사진의 비율을 그대로 유지된다.
  • fitXY: 이미지를 이미지뷰 크기에 맞춰준다. fitXY 속성은 스케일을 키우거나 줄여 이미지뷰를 꽉 채우기 때문에 이미지 비율이 원본과 같지 않을 수 있다.
  • center: 이미지가 커지거나 작아지지 않고 원본 이미지를 그대로 이미지뷰에 보여준다. 이미지 원본이 이미지뷰보다 훨씬 크기 때문에 사진이 중앙을 기준으로 잘린다.
  • centerCrop: 이미지뷰 안에 이미지를 넣고 가로, 세로 비율을 유지해 확대/축소 후 가로와 세로 중 어느 곳이 먼저 이미지뷰의 경계선과 닿는지 확인한다. 예를 들어 큰 이미지를 축소할 때는 경계에 먼저 닿지 않는 쪽의 튀어나온 부분을 잘라준다. fitCenter는 이미지 비율을 맞추느라 좌우로 여백이 생겼지만 centerCrop은 이미지 비율을 유지해 확대하면서, 이미지 뷰를 벗어난 부분을 잘라냈다.

버튼

  • 텍스트뷰와 이미지뷰가 사용자에게 보여주는 용도라면, 버튼은 사용자의 행동을 유도하는 용도이다. 버튼은 기본적으로 텍스트뷰를 상속하고 있기 때문에 텍스트뷰에서 사용하는 속성(텍스트 색깔, 크기, 스타일 등)과 기능 대부분을 그대로 사용할 수 있다.
  • [app]->[res]->[layout]->[new]->[layout resource file]->sample_button 파일 생성
  • xml 코드를 다음과 같이 작성
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="클릭 해주세요"
        android:textColor="#000000"
        android:textSize="20sp"/>

</LinearLayout>

에디트텍스트

  • 앱에 로그인할 때 이메일과 비밀번호를 입력했던 뷰가 에디트텍스트이다. 사용자의 입력을 받는 뷰이기 때문에 앱을 만들 때 빈번하게 쓰인다. 에디트텍스트 역시 버튼처럼 텍스트뷰를 상속하고 있어서 텍스트뷰의 속성과 기능을 사용할 수 있다.
  • 패딩과 마진을 각각 10dp씩 주고 에디트텍스트를 만들어본다.
  • sample_edittext 파일을 만들고 xml 코드를 다음과 같이 작성한다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Hello World라고 입력해주세요."
        android:padding="10dp"
        android:layout_margin="10dp"/>

</LinearLayout>

에디트텍스트의 다양한 속성: 비밀번호, 전화번호, 이메일, 날짜

  • inputType 속성을 사용해 에디트텍스트에 들어갈 유형과 텍스트 입력기 형태 등을 결정할 수 있다. inputType 속성에서 자주 쓰는 값으로 textPassword, phone, textEmailAddress, datetime을 들 수 있다.
profile
손현수
안녕하세요.
이전 포스트

코틀린 4장

다음 포스트

코틀린 6장

0개의 댓글