[6팀] 드로잉 앱-캔버스 사용법,이미지 불러오고 내보내기

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 박세현

개발환경은 Windows, Android Studio입니다.

 

121-125강의 내용입니다.

 

#1 생성한 커스텀 드러어블을 사용하여 색상 팔레트 추가하기

 

이 강에서는 붓 두께를 선택할 수 있게 만든다.

 

# dither 속성

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <size
        android:height="10dp"
        android:width="10dp" />

    <solid android:color="#FF666666" />
</shape>

이 속성을 통해 비트맵이 화면과 동일한 픽셀 구성을 가지고 있지 않은 경우 비트맵 디더링을 사용하거나 사용하지 않을 수 있다. 예를 들어, 여기서는 RGB 구성을 사용하지만 화면은 ARGB 구성 등을 사용한다면 다른 화면에서도 제대로 작동하도록 자동으로 이미지를 조정한다. 이걸 true로 지정하면 dither 기능을 사용할 수 있다.

 

# dialog

 

dialog란 화면에 뜨는 선택 가능한 팝업창을 말한다. 이 설정을 하려면 객체를 생성하기만 하면 된다

    private fun showBrushSizeChooserDialog() {
        val brushDialog = Dialog(this)
        brushDialog.setContentView(R.layout.dialog_brush_size)
        brushDialog.setTitle("Brush size :")
        val smallBtn: ImageButton = brushDialog.findViewById(R.id.ib_small_brush)
        smallBtn.setOnClickListener(View.OnClickListener {
            drawingView?.setSizeForBrush(10.toFloat())
            brushDialog.dismiss()
        })

dialog가 화면에 표시하도록 전체 dialog 레이아웃을 설정해준다. 버튼을 누를 수 있도록 onClick 리스너를 만들어준다.

setSizeForBrush 메서드로는 붓으로 그리는 선의 두께를 설정한다. 그리고 매번 brush dialog가 'brushDialog.dismiss()' 이 부분 덕분에 종료 된다.

 

#2 생성한 커스텀 드러어블을 사용하여 색상 팔레트 추가하기

 

이 강에서는 UI를 수정해 여러가지 색상을 선택해서 그림을 그릴 수 있도록 한다.

 

colors.xml 파일에 기본적으로 몇 가지 생상이 있는데, 여기에 색상을 추가해준다. 

<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="skin">#ffcc99</color>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
    <color name="blue">#0000ff</color>
    <color name="yellow">#ffff00</color>
    <color name="lollipop"> #35a79c</color>
    <color name="random">#A349B1</color>
</resources>

이제 이미지 버튼에 색상을 부여해준다. 버튼의 배경색이 특정한 색이 되도록 만들어 주는 것이다.

<ImageButton
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_margin="2dp"
            android:background="@color/skin"
            android:contentDescription="image"
            android:onClick="paintClicked"
            android:src="@drawable/pallet_normal"
            android:tag="@color/skin" />

 

#3 색상 추가 선택하기

 

이 강에서는 앱에서 직접 색상을 선택하도록 만들어준다.

fun setColor(newColor:String){
	color = Color.parseColor(newColor)
    mDrawPaint!!.color = color
}

'Color.parseColor(newColor)'로 색상을 전달할 수 있다. mDrawPaint의 색상은 전에 만든 색상으로 바꿔준다.

mDrawPaint는 style과 color 정보를 포함하는 paint 클래스로 기하학 도형, 텍스트 또는 비트맵을 그릴 때 사용한다. 이걸로 화면 안에 색상을 선택해 그림을 그린다.

 

#4 백그라운드 이미지 추가하기

 

이 강에서는 배경을 설정해준다. 

 

<ImageView
            android:id="@+id/iv_background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="image"
            android:scaleType="centerCrop" />

배경을 지정해주기 위해 프레임 레이아웃 안에 이미지를 불러오거나 복사해준다. 그리고 너비와 높이를 추가해 match_parant로 설정해준다.

 

#5 UI에 갤러리 이미지 버튼 추가하기

이 강에서는 UI에 작은 이미지 버튼을 추가하고 눌렀을 때 디바이스의 사진과 미디어를 사용할 수 있도록 요청해 배경으로 사용할 이미지를 선택할 수 있게 만든다.

 

<LinearLayout
        android:id="@+id/ll_action_buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <!--TODO(Step 1 - We have added an image button for selecting the image from your phone.)-->

이미지 버튼을 선형 레이아웃을 사용해 만들었고 방향은 수평으로 만들어주었다. 그리고 gravity를 center로 설정해 이미지 버튼을 왼쪽이나 오른쪽으로 치우치지 않고 중앙에 절렬돼 있도록 만들어주었다.