[비전공자도 만들 수 있는 블루투스 무드등] 15. 안드로이드 앱 part 3-3, 오픈소스 라이브러리 활용(컬러피커)

안녕하세요? 닉네임간편입니다. 이번 시간에는 컬러피커에 대해 알아보고, 앱 아이콘을 만든 후 최종적으로 앱을 완성하겠습니다.

---

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

https://github.com/creativeduck/MyLED

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

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

---

1. 컬러피커 라이브러리

컬러피커는 다양한 색상을 선택할 수 있도록 하는 기능입니다. 이 기능은 실제로 구현할 수 있지만 구현하기 위해 투입해야 할 시간과 노력이 상당하고, 또한 이미 충분히 좋은 라이브러리들이 많이 존재하기 때문에 직접 구현하지 않았습니다.

 

저는 본 예제에서는 하나의 컬러피커 라이브러리를 사용하였지만, 이번 시간에는 두 개의 컬러피커 라이브러리를 사용할 것입니다. 원하시는 것을 선택하셔도 좋고, 혹은 이외에 다른 외부 라이브러리를 사용하셔도 좋습니다.

2. 컬러피커 라이브러리 1

먼저 제가 예제에 사용한 컬러피커 라이브러리에 대해 설명드리겠습니다. 자세한 사항은 아래의 주소로 들어가셔서 확인하시면 됩니다. 저는 예제에 필요한 사항에 대해서만 설명드리겠습니다.

 

https://github.com/kristiyanP/colorpicker

GitHub - kristiyanP/colorpicker: A simple color picker library for Android

A. 준비

빌드 종속 항목 추가

외부 라이브러리를 사용하기 위해선 빌드에 종속 항목으로 포함해야 합니다.

Gradle Scripts -> build.gradle(Module: [프로젝트 이름]. app)으로 이동한 후,

dependencies 중괄호 {} 안에 아래 구문을 적어줍니다.

dependencies {
   /*
   중략
   */
    implementation 'petrov.kristiyan:colorpicker-library:1.1.10'
}

 

이제 컬러피커 라이브러리를 사용할 수 있습니다.

라이브러리의 기능은 메서드를 통해 알아보겠습니다.

B. 메서드

private void colorPicker() {
        final ColorPicker colorPicker = new ColorPicker(this);
        ArrayList<String> colors = new ArrayList<>();

        colors.add("#e8472e");
        colors.add("#ff8c8c");
        colors.add("#f77f23");
        colors.add("#e38436");
        colors.add("#f0e090");
        colors.add("#98b84d");
        colors.add("#a3d17b");
        colors.add("#6ecf69");
        colors.add("#6ec48c");
        colors.add("#5aa392");
        colors.add("#4b8bbf");
        colors.add("#6a88d4");
        colors.add("#736dc9");
        colors.add("#864fbd");
        colors.add("#d169ca");

        colorPicker.setColors(colors)
                .setColumns(5) 
                .setRoundColorButton(true) 
                .setOnChooseColorListener(new ColorPicker.OnChooseColorListener() {
                    @Override
                    public void onChooseColor(int position, int color) {
                        sendData(color);
                        powerOn=true;
                    }

                    @Override
                    public void onCancel() {}
                }).show();
    }

1) 컬러피커 객체 생성
컬러피커 객체를 생성해줍니다. 이때 파라미터로 현재 액티비티인 메인 액티비티를 this로 넘겨줍니다.

2) 색상 배열
컬러피커에 표시될 색상들의 배열을 만듭니다. 원하시는 색상을 헥스 코드 방식으로 입력해 배열에 넣어주시면 되겠습니다.

헥스 코드를 빠르게 알고 싶으시다면 구글에 "컬러피커"를 검색하시면 됩니다. 그러면 원하시는 색상의 헥스 코드를 바로 알 수 있습니다.

3) setColors()
이 메서드를 통해 색상 배열에 있는 모든 색상을 컬러피커에 설정합니다.

4) setRoundColorButton()
이 메서드를 true로 설정하면 컬러피커의 색상 버튼이 원형 모양이 됩니다. false로 설정하면 사각형 모양이 됩니다. 전 원형 모양이 더 이쁘다고 생각했기에 원형 모양으로 설정했습니다.

여러분이 원하시는 대로 설정하시면 되겠습니다. 모양에 대한 예시는 아래와 같습니다.

 

컬러피커 색상 버튼(true / false)

5) setOnChooseColorListener()
이 리스너를 설정하고 onChooseColor() 메서드를 재정의해서 색상이 선택되었을 때 필요한 동작을 수행하도록 합니다.
sendData() 메서드를 호출한 후 color 변수를 파라미터로 전달해 선택된 색상이 LED 불빛으로 나오도록 설정했습니다.
이후 powerOn을 true로 설정합니다.

6) onCancel()
취소 버튼을 선택했을 경우 동작을 수행하도록 합니다. 취소 버튼에 대한 이벤트는 필요하지 않기 때문에 전 아무런 기능을 설정하지 않았습니다.

7) show()
show() 메서드를 통해 다이얼로그를 화면에 띄웁니다. 화면은 다음과 같습니다.

 

컬러피커 화면

3. 컬러피커 라이브러리 2

제가 예제에 사용하지는 않았지만 유용하다고 생각한 라이브러리에 대해 설명드리겠습니다. 이 라이브러리 또한 자세한 사항은 아래의 주소로 들어가셔서 확인하시면 되겠습니다.

 

https://github.com/duanhong169/ColorPicker

GitHub - duanhong169/ColorPicker: 🎨 A color picker for Android. Pick a color using color wheel and slider (HSV & alpha).

 

A. 준비

빌드 종속 항목 추가

