안드로이드 웹툰 바로가기 어플 - 화면구성 하기

· 최초작성 : 2015. 10. 02.

· 최종수정 : 2015. 10. 05.

· 작성/수정내용 :

  - LinearLayout, TextView, Button 에 대해 정리

---

시작하기에 앞서...

이전 포스팅에서 예고 했던 데로 최대한 간단하고 심플한 앱을 만들어 보려고 합니다.

그 첫 번째로 '웹툰 바로가기' 앱 입니다.

최대한 간단히 정리해서 쓰려고 했는데…. 어렵네요… 주저리 주저리…

그리고 생각했던거 보다 뭔가 많이 복잡해 진거 같기도 하구요…

제 포스팅 내용이 틀리거나 더 나은 방법이 있으면 뎃글이나 메일 주세요

최대한 빨리 바로 적용해 보고 내용 공유하도록 하겠습니다~

# 안드로이드 웹툰 바로기가 앱 만들기 - '화면구성' 편 

화면은 아래 그림 처럼 구성할 계획입니다.

(혹시 더 즐겨보시는 웹툰이 있으시면 변경이나, 버튼을 추가 하시면 됩니다.)

 

이 화면을 구성하기 위해서는 몇 가지 알아야 할 것이 있습니다.

Layout, TextView, Button, Activity, Intent 등이죠

 

하지만 이번 포스팅에서는 화면 구성까지만 합니다.

Layout, TextView, Button 까지만 공부해 보려고 합니다.

우리가 만들고자 하는 가장 기초적인 '웹툰 바로기가 앱' 화면 입니다.

1. 레이아웃(Layout)

안드로이드에서는 크게 4가지 타입의 Layout을 지원 합니다.

• LinearLayout

• RelativeLayout

• TableLayout

• FrameLayout
  

이 중에서 우리가 사용할 Layout은 LinearLayout 입니다.

아마도 RelativeLayout 와 더블아 가장 많이 사용되는 Layout이 아닐까 생각 됩니다.

아래 그림과 같이 2개의 LinearLayout 를 사용하여 큰 틀을 잡습니다.

정말 간단하죠?

그럼 이제 소스를 보시죠.

눈도 어지럽히고, 머리 아프게 하는 속성들을 파고들기 보다는 먼저 소스 한 번 봅시다.

백문이불여일타!!! 라고 누군가 말했죠~

위 그림과 같이 구성 하려면 아래와 같이 activity_main.xml을 아래와 같이 수정하면 됩니다.

<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"   android:paddingLeft="16dp"   android:paddingRight="16dp "   android:paddingTop="16dp"   android:paddingBottom="16dp"   tools:context=".MainActivity"   android:orientation="vertical"   android:gravity="center">   <LinearLayout     android:orientation="horizontal"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:gravity="center"     android:padding="10dp">   </LinearLayout> </LinearLayout>

layout_width 는 가로, layout_height 는 세로, padding 들은 여백에 대한 것… 참 직관적으로 나와 있습니다.

여기에 사용된 속성과 속성값들은 상당히 자주 사용되는 것들이니 기억해 둡시다.

속성	속성값	설명
layout_width  layout_height	wrap_content	컨텐츠 내용에 맞춤
	fill_parent	상위 layout의 크기에 맞춤
	match_parent	상위 layout의 크기에 맞춤 (권장)
orientation	vertical	layout 내부 정렬을 세로로
	horizontal	layout 내부 정렬을 가로로
gravity	left	왼쪽정렬
	right	오른쪽 정렬
	center	가운데 정렬

• layout_width 와 layout_height는 가로와 세로의 크기를 설정하는 속성입니다.

    그런데 속성값을 보니까 fill_parent와 match_parent는 하는일이 같네요.

    하지만 fill_parent 보다는 match_parent를 사용하길 권장하고 있습니다.

    이유는 부모 레이아웃에 padding가 설정 되어 있을 경우,

    하위 레이아웃은 부모 레이아웃 padding영역을 제외한 만큼 사용하게 되는데

    어감상 fill은 모두를 사용하게 하는 것 처럼 보이기 때문에 API 8. 이후로는 match를 사용하라고 하네요

    그게 더 직관적이라고… (제 눈에는 비슷한데요…) 암튼 권장사항대로 match_parent 를 사용합니다.

 

• Orientation 속성은 레이아웃 안에 들어가는 뷰 또는 레이아웃들의 배열을 지정합니다.

 

• Gravity는 속성은 해당 레이아웃 안의 뷰 또는 레이아웃들의 정열을 지정합니다.

    Gravity는 위에 써놓은 값 이외에도 Center_horizontal, center_vertical 등의 속성값들이 몇 가지 더 있습니다.

    이 속성값들에 대해서는 나중에 시간이 되면 다시 업데이트 하도록 하겠습니다.

    (제가 아직 공부가 부족하네요…ㅜㅜ)

    Gravity 속성은 여러 개 값을 중복 적용 시킬 수 있습니다.

    예를 들면 android:gravity="center_horizontal|Center_vertical" 과 같이 | 를 사용하여

    속성을 중첩 시킬 수 있습니다. 방금전의 효과는 android:gravity="center" 같은 효과를 주겠네요. 화면 한가운데로

    정렬하는 것입니다.

 

