[3팀] Android 12 : 키즈 드로잉 앱 (2)

이 글은 유데미 강의 Android 12 및 Kotlin 개발 완전 정복을 참고하여 작성하였습니다.

작성자 : 김인겸

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

강의내용 120-125까지의 내용입니다.

1.  브러쉬 사이즈  선택하기

//Drawing View에 함수 추가하기
fun setSizeForBrush(newSize: Float) { mBrushSize = TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, newSize, resources.displayMetrics ) //화면의 측정 범위에 따라 크기가 달라짐
mDrawPaint!!.strokeWidth = mBrushSize
}

위 함수를 MainActivity에 불러와서 실행한다.

//Main Activity 내에
class MainActivity : AppCompatActivity() {
private var drawingView: DrawingView? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main) drawingView = findViewById(R.id.drawing_view)
val ibBrush: ImageButton = findViewById(R.id.ib_brush) //id불러오기
drawingView?.setSizeForBrush(20.toFloat()) //브러쉬 크기 설정하기
}}

브러쉬 사이즈 선택하기

//브러쉬 두께를 설정하기 위해, 새 레이아웃 리소스인 dialog_brush_size.xml을 생성한 후, drawable resource를 생성한다.
//small.xml 내
<?xml version="1.0" encoding="utf-8"?>
<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>
//dither 속성 : RGB구성을 스튜디오에서 사용하는 것과 달리, 화면에서 ARGB구성을 사용하려면, 다른 화면에서도 제대로 작동하도록 자동으로 이미지를 조정한다. 이를 True로 지정하고, dither 기능을 사용한다.

위와 같이 사이즈를 설정한 후, MainActivity에 연결 한다.

private fun showBrushSizeChooserDialog() {
val brushDialog = Dialog(this) //Dialog창이 열리면 이 때, 다른 붓들의 사이즈를 선택할 수 있다.
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 { // Onclick리스너를 추가해 버튼이 실제로 눌리고 작동되도록한다.
drawingView?.setSizeForBrush(10.toFloat())
brushDialog.dismiss() //Dialog를 종료시킨다.
})
}

2. 색상 팔레트, 색상 선택기능 추가하기.

이미지버튼을 이용하여 다양한 색상을 선택할 수 있도록 팔레트를 설정해 준다.

//Activity_main.xml내에
<LinearLayout android:id="@+id/ll_paint_colors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf= "@id/ll_action_buttons"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/fl_drawing_view_container" >
//색상을 수평 방향으로 진열하도록하는 LinearLayout을 만들고, 이 안에 다양한 색상들을 이미지 버튼으로 추가한다.

<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" />

</LinearLayout>

이 때, 없는 색상들은 Values내의 colors.xml에 추가해 준다.

//colors.xml
<resources>
<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>

위 버튼이 실제로 작동하도록 하려면, DrawingView 에 색상 선택 함수를 추가해준다.

//DrawingView내
fun setColor(newColor: String) {
color = Color.parseColor(newColor)
mDrawPaint?.color = color}

이를 MainActivity내에 onclick메소드로 연결 시켜준다.

fun paintClicked(view: View) {
if (view !== mImageButtonCurrentPaint) {
val imageButton = view as ImageButton
val colorTag = imageButton.tag.toString() //이미지 버튼의 tag속성을 가져와 변경해준다.
drawingView?.setColor(colorTag)
imageButton.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.pallet_pressed)) mImageButtonCurrentPaint?.setImageDrawable(
ContextCompat.getDrawable( this, R.drawable.pallet_normal ) )
mImageButtonCurrentPaint = view }}

3. 백그라운드 이미지 추가하기

드로잉 앱 내에 기본 배경화면을 설정하기 위해, activity_main.xml파일 내에 Framelayout을 추가해준다.

<FrameLayout android:id="@+id/fl_drawing_view_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="5dp"
android:padding="1dp"
android:background="@drawable/background_drawing_view_layout" app:layout_constraintBottom_toTopOf="@id/ll_paint_colors"
app:layout_constraintTop_toTopOf="parent" a
pp:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">

<ImageView android:id="@+id/iv_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
tools:src="@drawable/image"/>
//이미지뷰로 배경화면을 설정한다.

<com.example.kidsdrawingapp.DrawingView
android:id="@+id/drawing_view"
android:layout_width="match_parent"
android:layout_height="match_parent" a
ndroid:background="#80FFFFFF" />
//위 드로잉뷰에 색상(회색)을 추가하여 약간 뿌옇게 보이도록한다.

</FrameLayout>

 

4. UI에 갤러리 이미지 버튼 추가하기.

activity_main.xml내에서, 이미지 버튼들을 나열하는 LinearLayout을 새로 만들고, 갤러리 이미지 버튼을 추가한다.

<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_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
//이 LinearLayout 안에 이미지 버튼들을 나열한다.

<ImageButton android:id="@+id/ib_gallery"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:contentDescription="image"
android:scaleType="fitXY"
android:src="@drawable/ic_gallery" />

<ImageButton android:id="@+id/ib_brush"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:contentDescription="image"
android:scaleType="fitXY"
android:src="@drawable/ic_brush" />

</LinearLayout>

 

이상으로 블로그 포스팅을 마치겠습니다. 감사합니다.