[Android] chapter 1 - 8 드로어블 만들기

 

 

 

boostcourse 안드로이드 앱 프로그래밍

1. 레이아웃 만들기

- 8 드로어블 만들기

- (1) 상태 드로어블

 

 

 

드로어블 (Drawable)

: 뷰에 설정할 수 있는 객체

- xml로 지정하여 화면에 그래픽으로 그릴 수 있음

 

- res/drawable 폴더에 이미지 추가 한 것과 같이 xml 파일 생성하여 그래픽 관련 정보 넣을 수 있음

    - 비트맵 드로어블 (Bitmap Drawable)

        - 이미지 파일을 보여줄 때 사용하는 드로어블

        - 이미지 파일을 xml 파일에 넣어 파일을 어떻게 보여줄지 지정

    - 상태 드로어블 (StateList Drawable)

        - 상태별로 다른 그래픽 참조할 수 있는 드로어블

        - 가장 많이 사용되는 드로어블

    - 전환 드로어블 (Transition Drawable)

        - 두 개의 드로어블 간에 바뀌도록 만들 수 있는 드로어블

    - 쉐이프 드로어블 (Shape Drawable)

        - 색상과 그라데이션 포함한 도형 모양을 정의할 수 있는 드로어블

        - 직접 모양을 그릴 수 있음

 

---

 

상태 드로어블 (StateList Drawable)

 

 

- 실습 코드 <StateList Drawable>

    - 가운데에 버튼 추가하고 text 제거

 

    - res/drawable 폴더에 하얀 thumb와 칠해진 thumb 파일 추가

    - button의 background에 칠해진 thumb 파일 선택

엄지가 퍼져 있는 것을 확인하여 button size 조정

 

내가 생각했던 엄지 이미지 등장

     ** 실행해보아도 버튼이 눌렸을 때를 확인하기 어려움

 

    - 동작 시 어떻게 되는지 구현하기 위해 xml 파일 추가

 

    - 눌린 상태일 때 selected 이미지, 아닌 경우에는 그냥 엄지척 이미지를 보여주도록 코드 작성

 

    ** 어플 실행 시 이미 버튼에 색상이 적용되어 바뀌지 않는 현상 발생

    - 부스트코스 댓글 참고하여 수정하였더니 정상 작동되었슴다!!!!

 

<Button에 대한 코드>

 

 

 

 

- 실습 코드 <Shape Drawable>

    - rect_shape.xml 파일을 res/drawable 폴더에 새로 생성

 

    ** 처음 파일 생성 시 코드

    ** selector를 shape 태그로 수정한다면, 자체가 하나의 도형을 그릴 수 있는 모양이 됨

 

    - <shape> 태그로 수정 후 코드 작성해주면, 모양이 만들어진 것 확인 가능

 

<직사각형 생성 코드>

 

        - size : 크기 / stroke : 선 / solid : 채워주는 색상 지정 / padding : 위에 띄우는 것

 

    - View는 추가될 때 위치 결정이 어려워 버튼을 추가한 후 코드에 View로 수정해줌

 

    - 연결하기 어려워 ConstraintLayout이 아닌 LinearLayout으로 수정

        - orientation="vertical"로 설정

        - button 속성 중 제약 레이아웃 위한 속성 모두 제거

    

    - 두번째 버튼을 View로 수정해준 후, background="@drawable/rect_shape"로 설정

 

width와 height를 200dp로 설정해주었을 때의 화면

 

width와 height를 모두 wrap_content로 설정해주었을 때의 화면

 

    ** 지금은 사각형이 그려졌는데, shape속성 이용하여 다른 도형을 그리도록 설정 가능

    - oval 타입 그리기

 

    - thumbnail_base.xml 파일 추가한 후 이전과 동일하게 selector 태그를 shape 태그로 변경

    - startColor, centerColor, endColor + centerY+ angle 속성 활용하여 코드 작성

위의 화면을 background로 설정하려고 함

 

    - 타원형 뷰의 크기를 줄인 후, FrameLayout 추가하여 크기 설정해줌

 

    - FrameLayout의 background 속성에 방금 생성한 thumbnail_base.xml을 넣어주기

 

 

    - 버튼의 테두리 설정 위해 linear_border.xml 파일 추가

    - selector 태그를 layer_list 태그로 변경

   

 

    - FrameLayout 아래에 버튼을 새로 하나 추가한 후, background 속성을 linear_border.xml 파일로 설정