[DSC] 안드로이드 스튜디오와 친해지기 2

DSC 2기 App Session 1주차_2

 

[Android] - [DSC] 안드로이드 스튜디오와 친해지기

[DSC] 안드로이드 스튜디오와 친해지기

이전 포스트에 이어서 계속 진행하겠습니다.

 

6. View 익히기

뷰(View)는 일반적으로 컨트롤이나 위젯으로 불리는 UI 구성요소입니다. 사용자의 눈에 보이는 화면의 구성 요소이죠.

이 뷰를 여러 개 포함하는 것을 뷰그룹(ViewGroup)이라고 합니다. 뷰그룹 안에서는 뷰의 위치를 지정할 수 있습니다.

그리고 뷰그룹 안에 뷰그룹을 넣을 수도 있어 장점이 많이 생깁니다. 덕분에 뷰그룹은 뷰를 상속해서 뷰그룹도 뷰처럼 다룰 수 있습니다. 예를 들어 버튼은 텍스트뷰를 상속받았기 때문에 텍스트뷰의 속성을 모두 가지고 있습니다.

 

안드로이드는 뷰와 뷰그룹의 역할을 구분하기 위해 뷰의 종류에 따라 다른 이름으로 부르기도 합니다.

위젯(Widget) : 뷰 중에서 일반적인 컨트롤의 역할

레이아웃(Layout) : 뷰그룹 중에서 내부에 뷰들을 포함하고 있으면서 그것들을 배치하는 역할

 

뷰의 크기 속성

layout_width : 뷰의 가로길이이며 필수적으로 입력해야 합니다.

layout_height : 뷰의 세로 길이이며 필수적으로 입력해야 합니다.

 

뷰의 속성을 이해하기 위해서는 LinearLayout이 편하기 때문에 activity_main.xml 파일에서 Component Tree의 ConstraintLayout을 Convert view하여 LinearLayout으로 바꿔주겠습니다.

그리고 버튼을 하나만 남겨놓겠습니다.

 

제 화면과 동일하게 나타나나요?

 

여기서 버튼의 Attributes를 보시면

width와 height 모두 wrap_content 임을 알 수 있습니다. 이게 기본값인데 버튼의 내용물의 양만큼 크기가 커질 수 있습니다.

두 속성 모두 match_parent로 바꾸면

버튼이 폰 화면의 크기만큼 바뀐 것을 볼 수 있습니다.

크기를 숫자로도 지정할 수 있습니다.

여기서 100dp라고 입력해주시면 100dp의 크기만큼 버튼의 크기가 결정됩니다.

숫자로 크기를 정하려면 단위를 사용해서 지정해야 합니다. dp도 여러 단위 중 하나입니다. 일반적으로 단말마다 해상도나 화면의 크기가 다르기 때문에 wrap_content나 match_parent를 사용하여 전체 화면을 기준으로 뷰를 배치할 수 있습니다. 하지만 크기를 직접 지정할 때도 px가 아닌 dp나 sp 단위를 사용하면 해상도가 다른 단말에서도 뷰의 크기를 비슷하게 보이도록 만들 수 있습니다.

 

단위
px (픽셀) : 화면 픽셀의 수
dp 또는 dip (밀도 독립적 픽셀) : 160dpi 화면을 기준으로 한 픽셀
즉 해상도가 160dpi인 작은 화면에서는 20픽셀이던 버튼 크기를 320dpi인 약간 큰 화면에서는 40픽셀의 크기로 보이게 합니다.
sp 또는 sip (축척 독립적 픽셀) : 텍스트 크기를 지정할 때 사용하는 단위. dp와 유사하나 글꼴의 설정에 따라 1sp당 픽셀 수가 달라짐.
in (인치) : 1인치로 된 물리적 길이
mm (밀리미터) : 1밀리미터로 된 물리적 길이
ems (텍스트 크기) : 글꼴과 상관없이 동일한 텍스트 크기 표시

 

보통 뷰에는 dp, 글자 크기는 sp 단위를 주로 사용합니다.

 

뷰의 마진(margin) 속성

margin 속성은 뷰로부터 주변을 얼마나 떨어뜨릴지 지정할 수 있습니다.

 

위 사진은 위쪽과 왼쪽으로부터 100dp씩 margin을 준 화면입니다.

 

7. 레이아웃(Layout) 익히기

 

1) 제약 레이아웃(ConstraintLayout)

 제약 레이아웃은 안드로이드 스튜디오에서 자동으로 설정해주는 기본 레이아웃입니다.

제약 레이아웃의 가장 큰 특징은 뷰의 크기와 위치를 결정할 때 제약 조건(Constraint)을 사용해 화면을 구성한다는 것입니다.

 

[Android] - 안드로이드 스튜디오 제약 레이아웃(ConstraintLayout)

안드로이드 스튜디오 제약 레이아웃(ConstraintLayout)

2) 리니어 레이아웃(LinearLayout)

 리니어 레이아웃은 뷰가 차지할 수 있는 사각형 영역을 할당한 후, 한쪽 방향으로 차례대로 뷰를 추가하면서 화면을 구성하는 레이아웃입니다. 가장 많이 사용하는 레이아웃입니다.

 

[Android] - 안드로이드 스튜디오 리니어 레이아웃(LinearLayout)

안드로이드 스튜디오 리니어 레이아웃(LinearLayout)

3) 상대 레이아웃(RelativeLayout)

 상대 레이아웃은 부모 컨테이너나 다른 뷰와의 상대적 위치로 화면을 구성합니다. 상대 레이아웃의 특성을 모두 가지고 더 많은 기능을 제공하는 제약 레이아웃이 생기면서 상대 레이아웃은 주로 권장하지는 않습니다. 하지만 단순하고 이해하기 쉽기 때문에 아직 많이 사용합니다.

 

4) 프레임 레이아웃(FrameLayout)

 프레임 레이아웃은 가장 상위에 있는 하나의 뷰 또는 뷰그룹만 보여줍니다. 여러 개의 뷰가 존재한다면 중첩하여 쌓이게 되는데 각 뷰를 전환하여 보여주는 방식으로 자주 사용합니다.

 

5) 테이블 레이아웃(TableLayout)

 테이블 레이아웃은 격자 모양의 배열을 사용하여 화면을 구성합니다. HTML에서 사용하는 정렬 방식과 유사하지만 많이 사용하지는 않습니다.

 

6) 스크롤뷰(ScrollView)

 스크롤뷰는 레이아웃은 아니지만 뷰그룹의 역할을 합니다. 스크롤뷰의 내부에는 하나의 뷰 또는 뷰그룹만 넣을 수 있고 해당 뷰의 내용물이 화면보다 많아지게 되면 스크롤을 자동으로 만들어줍니다.

 

이렇게 만드는 경우는 없겠지만 예시를 위해 TextView를 16개를 만들어보았습니다.

 

스크롤뷰를 쓰지 않았다면 이렇게 보이는 게 전부였겠지만

 

스크롤뷰 덕분에 16까지 모두 볼 수 있게 되었습니다.

 

뷰의 영역 익히기

뷰에는 보이지 않는 테두리(Border)가 존재합니다. 이것을 흔히 뷰의 영역(Box)라고 하는데 테두리를 기준으로 바깥쪽과 안쪽 공간이 있습니다. 바깥쪽 공간을 마진(Margin), 안쪽 공간을 패딩(Padding)이라고 합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:layout_margin="100dp"
        android:padding="50dp"/>
</LinearLayout>

 위와 같이 xml 파일을 작성하게 되면 버튼의 바깥쪽은 100dp만큼 떨어지게 되고 버튼의 안쪽에는 50dp만큼의 공간이 생기게 됩니다.

 

이외의 속성들

<?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:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:background="#000000" />
</LinearLayout>

android:textSize : 텍스트의 크기를 설정할 수 있습니다.

android:textColor : 텍스트의 색을 설정할 수 있습니다.

  #000000 : 검은색

  #FFFFFF : 흰색

그리고 왼쪽에 색상을 클릭해주시면 다른 색도 설정하실 수 있습니다.

 

 

 

android:textStyle : 텍스트의 스타일을 설정할 수 있습니다.

  normal: 기본

  bold: 굵게

  italic: 기울임

 

android:background : 뷰의 배경을 설정할 수 있습니다. 색깔을 정할 수도 있고 사진으로도 변경 가능합니다.

<?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:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="20sp"
        android:textColor="#FF0000"
        android:textStyle="italic"
        android:background="@mipmap/ic_launcher" />
</LinearLayout>

background의 @mipmap은 안드로이드 스튜디오의 폴더 이름입니다.

 

res/mipmap/ic_launcher의 사진을 갖고 온 것입니다.