快捷導(dǎo)航

Android實(shí)現(xiàn)畫(huà)板功能(一)

更新時(shí)間：2021年09月10日 15:30:09 作者：吐?tīng)柡榻瑿oding

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)畫(huà)板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android實(shí)現(xiàn)畫(huà)板功能的具體代碼，供大家參考，具體內(nèi)容如下

前言

最近看到了一些Android手寫(xiě)相關(guān)的功能，比如說(shuō)：

釘釘手寫(xiě)簽名功能，輸入法手寫(xiě)功能，筆記類(lèi)App的手寫(xiě)記錄功能等。最近在工作中也遇到了類(lèi)似的需求，其實(shí)實(shí)現(xiàn)畫(huà)板功能并不復(fù)雜，所以我就打算在這里簡(jiǎn)單記錄一下。實(shí)現(xiàn)畫(huà)板功能比較常用的方法有兩種，一是自定義view的方式在canvas上畫(huà)軌跡，另一個(gè)是在imageview上畫(huà)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="我的畫(huà)板"
            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寫(xiě)的，但是實(shí)現(xiàn)方法和java是一樣的。新建一個(gè)自定義view類(lèi)，繼承自View。kotlin不需要寫(xiě)View的三個(gè)重載方法。只需把三個(gè)參數(shù)傳給父類(lèi)即可。

然后是初始化Paint,Path,設(shè)置畫(huà)筆顏色等。

關(guān)鍵代碼是在onTouchEvent里面，這里需要獲取到手指的位置。在移動(dòng)手指時(shí)調(diào)用Path的lineTo(x,y)方法記錄一下軌跡，然后調(diào)用invalidate()方法實(shí)時(shí)更新畫(huà)面即可，invalidate()方法會(huì)調(diào)用onDraw方法，onDraw方法里面調(diào)用Canvas的drawPath方法就可以畫(huà)出手指劃過(guò)的軌跡了。

清除軌跡要調(diào)用reset()方法，調(diào)用invalidate()方法。

自定義view類(lèi)

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的一些基礎(chǔ)知識(shí)，適合剛學(xué)習(xí)自定義view的同學(xué)們。后面幾篇文章中將會(huì)繼續(xù)深入講解Android自定義view相關(guān)知識(shí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: