[비전공자도 만들 수 있는 블루투스 무드등] 5. 안드로이드 앱 part 1-2 with 셰이퍼블 이미지뷰(ShapeableImageView)

안녕하세요? 닉네임 간편입니다. 이번 시간에는 저번에 이어 레이아웃을 다룰 것이며, 이미지뷰, 셰이퍼블 이미지뷰, 가이드라인에 대해 설명드리겠습니다.

---

전체 소스는 여기에 있습니다.

https://github.com/creativeduck/MyLED

앱을 미리 사용해보고 계신 분들은, 이 링크를 타고 설치해주시면 됩니다.

https://play.google.com/store/apps/details?id=com.mybest.myled

---

전체 코드는 앞선 게시물을 참조해주시길 바랍니다.

1.  이미지뷰(ImageView)

<ImageView
        android:id="@+id/colorPick"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:src="@drawable/colorroll"
        app:layout_constraintBottom_toTopOf="@id/guideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.81" />

 

0) 이미지뷰에 대해

말 그대로 이미지를 보일 수 있는 뷰입니다.

 

1) width, height

폭은 화면을 꽉 채우도록 하고, 높이는 400dp로 설정합니다.

 

2) src

이미지뷰는 src로 이미지를 설정할 수 있습니다.

이때 사용된 이미지는 다음과 같습니다.

 

이미지뷰

 

3) 제약 레이아웃

제약 레이아웃에 의거한 배치 방법은 앞선 게시글에서 설명했으므로 앞으론 이 부분에 대해선 생략하겠습니다.

그런데 이때 이전 게시글에서 보이지 않던 부분이 있습니다.

 

app:layout_constraintVertical_bias="0.81"

 

이는 상하 혹은 좌우에서 배치될 비율을 의미하며, 0~1 사이의 값을 가질 수 있습니다.

constraintVertical의 경우 세로 방향으로 비율이 조정되며, 0에 가까울수록 위쪽에 배치되고 1에 가까울수록 아래쪽에 배치됩니다.

constraintHorizontal의 경우 가로 방향으로 비율이 조정되며, 0에 가까울수록 왼쪽에 배치되고 1에 가까울수록 오른쪽에 배치됩니다.

제약 레이아웃에서는 상하 혹은 좌우에 제약이 모두 부여된다면 해당 제약 중앙에 위치하게 되며, 이때 기본적으로 bias, 즉 비율은 0.5가 됩니다. 이 비율을 조절해서 특정 위치로 치우치게 배치할 수 있습니다.

이 예시에선 우선 Vertical, 즉 세로 방향으로 0.81로 치우치게 배치하도록 하였으며, 기본 배치보다 아래쪽에 위치하게 됩니다.

 

2. 셰이퍼블 이미지뷰(ShapeableImageView)

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/selectedColor"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/orange"
        app:layout_constraintBottom_toBottomOf="@id/colorPick"
        app:layout_constraintEnd_toEndOf="@id/colorPick"
        app:layout_constraintStart_toStartOf="@id/colorPick"
        app:layout_constraintTop_toTopOf="@id/colorPick"
        app:shapeAppearanceOverlay="@style/roundedCorners" />

 

0) 셰이퍼블 이미지뷰란

기존 이미지뷰를 주어진 모양에 따라 그릴 수 있도록 하는 이미지뷰입니다.

 

*이때 해당 뷰를 사용하기 위해선 dependency에 있는 material design 이 1.2.0 혹은 그 이상이어야 합니다.

안드로이드 스튜디오에서 Gradle Scripts -> build.gradle(Module: [프로젝트명]. app)으로 이동합니다.

여기서 dependencies를 찾고, 이 안에 implementation을 확인하면 material degisn 버전을 확인할 수 있습니다.

 

이 부분의 버전이 1.2.0 이상이어야만 해당 뷰를 사용할 수 있고, 만일 그렇지 않다면

 

implementation 'com.google.android.material:material:1.2.0'

 

이를 dependencies 안에 다른 implementation처럼 포함시켜주시길 바랍니다.

이후 위쪽의 Sync를 누르면 사용할 수 있습니다.(저는 이미 버전이 그보다 높으므로 Sync를 따로 하지 않았습니다.)

 

1) width, height

가로와 세로 모두 80dp로 설정했습니다.

 

2) background

배경색은 주황색으로 설정했습니다.

이때 @color/[이름]은 색상 리소스 파일에 정의된 색상을 사용하는 것입니다.

