android - 如何在kotlin（android Studio）中实现canvasView和BottomSheetBehaviour，就像一个绘图应用程序

Question

在这里我想同时实现（myCanvasView）画布和BottomSheetBehavior，这样我就可以用按钮从下到上滑动工作表（BottomSheet），用我想应用或实现的简单的话将它应用到画布上classView(Canvas) 的底部工作表都可以轻松滑动

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
//here it is a coordinatorLayout that is used to implement bottomsheet behavior
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

  //here it is a constraintLayout i.e used to implementation of the canvas(myCanvas)

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/mybottomsheet"
        android:layout_width="408dp"
        android:layout_height="355dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

mybottomsheet.xml

//here it is a bottomsheet layout
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="450dp"
    android:orientation="vertical"
    app:behavior_hideable="false"
    app:behavior_peekHeight="100dp"
    
  app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bottomsheetdesign"
   >

    <LinearLayout
        android:id="@+id/row1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/btn1"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#090808" />

        <Button
            android:id="@+id/btn2"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#F44336" />

        <Button
            android:id="@+id/btn3"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#FFEB3B" />

        <Button
            android:id="@+id/btn4"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#03A9F4" />

        <Button
            android:id="@+id/btn5"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#651FFF" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/row1"
        app:layout_constraintVertical_bias="0.0">
   //here different button represent the different colors but they are not functioned
        <Button
            android:id="@+id/btn6"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#F57F17" />

        <Button
            android:id="@+id/btn7"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#4B2E2E" />

        <Button
            android:id="@+id/btn8"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#00BF5B" />

        <Button
            android:id="@+id/btn9"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#0347F4" />

        <Button
            android:id="@+id/btn10"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:background="@drawable/buttondesign"
            app:backgroundTint="#E040FB" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

MainActivity.kt

//it is a main activity

   package com.example.drawit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View.SYSTEM_UI_FLAG_FULLSCREEN
import android.widget.LinearLayout
import com.google.android.material.bottomsheet.BottomSheetBehavior
//here it is mainactivity for implementing themyclassView with bottomSheetBehavior
class MainActivity : AppCompatActivity() {
    lateinit var myClassView: myClassView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


 //here we are making the my classView object and then pass it into the setcontentView
        myClassView=myClassView(this)
        setContentView(myClassView)
    }
}

我的类视图.kt

//here it is a myClassView That implements the view for the CancasView
    package com.example.drawit
import android.content.Context
import android.graphics.*
import android.view.MotionEvent
import android.view.View
import android.view.ViewConfiguration
import android.widget.LinearLayout
import androidx.core.content.res.ResourcesCompat
import com.google.android.material.bottomsheet.BottomSheetBehavior
private const val STROKE_WIDTH = 50f
    class myClassView(context: Context?): View(context) {
        //I'm using this for using the background Color white
        private val backgroundColor = ResourcesCompat
            .getColor(resources, R.color.white, null)
        private val drawColor = ResourcesCompat
            .getColor(resources, R.color.purple_700, null)
        private val paint = Paint().apply {
            color = drawColor
            // Smooths out edges of what is drawn without affecting shape.
            isAntiAlias = true
            // Dithering affects how colors with higher-precision than the device are 
 down-sampled
            isDither = false
            style = Paint.Style.STROKE // default: FILL
            strokeJoin = Paint.Join.ROUND // default: MITER
            strokeCap = Paint.Cap.ROUND // default: BUTT
            strokeWidth = STROKE_WIDTH // default: hairline width (really thin)
        }
    private val touchTolerance = ViewConfiguration.get(context).scaledTouchSlop
private var motionTouchEventX = 0f
private var motionTouchEventY = 0f
private var currentX = 0f
private var currentY = 0f
private var path = Path()
private var extraCanvas: Canvas? = null
private var extraBitmap: Bitmap? = null

// Path representing the drawing so far
private val drawing = Path()

// Path representing what's currently being drawn
private val curPath = Path()

private fun touchStart() {
    path.reset()
    path.moveTo(motionTouchEventX, motionTouchEventY)
    currentX = motionTouchEventX
    currentY = motionTouchEventY
}

private fun touchMove() {
    val dx = Math.abs(motionTouchEventX - currentX)
    val dy = Math.abs(motionTouchEventY - currentY)
    if (dx >= touchTolerance || dy >= touchTolerance) {
        // QuadTo() adds a quadratic bezier from the last point,
        // approaching control point (x1, y1), and ending at (x2, y2).
        path.quadTo(
            currentX, currentY,
            (motionTouchEventX + currentX) / 2,
            (motionTouchEventY + currentY) / 2
        )
        currentX = motionTouchEventX
        currentY = motionTouchEventY
        // Draw the path in extra bitmap to cache it.
        extraCanvas?.drawPath(path, paint)
    }
    invalidate()
}

private fun touchEnd() {
    // Add the current path to the drawing so far
    drawing.addPath(curPath)
    // Rewind the current path for the next touch
    curPath.reset()
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    extraBitmap?.recycle()
    extraBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
    extraCanvas = Canvas(extraBitmap!!).apply { drawColor(backgroundColor) }
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.apply {
        // Draw the drawing so far
        drawPath(drawing, paint)
        drawPath(curPath, paint)
        drawBitmap(checkNotNull(extraBitmap), 0f, 0f, null)
    }
}

override fun onTouchEvent(event: MotionEvent): Boolean {
    motionTouchEventX = event.x
    motionTouchEventY = event.y

    when (event.action) {
        MotionEvent.ACTION_DOWN -> touchStart()
        MotionEvent.ACTION_MOVE -> touchMove()
        MotionEvent.ACTION_UP -> touchEnd()
    }
    return true
}
}

android - 如何在kotlin（android Studio）中实现canvasView和BottomSheetBehaviour，就像一个绘图应用程序

0 回答 0

Related

Reference