안드로이드 앱 프로그래밍

정재곤

http://www.boostcourse.org/mo316/notice/2614

부스트코스 관리자 2020.03.16

아래의 글은 BOOSTER 서포터즈로 활동했던 김구라니(rbfks1***)님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/rbfks1221/221810654986

2)작성날짜: 20/02/16

<본문내용>

1. 레이아웃 만들기

8. 드로어블 만들기

[부스트코스] 안드로이드 프로그래밍

2) 쉐이프 드로어블

[LECTURE] 2) 쉐이프 드로어블 : edwith

들어가기 전에 쉐이프 드로어블을 사용하면 XML을 이용해 도형을 그릴 수 있습니다. 도형을 그리려면 원래 소스 코드에서 캔버스(Canvas)라는 객체를 이용해야 하지만 쉐이프 드로... - 부스트코스

www.edwith.org

들어가기 전에

쉐이프 드로어블을 사용하면 XML을 이용해 도형을 그릴 수 있습니다.

도형을 그리려면 원래 소스 코드에서 캔버스(Canvas)라는 객체를 이용해야 하지만 쉐이프 드로어블을 사용하면 소스 코드 없이 도형을 그려 보여줄 수 있으니 여러 가지 장점이 생기게 됩니다.

쉐이프 드로어블을 어떻게 만들 수 있는지 알아봅시다.

학습 목표

1) 쉐이프 드로어블이 무엇인지 이해하고 XML로 만들어봅시다.

2) 쉐이프 드로어블을 이용해 어떤 도형들을 보여줄 수 있는지 설명해봅시다.

핵심 단어

· 드로어블

· ShapeDrawable

학습하기

쉐이프 드로어블(ShpaeDrawable) 이란?

쉐이프(Shape)란, 도형을 뜻하는 단어죠?

따라서 쉐이프 드로어블은 XML로 도형을 그릴 수 있는 드로어블이랍니다!

/res/drawable 폴더 안에 Drawable resource file을 만들고,

최상위 태그를 <shape>로 바꾸면 도형을 정의할 수 있어요!

쉐이프 드로어블(ShapeDrawable)의 속성

<shape> 태그 안에는 어떤 속성을 추가할 수 있을까요?

바로, shape 속성이 들어갈 수 있어요.

rectangle로 설정하면 직사각형, oval로 설정하면 타원, line으로 설정하면 선, ring으로 설정하면 고리 모양으로 그릴 수 있답니다!

도형의 테두리 선에 대해 굵기나 색상을 지정할 수도 있고 도형을 채우는 색상을 지정할 수도 있는데요!

<shape> 태그 안에 <stroke> 태그를 넣어서 테두리 선의 속성을 지정할 수 있습니다.

또 그 안에는 선의 굵기를 설정하는 width 속성, 선의 색상을 설정하는 color 속성을 추가할 수 있어요.

<shape> 태그 안에는 <solid> 태그도 넣을 수 있는데요!

<solid> 태그는 도형의 안쪽을 채울 때 사용합니다.

그렇다면 배경에 그라데이션을 줄 수 있는 방법이 있을까요?

바로, <gradient> 태그를 사용하면 가능하답니다!

<shape> 태그 안에 <gradient> 태그를 넣으면 그러데이션이 만들어지게 됩니다.

startColor 속성으로 시작 부분의 색상, centerColor 속성으로 가운데 부분의 색상, endColor 속성으로 끝부분의 색상을 지정할 수 있습니다.

위쪽에서부터 아래쪽으로 내려오면서 색상이 바뀌는 모양이 되는 거죠!

테두리만 있는 버튼 배경

<layer-list> 태그를 사용하면 여러 그래픽을 하나의 XML 파일에 넣을 수 있습니다.

<layout-list> 태그 안에는 <item> 태그가 여러 개 들어갈 수 있어요!

또, <item> 태그 안에는 <shape> 태그가 들어갈 수 있으니 각각을 도형으로 정의할 수도 있겠죠?

만약 버튼의 테두리만 보이게 하는 드로어블을 만들고 싶다면 어떻게 해야 할까요?

바로, 도형 안쪽을 투명하게 채우고 테두리 선만 색상을 주면 됩니다!

2개의 그래픽을 중첩시킨 모습

조금만 더 생각해보면, 이것을 두 개의 그래픽으로 정의할 수도 있겠죠?

하나의 그래픽으로 정의할 것인지, 여러 개의 그래픽으로 정의할 것인지는 선택의 문제이지만 여러 개의 그래픽으로 나누면 그래픽을 중첩시켜서 좀 더 예쁜 배경을 만들 수 있답니다!

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#BE55DA" /> <solid android:color="#00000000" /> </shape> </item> <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp"> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#BE55DA" /> <solid android:color="#00000000" /> </shape> </item> </layer-list>

생각해보기

1. 버튼의 테두리를 쉐이프 드로어블로 만들어 사용하면 포토샵으로 디자인한 버튼 배경 이미지를 사용하는 것에 비해 어떤 장점이 생길까요?

먼저, 별도의 툴로 디자인한 이미지를 배경으로 쓸 때 보다 수정이 편리해질 거예요.

그리고 버튼의 크기가 늘어나면 이미지 배경은 깨질 수도 있는데요. 이런 문제점을 방지할 수 있습니다!

2. 여러 종류의 쉐이프 드로어블을 만들고 그중 하나를 화면에 들어있는 버튼들의 배경으로 설정할 수 있습니다. 이 상태에서 사용자가 여러 종류 중 하나를 선택하면 화면에 있는 모든 버튼의 배경을 바꾸도록 만들 수 있을까요? 이렇게 하면 버튼의 배경 스타일을 한꺼번에 바꾸는 효과가 있을까요?

네. 가능합니다!

버튼에 클릭 리스너를 달고 클릭 이벤트가 발생했을 때 모든 버튼들의 배경을 바꾸도록 구현하면 가능할 것 같아요!

이렇게 안드로이드 프로그래밍 첫 번째 프로젝트의 모든 강좌들을 살펴봤는데요.

다음 포스팅에서는 부스트코스 코드 리뷰를 받는 방법과 두 번째 프로젝트의 강좌 중 테이블 레이아웃에 대해 알아보도록 할게요!

[출처] [부스트코스 / 안드로이드 프로그래밍 / part 6-2] 쉐이프 드로어블|작성자 김구라니

*********************************************