[안드로이드] 웹툰 바로가기 어플 - RelativeLayout, ImageButton

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

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

· 작성/수정내용 :

  - 작성/수정 내용

     RelativeLayout와 ImageButton 을 이용하여 버튼을 이쁘게 꾸며보기

---

시작하기에 앞서...

아이꾸 추워~ 모두 감기 조심하세요~

# 안드로이드 웹툰 바로가기 어플 - ImageButton, RelativeLayout

앱스토어에서 앱을 다운받아 보면 뭔가가 이쁘고 구성이 잘 되어 있습니다.

그런데 지난번 포스팅에서 제가 만든 어플은 밋밋한 회색 바탕의 딱딱한 네모 반듯한 사각형 버튼 이었죠

그래서 조금 이라도 이쁘게 꾸며볼까해서 이번에는 버튼을 이미지 형식으로 바꿔 볼까 합니다.

버튼을 만드는 방법은 여러 가지가 있습니다.

그냥 텍스트를 버튼으로 만들수도 있고, 진짜 버튼 모양을 만들어 버튼을 만들수도 있죠(지난번 처럼요)

그리고 이미지를 버튼으로 만들 수도 있습니다.

이미지를 이용한 버튼을 만들때 2가지 방식으로 만들 수 있을거 같네요

Button위에 이미지를 씌우는 방법과 ImageView 를 이용해 만드는 방법.

이번 포스팅에서는 버튼에 이미지를 씌우는 방법을 사용해 볼까 합니다.

그리고 다음 포스팅에서 ImageView를 사용해 보도록 할께요.

차근차근~ 단계단계~ 진행해 보자구요~ ㅎㅎ

완성된 어플의 모양은 위에 보셨던 화면과 같습니다.

그런데 자세히 보면 'DAUM'과 'NAVER' 이라는 텍스트도 이번에 추가가 되었네요

따라서 이번 포스팅에서는 지난번 화면구성 포스팅에 이어서 조금더 복잡하게 화면을 구성하는 방법도 알아 볼까 합니다.

(사실은 단순한 구성인데 말이죠... ㅜㅜ)

이번 포스팅에서 공부할 내용들 입니다.

• ImageButton
• RelativeLayout

1. ImageButton

  

먼저 아래 그림처럼 버튼에 이미지를 올려 볼까합니다.

전 그냥 인터넷에서 화면을 캡쳐해서 아이콘 이미지를 만들었습니다.

포토샵등으로 약간의 편집 과정을 거쳤구요

(여러분은 맘에 드는 아이콘을 다운받아 사용하시면 됩니다~)

이번에도 일단 소스 먼저 보도록 할께요~

activity_main.xml

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn_daum_webtoon"
    android:onClick="onClick"
    android:src="@drawable/daum_icon"
    android:background="#FFFFFF"
    android:padding="10dp"
    />
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn_naver_webtoon"
    android:onClick="onClick"
    android:src="@drawable/naver_icon"
    android:background="#FFFFFF"
    android:padding="10dp"
    android:layout_toRightOf="@id/btn_daum_webtoon"
    />

지난번 Button 소스와 비교해 보았을때 가장큰 변화는 View 이름이 <Button> 이 <ImageButton>으로 바뀐것과

src 속성이 추가 되었다는 것 정도 이겠지요

이미지를 버튼으로 사용한 것이니 글자는 필요 없어서 text 속성도 빠졌구요.

src 속성은 이미지가 들어 있는 주소를 말합니다.

윈도우 탐색기에서 보면 아래 그림과 같습니다.

호출하는 방법은 다른 리소스들을 참조 하는 방법과 같습니다.

  @폴더명/파일명  (확장자 붙이지 않음)

이렇게 하면 단순히 그 딱딱해 보이는 회색 사각형이 이쁜 이미지로 바뀌게 됩니다.

그런데... 모양은 달라도 둘다 'WEBTOON' 이라고 써있어서

어느 웹툰 서비스 인지 알 수가 없습니다.

그래서 보통 이럴때 레이블을 달아 줍니다.

우리 완성된 모양의 화면과 같이 말이죠.

레이블을 달기 위해 또 TextView를 씁니다.

하지만 어떻게 써야 하나요???

여기서 또 구조적 배치에 대한 문제에 봉착하게 됩니다.

첫번째 포스팅에서 화면을 구성하기 위해 'LinearLayout'를 2번 사용한 것을 기억하지죠?

기억 나지 않으시면 아래 포스팅 잠시 보고 오고올께요~

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

그런데 기존의 화면 구성에 추가로 Horizontal 배열 형식의 Layout를 사용하면 뭔가 위치가 어정쩡하게 나옵니다.

그래서 이번 포스팅에서는 다른 LayoutGroup를 써서 화면구성을 바꿔 보도록 하겠습니다.

(LinearLayout 로도 충분히 위와 같은 화면을 구성할 수 있지만 다른 것들도 공부 해보자구요~~~)

2. RelativeLayout

LinearLayout은 부모Layout 지정에 따른 가로/세로 정렬 방식의 Layout 였다면