앞에서처럼 이 외부 라이브러리를 사용하기 위해서도 빌드 종속 항목에 추가해야 합니다.

Gradle Scripts -> build.gradle(Module: [프로젝트 이름]. app)으로 이동한 후,

dependencies 중괄호 {} 안에 아래 구문을 적어줍니다.

dependencies {
   /*
   중략
   */
    implementation 'petrov.kristiyan:colorpicker-library:1.1.10' // 앞선 라이브러리
    implementation 'com.github.duanhong169:colorpicker:1.1.6' // 현재 추가한 라이브러리
}

다음으로 Gradle Scripts -> gradle.properties로 들어가서 아래의 내용을 추가합니다.

 

 

android.useAndroidX=true
android.enableJetifier=true

1) android.useAndroidX=true
AndroidX 라이브러리를 사용할 수 있도록 합니다.

2) android.enableJetifier=true
AndroidX 이외의 라이브러리를 AndroidX 라이브러리로 자동으로 변환한 후 사용할 수 있도록 합니다.

 

이것들을 모두 추가해야만 제대로 작동할 수 있습니다.

이제 라이브러리를 사용할 수 있습니다. 라이브러리의 기능은 메서드를 통해 알아보겠습니다.

 

 

B. 메서드

 

private void colorPicker2() {
        new ColorPickerPopup.Builder(this)
                .initialColor(Color.WHITE)
                .enableAlpha(false)
                .enableBrightness(false) 
                .okTitle("선택")
                .cancelTitle("취소")
                .showIndicator(true) 
                .showValue(false)
                .build()
                .show(new ColorPickerPopup.ColorPickerObserver() {
                    @Override
                    public void onColorPicked(int color) {
                        sendData(color);
                    }
                });
    }

 

1) ColorPickerPopup.Builder()
이 메서드를 통해 색상을 선택하는 다이얼로그 객체를 생성하고 Builder 클래스를 통해 다양한 속성을 설정합니다.
파라미터로는 현재 액티비티인 메인 액티비티(this)를 전달합니다.

2) initialColor()
초기에 선택되어있는 색상을 설정합니다. 전 하얀색으로 설정했지만, 자유롭게 설정하셔도 좋습니다.

 

3) enableAlpha()
이 메서드는 색상의 투명도를 설정하는 바를 띄우고, 투명도를 선택할 수 있도록 할지에 대한 여부를 나타냅니다.
LED 불빛의 색상을 설정하는 데에 투명도는 필요하지 않은 정보이므로, 전 false로 설정했습니다.

4) enableBrightness()
이 메서드는 색상의 밝기를 설정하는 바를 띄우고, 밝기를 선택할 수 있도록 할지에 대한 여부를 나타냅니다.
여기서 밝기가 낮아질수록, 즉 어두워질수록 색상으론 검은색 계열에 가까워지지만, 이를 불빛으로 나타내면 단지 밝기가 감소하는 것으로 표현될 뿐입니다.
밝기는 따로 시크바를 통해 설정할 수 있기 때문에 전 설정하지 않았습니다.

 

아래 사진에 보이는 두 개의 막대바가 각각 위에서부터 밝기에 대한 막대바, 투명도에 대한 막대바를 나타냅니다. 만일 이 부분이 필요하시다면 각각 true를 설정하시면 되겠습니다.

 

밝기, 투명도 설정 막대바

5) okTitle()
확인 버튼의 제목을 설정하는 메서드입니다. 저는 "선택"이라고 설정했습니다.

6) cancelTitle()
취소 버튼의 제목을 설정하는 메서드입니다. 저는 "취소"라고 설정했습니다.

7) showIndicator()
현재 선택된 색상이 어떤 색상인지를 취소 버튼 아래에 표시하는 메서드입니다.
true로 설정했습니다.

8) showValue()
현재 선택된 색상을 확인 버튼 아래에 헥스 코드값으로 나타내 주는 메서드입니다.
저는 색상을 선택할 때에는 헥스 코드값이 표시되지 않고 단지 선택된 색상만 표시되는 것이 좋다고 생각했기에 false로 설정했습니다.

9) build()
이 메서드는 현재 생성한 ColorPickerPopup 객체를 반환합니다.

10) show()
이 메서드를 통해 다이얼로그를 화면에 띄웁니다.
이때 파라미터로 ColorPickerObserver를 전달해 onColorPicked() 메서드를 재정의합니다. 이 메서드를 통해 색상이 선택되었을 때 이벤트를 발생시킵니다.
전 sendData() 메서드를 호출한 후 선택된 색상을 파라미터로 전달해 해당 색상이 LED 불빛으로 나오도록 설정했습니다.

 

이 컬러피커를 설정하면 다음과 같은 화면이 나옵니다. 아래는 초기 화면이 아닌 보라색을 선택했을 때의 화면입니다.

 

컬러피커 화면

4. 컬러피커 버튼

btnColorPicker.setOnClickListener(e-> {
            colorPicker();
            // colorPicker2();
        });

 

원하는 컬러피커를 선택한 후, 컬러피커 버튼이 클릭되면 해당 메서드가 호출되도록 설정합니다.

전 첫 번째 컬러피커를 선택했기에 해당 메서드를 호출하도록 했습니다.

5. 마무리

이번 시간에는 컬러피커 외부 라이브러리에 대해 알아보았습니다.

이것으로 블루투스 무드등에 필요한 앱을 만드는 과정이 모두 끝났습니다. 따라오시느라 고생하셨습니다.

다음 시간에는 3D 프린팅을 이용해 무드등 외관을 만들고, 최종적으로 프로젝트를 완료하겠습니다.

읽어주셔서 감사합니다.