그리고 간단히 소스에 대해 설명을 덧붙이자면

 

Layout 는 어플리케이션의 큰 틀을 잡아 주는 역할을 합니다.

구조적으로 더욱 짜임새 있는 틀을 구성하기 위해서는 단일 layout 만으로는 구성이 불가능 합니다.

따라서 안드로이드 layout 에서는 layout 안에 다른 layout 를 사용할 수 있도록 하여

이러한 문제를 해결 할 수 있습니다.

Layout 안에는 layout 뿐만 아니라 view 도 담을 수 있습니다.

웹툰 바로기가 어플에서는 LinearLayout 를 2개 사용하여 뷰들을 원하는 위치에 배치 하였습니다.

 

우선 첫번째 LinearLayout 를 보면 orientation 속성이 vertical (세로) 속성인것을 알 수 있습니다.

이 layout 안에 있는 모든 오브젝트들을 세로로 배열 하겠다는 의미 입니다.

하지만 저희는 버튼들을 가로로 배열 하려고 합니다.

따라서 1번 레이아웃 안에 2번 레이아웃을 만들고 배열 상태를 가로로 설정하여 줍니다.

그러면 2번 레이아웃 안에 있는 오브젝트들은 가로로 배열이 될테니까요 ㅎㅎ

 

그리고 1번 레이아웃 안에 있는 모든 오브젝트들을 정 중앙에 배치하기 위해

Gravity 속성을 center 속성을 줬습니다.

  

2. TextView

보통 '레이블'이라고 많이 부릅니다. 텍스트를 보여주기 위해 많이 사용됩니다.

소스를 보면 TextView 속성 역시 상당히 직관적인 이름들이 많습니다.

<TextView
    android:text="@string/txt_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/txt_title"
    android:textSize="25dp"
    android:textStyle="bold"
    />

TextView 는 특별히 어려울게 없습니다. 별도의 설명이 필요 없을거 같네요

여기서는 간단히 한가지만 더 보고 넘어갈께요

저희 앱에서는 화면에 크게 'WEBTOON" 이라고 써있습니다.

하지만 위 소스에서 보면 어디에도 'WEBTOON' 이라고 써있지 않습니다.

이유는 앱에 정의되어 있는 Text들에 대해서 레이아웃 xml 에 정의를 한 것이 아니고

이런 부분들만 따로 모아 놓은 resource 폴더에서 따로 정의를 해놓기 때문입니다.

경로는 아래 그림과 같습니다.

제 strings.xml 파일을 열어 보면 아래와 같이 기술 되어 있습니다.

<resources>
    <string name="app_name">Webtoon</string>

    <string name="txt_title">WEB TOON</string>
    <string name="action_settings">Settings</string>
</resources>

그리고 버튼에 관련된 정의도 추가해 줘야 겠죠.

웹툰 바로가기 같은 간단한 프로그램에서 꼭 이렇게까지 관리할 필요는 없습니다.

3. Button

Button 뷰도 크게 어려운 부분은 없습니다.

TextView 와 비교해서 많이 다른 부분이 없지지요.

여기서는 버튼 역활을 해줄 수 있는 다른 속성을 추가 하였습니다.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn_daum_webtoon"
    android:onClick="onClick"
    android:text="@string/daum_Webtoon"
    android:width="150dp"
    android:textStyle="bold"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn_naver_webtoon"
    android:onClick="onClick"
    android:text="@string/naver_Webtoon"
    android:width="150dp"
    android:textStyle="bold"
    />

소스 중간에 보면 onClick 속성이 있습니다.

이 속성 뒤에 클릭 시 호출할 함수명을 적어 주면 됩니다.

전 "onClick" 라는 함수를 호출하려고 합니다.

버튼의 클릭 이벤트를 정의하는 방법은 여러가지가 있더군요

나머지 방법들은 다른 포스트에서 다시 정리해 보도록 하겠습니다.

그리고 TextView 와 같이 text 속성값을 resource 에서 얻어 오도록 했습니다.

따라서 strings.xml에 버튼 이름에 해당하는 값을 추가해 줘야 겠지요? ㅎㅎ

<string name="daum_Webtoon">DAUM</string>
<string name="naver_Webtoon">NAVER</string>

이렇게 하면 제가 원하던 첫 초기 화면이 완성이 됩니다~

다음 포스팅에서는 액티비티와 인텐트에대해서 정리해 볼께요~

그리고 프로그램이 실행되도록 해보도록 하겠습니다!