RelativeLayout은 이름에서 알 수 있듯이 '무엇'인가의 관계에 의한 배열 방식 입니다.

그 '무엇'이 배열하는 위젯과 부모 레이아웃 이란것도 짐작 할 수 있습니다.

RelativeLayout는 기준이 되는 1개의 위젯으로 부터 시작해 각 구성요소들을 위치 시킵니다.

RelativeLayout에 대해서는 다음 포스팅에 자세하게 정리해 보겠습니다.

여기서는 저렇게 배치 시키는 방법만 알아 볼께요~

역시 소스먼저 보겠습니다.

activity_main.xml

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_daum_webtoon"
            android:onClick="onClick"
            android:src="@drawable/daum_icon"
            android:background="#FFFFFF"
            android:padding="10dp"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_naver_webtoon"
            android:onClick="onClick"
            android:src="@drawable/naver_icon"
            android:background="#FFFFFF"
            android:padding="10dp"
            android:layout_toRightOf="@id/btn_daum_webtoon"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/daum_Webtoon"
            android:gravity="center"
            android:layout_below="@id/btn_daum_webtoon"
            android:layout_alignLeft="@id/btn_daum_webtoon"
            android:layout_alignRight="@id/btn_daum_webtoon"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/naver_Webtoon"
            android:gravity="center"
            android:layout_below="@id/btn_naver_webtoon"
            android:layout_alignRight="@id/btn_naver_webtoon"
            android:layout_alignLeft="@id/btn_naver_webtoon"
            />
</RelativeLayout>

activity_main.xml 에서 2번째 LinearLayout 부분을 위 소스로 모두 변경하였습니다.

그리고 RelativeLayout 안의 위젯들을 가운데 위치 시키기 위해

gravity 속성을 center 로 주었습니다.

그 다음, 기준이 되는 위젯으로

'다음 웹툰 버튼'으로 가장 먼저 배열 시켜줍니다.

'네이버 웹툰 버튼'은 '다음 웹툰 버튼'의 오른쪽에 위치 시키기 위해 아래와 같이 속성을 추가 하였습니다.

android:layout_toRightOf="@id/btn_daum_webtoon"

아이콘 2개를 일열로 나열하는 것은 어렵지 않았습니다.

그런데 여기에 레이블을 달면서 복잡해 지기 시작하더군요

우선 'DAUM' 이라는 글자의 위치 부터 설정해 보겠습니다.

'DAUM' 이라는 레이블은 '다음 웹툰 버튼' 아래쪽에 위치 하면서

아이콘의 가로길이의 중앙에 위치 시키려고 합니다.

(왼쪽 정렬처럼 앞쪽에 가서 붙어 있으면 안이쁘니까요 ㅎㅎ)

문제는 TextView의 가로 길이를 wrap_content로 지정하여 

아이콘의 가로 길이 보다 레이블의 가로 길이가 짧아 

아이콘의 가운데에 글자를 정렬 시키기 어렵다는 것이었죠.

어떻게든 레이블의 가로 길이를 넓혀 주어야 했습니다.

(뭐.... 아이콘의 가로 길이를 알아내어 레이블의 가로 길이를 고정으로 정해주면 아주 쉽겠지만요

 그렇게 하면 아이콘 크기가 바뀌는 등의 여러 상황에 대처하기 힘들어집니다.)

다행히 RelativeLayout 는 상당한 유연성을 제공합니다.

우선은 레이블을 '다음 웹툰 아이콘'의 아래에 위치 시킵니다.

android:layout_below="@id/btn_daum_webtoon"

그리고 레이블의 왼쪽 끝을 '다음 웹툰 아이콘'의 왼쪽과 일치 시킵니다.

android:layout_alignLeft="@id/btn_daum_webtoon"

마지막으로 레이블의 오른쪽 끝을 '다음 웹툰 아이콘'의 오른쪽 부분과 일치 시킵니다.

android:layout_alignRight="@id/btn_daum_webtoon"

역시나 속성명은 너무 직관적이어서 따로 설명이 필요 없죠?? ㅎㅎ

이렇게 하면 레이블이 알아서 '다음 웹툰 아이콘'의 가로 길이 만큼 쭉~ 늘어나게 됩니다.

그리고 여기에 글자를 가운데 정렬하기 위해 gravity속성에 center 값을 넣어 주면 되는 것이죠

'네이버 웹툰 바로가기' 레이블도 똑같은 방법으로 속성을 설정해 줍니다.

다만 기준 위젯이 '네이버 웹툰 버튼'이 되겠죠

여러분도 잘 되시나요????

잘 될겁니다. ㅎㅎㅎㅎ

휴~ 이제 그나마 조금 이쁜 어플이 되었네요~ ㅎㅎㅎㅎㅎㅎ

RelativeLayout 에는 위와 같은 속성들이 상당히 많습니다.

그래서 다음 포스팅에서 따로 해당 속성들에 대해서 알아 보려고 합니다.

열심히 공부해서 다음 포스팅 또 하겠습니다 ㅎㅎㅎㅎ