Androidがパネル機能を実現する(一)

4912 ワード

本論文の例では、Androidのグラフィックス機能を実現するための具体的なコードを共有しています。
前言
最近いくつかのAndroid手書き関連の機能を見ました。例えば:
手書きサイン機能、手書き入力機能、筆記アプリの手書き記録機能など。最近は仕事でも似たような需要がありますが、画板の機能を実現するのは複雑ではないので、ここで簡単に記録するつもりです。画板の機能を実現するためによく使われる方法は二つあります。一つはカスタムviewの方式でcanvasに軌跡を描くこと、もう一つはimagviewにbitmapを描くことです。今日は第一の方法について話しましょう。
効果図

インターフェースレイアウト

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="    "
            android:layout_marginStart="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>


        <TextView
            android:id="@+id/text_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  "
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>

    </RelativeLayout>

    <com.example.drawline.LineView
        android:id="@+id/lineView"
        android:layout_marginTop="55dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.example.drawline.LineView>

</RelativeLayout>
コードはkotlinで書かれていますが、実現方法はjavaと同じです。新しいカスタムviewクラスを作成して、Viewから引き継ぎます。kotlinはViewの3つの重載方法を書く必要がありません。三つのパラメータを親に渡すだけでいいです。
その後、初期化Paint、Path、ブラシの色などを設定します。
キーコードはontouchEventの中にあります。ここで指の位置を取る必要があります。指を動かす時にPathのラインTo(x,y)を呼び出して軌跡を記録し、invalidate()方法を呼び出してリアルタイムで画面を更新すればいいです。invalidate()方法はonDrawメソッドを呼び出します。onDrawメソッドではCanvasのdrawPathを呼び出すと、指で描いた軌跡が描けます。
軌跡をクリアするには、リセット()メソッドを呼び出し、invalidate()メソッドを呼び出します。
カスタムビュークラス

package com.example.drawline

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View


class LineView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val defaultPath: Path
    private val defaultPaint: Paint

    init {
        defaultPath = Path()
        defaultPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
        defaultPaint.style = Paint.Style.STROKE
        defaultPaint.strokeWidth = 5f
        defaultPaint.color = Color.RED
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
          canvas.drawPath(defaultPath, defaultPaint)
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {

        val x = event.x
        val y = event.y

        when (event.action) {
            MotionEvent.ACTION_DOWN -> defaultPath.moveTo(x, y)
            MotionEvent.ACTION_MOVE -> defaultPath.lineTo(x, y)
            MotionEvent.ACTION_UP -> defaultPath.lineTo(x, y)
        }
        invalidate()
        return true
    }

    fun clear(){
        defaultPath.reset()
        invalidate()
    }

}
MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        text_clear.setOnClickListener { lineView.clear() }
    }
}
この文章では、カスタマイズしたviewの基礎知識を紹介しています。カスタムviewを勉強したばかりの学生に適しています。後のいくつかの文章では引き続きAndroidのカスタムviewに関する知識を深く説明します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。