32. 【Android/Kotlin】ペイント

はじめに
設定事項
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回はアンドロイドのAnimationについて説明しました。

31. 【Android/Kotlin】Animation

今回はアンドロイドで絵を描けるペイント機能を追加していきます。

設定事項

・デバイスの回ることにたいする設定

・ペイント機能のViewを作成

・ActivityにペイントViewを設定

デバイスの回ることにたいする設定

「Androidmanifest.xml」のapplicationタグに下記のコードを追加

        android:configChanges="orientation|keyboardHidden|screenSize"
        android:windowSoftInputMode="stateHidden|adjustPan"

1 2	android:configChanges="orientation\|keyboardHidden\|screenSize" android:windowSoftInputMode="stateHidden\|adjustPan"

ペイント機能のViewを作成

PaintView.kt

package com.example.practiceapplication

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.view.MotionEvent
import android.view.View


class PaintView(context: Context?) : View(context) {
    private val paint: Paint = Paint()

    private val path: Path = Path()
    private var x = 0
    private var y = 0
    override fun onDraw(canvas: Canvas) {
        paint.setColor(Color.BLACK)

        //ペイントの線タイプ
        paint.setStyle(Paint.Style.STROKE)

        //線のサイズ
        paint.setStrokeWidth(3f)

        canvas.drawPath(path, paint)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        var x = event.x
        var y = event.y
        when (event.action) {
            MotionEvent.ACTION_DOWN -> path.moveTo(x, y)
            MotionEvent.ACTION_MOVE -> {
                x = event.x
                y = event.y
                path.lineTo(x, y)
            }
        }

        invalidate()
        return true
    }
}

package com.example.practiceapplication

import android.content.Context

import android.graphics.Canvas

import android.graphics.Color

import android.graphics.Paint

import android.graphics.Path

import android.view.MotionEvent

import android.view.View

class PaintView(context: Context?) : View(context) {

private val paint: Paint = Paint()

private val path: Path = Path()

private var x = 0

private var y = 0

override fun onDraw(canvas: Canvas) {

paint.setColor(Color.BLACK)

//ペイントの線タイプ

paint.setStyle(Paint.Style.STROKE)

//線のサイズ

paint.setStrokeWidth(3f)

canvas.drawPath(path, paint)

}

override fun onTouchEvent(event: MotionEvent): Boolean {

var x = event.x

var y = event.y

when (event.action) {

MotionEvent.ACTION_DOWN -> path.moveTo(x, y)

MotionEvent.ACTION_MOVE -> {

x = event.x

y = event.y

path.lineTo(x, y)

}

invalidate()

return true

}

ActivityにペイントViewを設定

PaintActivity.kt

package com.example.practiceapplication

import android.content.res.Configuration
import android.content.res.Resources
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class PaintActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(PaintView(this))

        //デバイス回転時の値を維持するためのコード
        val r: Resources = Resources.getSystem()
        val config: Configuration = r.getConfiguration()
        onConfigurationChanged(config)

    }

    //デバイス回転時に実行されるメソッド
    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        when (newConfig.orientation) {
            Configuration.ORIENTATION_LANDSCAPE -> Toast.makeText(
                applicationContext,
                "raw",
                Toast.LENGTH_SHORT
            ).show()
            Configuration.ORIENTATION_PORTRAIT -> {
                Toast.makeText(applicationContext, "col", Toast.LENGTH_SHORT).show()
                return
            }
        }
    }
}

package com.example.practiceapplication

import android.content.res.Configuration

import android.content.res.Resources

import android.os.Bundle

import android.widget.Toast

import androidx.appcompat.app.AppCompatActivity

class PaintActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(PaintView(this))

//デバイス回転時の値を維持するためのコード

val r: Resources = Resources.getSystem()

val config: Configuration = r.getConfiguration()

onConfigurationChanged(config)

}

//デバイス回転時に実行されるメソッド

override fun onConfigurationChanged(newConfig: Configuration) {

super.onConfigurationChanged(newConfig)

when (newConfig.orientation) {

Configuration.ORIENTATION_LANDSCAPE -> Toast.makeText(

applicationContext,

"raw",

Toast.LENGTH_SHORT

).show()

Configuration.ORIENTATION_PORTRAIT -> {

Toast.makeText(applicationContext, "col", Toast.LENGTH_SHORT).show()

return

}

アプリ起動

・初期の画面

・dream hanks moonの文字を描いた場合

終わりに

今回はアンドロイドで絵を描けるペイント機能を追加しました。

次回Vector AssetというToolについて説明していきます。

33. 【Android/Kotlin】Vector Asset