색상 정의는 프로젝트 생성 시 기본으로 생성되는 colors.xml 파일에 추가해도 되고, 다른 파일을 만들어서 추가해도 됩니다. 전 colors.xml 파일에 추가했습니다.

values -> colors -> colors.xml 파일로 들어가서

 

<color name="orange">#FFFF5544</color>
<color name="yellow">#FFFFDD55</color>
<color name="gray">#FFF0F0F0</color>
<color name="seekbar">#FFFF5544</color>
<color name="thumb">#FF00aadd</color>

 

이런 식으로 이름에 따른 색상을 설정해주시면 됩니다. 주황색 이외의 색들은 추후에 사용될 것이므로 미리 추가하도록 합시다. 물론 여러분들이 원하시는 색상을 자유롭게 설정하셔도 좋습니다.

 

*이때 colors라는 폴더가 없는 분들도 계실 수 있습니다. 전 다크 모드 색상을 따로 설정하기 위해 colors.xml(night) 파일이 있으므로, colors 폴더가 생성되었습니다. 만약 colors 폴더가 없다면 values -> colors.xml 파일로 바로 들어가시면 됩니다.

 

 

3) 제약 레이아웃

이 뷰의 위치는 colorPick이라는 이미지뷰의 상하좌우를 기준으로 배치합니다. 이렇게 배치하면 해당 이미지 가운데에 중첩되어 배치되며, 저는 선택된 색상이 색상표 가운데에 배치되면 좋을 것 같다고 판단했기에 이런 식으로 배치했습니다.

 

가운데에 있는 것이 셰이퍼블 이미지뷰입니다.

 

4) shapeAppearanceOverlay

스타일 리소스를 참조하여 뷰의 모습을 보다 자유롭게 설정합니다.

저는 모서리가 둥근 사각형 모양으로 뷰의 모습을 설정하고 싶었기에 이처럼 설정하였습니다.

 

스타일 리소스 파일을 만드는 방법은 다음과 같습니다.

values 폴더에 우측 클릭한 후 Values Resource File을 하나 만들어줍니다. 그리고 다음과 같은 코드를 입력하시면 됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="roundedCorners" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>
</resources>

 

1) style name

이 파일의 이름이며 다른 곳에서 참조할 때 사용됩니다.

이때 parent 부분은 상속한 상위 부모가 있다면 적어주지만, 여기서 상속한 부분은 없으므로 비워둡니다.

 

2) cornerFamily

모든 모서리의 모양을 설정합니다. rounded로 설정하면 모서리가 둥글게 됩니다.

 

3) cornerSize

모서리의 크기를 설정합니다. 백분율(%)로 설정해도 되고 dp 단위로 설정해도 됩니다. 값이 커질수록 모서리가 더 둥글게 표현되며, 전 10dp로 설정했습니다.

 

 

3. 가이드라인(Guideline)

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6867305" />
        
<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8235294" />
 
<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.97811216" />

 

0) 가이드라인이란

가이드라인은 제약 레이아웃에서 뷰의 가로 또는 세로를 제한할 수 있는 안내선입니다.

가이드라인을 통해 뷰들을 원하는 곳에 배치할 수 있도록 합니다.

가이드라인은 사용자에게는 표시되지 않으며, 레이아웃의 가장자리를 기준으로 dp 단위로 설정하거나 혹은 백분율(%) 단위로 배치할 수 있습니다. 전 예시에서 % 단위로 가이드라인을 설정하였습니다.

 

app:layout_constraintGuide_percent="0.97811216"

 

이 경우 백분율을 기준으로 레이아웃의 위쪽부터 약 98%에 해당하는 곳에 가이드라인을 배치시킵니다.

레이아웃의 위쪽을 기준으로 하기 때문에 값이 높아질수록 아래쪽에 위치하게 됩니다.

 

 

1) orientation

이는 가로 혹은 세로 방향을 결정하는 것으로써, 만일 orientation이 위 예시처럼 horizontal이라면 가이드라인은 가로 방향으로 설정되며, 반대로 vertical이라면 가이드라인이 세로 방향으로 설정됩니다.

위 예시대로 가이드라인을 설정하면 아래의 그림처럼 가로 방향의 가이드라인이 설정되며, 이 가이드라인을 기준으로 뷰를 배치할 수 있습니다.

 

가이드라인 예시

 

4. 마무리

이번 시간에는 이미지뷰, 셰이퍼블 이미지뷰, 가이드라인에 대해 알아보았습니다. 다음 시간에도 이어서 남은 뷰들에 대해 설명드리겠습니다.

지금까지 읽어주셔서 감사합니다.