优化方向控制盘控件

Author: AndroidCoderPeng

app/src/main/res/layout/fragment_widget_steering_wheel_view.xml

@@ -13,8 +13,5 @@
         android:layout_height="match_parent"
         android:background="@color/mainBackground"
         android:gravity="center"
-        app:ctrl_backgroundColor="@color/white"
-        app:ctrl_borderColor="#64BFEB"
-        app:ctrl_borderStroke="@dimen/dp_5"
-        app:ctrl_diameter="@dimen/dp_200" />
+        app:ctrl_diameter="250dp" />
 </LinearLayout>

lite/build.gradle

@@ -35,7 +35,9 @@ android {
 dependencies {
     implementation 'androidx.annotation:annotation:1.7.1'
     implementation 'androidx.core:core-ktx:1.9.0'
-    implementation 'androidx.appcompat:appcompat:1.6.1'
+    def base_version = "1.6.1"
+    implementation "androidx.appcompat:appcompat:${base_version}"
+    implementation "com.google.android.material:material:${base_version}"
     implementation 'androidx.cardview:cardview:1.0.0'
     implementation "androidx.recyclerview:recyclerview:1.3.0"
     implementation 'com.squareup.retrofit2:adapter-rxjava:2.8.1'

lite/src/main/java/com/pengxh/kt/lite/widget/SteeringWheelView.kt

@@ -2,16 +2,14 @@ package com.pengxh.kt.lite.widget
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.Canvas
-import android.graphics.Color
-import android.graphics.Paint
-import android.graphics.RectF
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.MotionEvent
 import android.widget.ImageButton
 import android.widget.RelativeLayout
+import androidx.constraintlayout.widget.ConstraintLayout
 import com.pengxh.kt.lite.R
+import com.pengxh.kt.lite.extensions.getScreenWidth
 
 
 /**
@@ -21,198 +19,82 @@ import com.pengxh.kt.lite.R
 class SteeringWheelView constructor(context: Context, attrs: AttributeSet) :
     RelativeLayout(context, attrs) {
 
-    //画布中心x
-    private var canvasCenterX = 0
-
-    //画布中心y
-    private var canvasCenterY = 0
-
-    //控件直径
-    private val diameter: Float
-
-    //Paint
-    private val backgroundPaint: Paint
-    private val borderPaint: Paint
-    private val directionPaint: Paint
-
-    // 各控件使用状态
-    private var leftTurn = false
-    private var topTurn = false
-    private var rightTurn = false
-    private var bottomTurn = false
-
-    //外圆区域
-    private lateinit var outerCircleRectF: RectF
-
-    //线条粗细
-    private val borderStroke: Float
-
     init {
         val type = context.obtainStyledAttributes(attrs, R.styleable.SteeringWheelView)
-        diameter = type.getDimension(
-            R.styleable.SteeringWheelView_ctrl_diameter, 200f
-        )
-        val borderColor = type.getColor(
-            R.styleable.SteeringWheelView_ctrl_borderColor, Color.CYAN
-        )
-        val backgroundColor = type.getColor(
-            R.styleable.SteeringWheelView_ctrl_backgroundColor, Color.WHITE
-        )
-        borderStroke = type.getDimension(
-            R.styleable.SteeringWheelView_ctrl_borderStroke, 5f
-        )
+        var diameter = type.getDimension(R.styleable.SteeringWheelView_ctrl_diameter, 250f)
         type.recycle()
+        if (diameter <= 150f) {
+            diameter = 150f
+        }
 
-        borderPaint = Paint()
-        borderPaint.isAntiAlias = true
-        borderPaint.isDither = true
-        borderPaint.style = Paint.Style.STROKE
-        borderPaint.strokeWidth = borderStroke
-        borderPaint.color = borderColor
-
-        backgroundPaint = Paint()
-        backgroundPaint.isAntiAlias = true
-        backgroundPaint.isDither = true
-        backgroundPaint.style = Paint.Style.FILL
-        backgroundPaint.color = backgroundColor
-
-        directionPaint = Paint()
-        directionPaint.isAntiAlias = true
-        directionPaint.isDither = true
-        directionPaint.style = Paint.Style.FILL
-        directionPaint.color = Color.parseColor("#EEEEEE")
+        if (diameter >= context.getScreenWidth()) {
+            diameter = context.getScreenWidth().toFloat()
+        }
 
         val layoutParams = LayoutParams(diameter.toInt(), diameter.toInt())
-
         val view = LayoutInflater.from(context).inflate(R.layout.widget_view_steering_wheel, this)
-
-        val rootView = view.findViewById<RelativeLayout>(R.id.rootView)
+        val rootView = view.findViewById<ConstraintLayout>(R.id.rootView)
         rootView.layoutParams = layoutParams
 
         val leftButton = view.findViewById<ImageButton>(R.id.leftButton)
         leftButton.setOnTouchListener { _, event ->
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
-                    leftTurn = true
                     listener?.onLeftTurn()
                 }
 
                 MotionEvent.ACTION_UP -> {
-                    leftTurn = false
                     listener?.onActionTurnUp(Direction.LEFT)
                 }
             }
             postInvalidate()
-            true
+            false
         }
 
         view.findViewById<ImageButton>(R.id.topButton).setOnTouchListener { _, event ->
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
-                    topTurn = true
                     listener?.onTopTurn()
                 }
 
                 MotionEvent.ACTION_UP -> {
-                    topTurn = false
                     listener?.onActionTurnUp(Direction.TOP)
                 }
             }
             postInvalidate()
-            true
+            false
         }
         view.findViewById<ImageButton>(R.id.rightButton).setOnTouchListener { _, event ->
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
-                    rightTurn = true
                     listener?.onRightTurn()
                 }
 
                 MotionEvent.ACTION_UP -> {
-                    rightTurn = false
                     listener?.onActionTurnUp(Direction.RIGHT)
                 }
             }
             postInvalidate()
-            true
+            false
         }
         view.findViewById<ImageButton>(R.id.bottomButton).setOnTouchListener { _, event ->
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
-                    bottomTurn = true
                     listener?.onBottomTurn()
                 }
 
                 MotionEvent.ACTION_UP -> {
-                    bottomTurn = false
                     listener?.onActionTurnUp(Direction.BOTTOM)
                 }
             }
             postInvalidate()
-            true
+            false
         }
         view.findViewById<ImageButton>(R.id.centerButton).setOnClickListener {
             listener?.onCenterClicked()
         }
     }
 
-    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
-        super.onSizeChanged(w, h, oldw, oldh)
-        //圆心位置
-        canvasCenterX = w shr 1
-        canvasCenterY = h shr 1
-
-        val outerCircleRadius = (diameter - 20).toInt() shr 1 //半径
-
-        // 大外圈区域
-        outerCircleRectF = RectF(
-            (canvasCenterX - outerCircleRadius).toFloat(),
-            (canvasCenterY - outerCircleRadius).toFloat(),
-            (canvasCenterX + outerCircleRadius).toFloat(),
-            (canvasCenterY + outerCircleRadius).toFloat()
-        )
-    }
-
-    override fun onDraw(canvas: Canvas) {
-        super.onDraw(canvas)
-        val outerCircleRadius = diameter.toInt() shr 1 //半径
-        //背景
-        canvas.drawCircle(
-            canvasCenterX.toFloat(),
-            canvasCenterY.toFloat(),
-            outerCircleRadius.toFloat(),
-            backgroundPaint
-        )
-
-        //外圆圆圈
-        canvas.drawCircle(
-            canvasCenterX.toFloat(),
-            canvasCenterY.toFloat(),
-            outerCircleRadius.toFloat(),
-            borderPaint
-        )
-
-        if (leftTurn) {
-            canvas.drawArc(
-                outerCircleRectF, (90 * 2 - 45).toFloat(), 90f, true, directionPaint
-            )
-        }
-
-        if (topTurn) {
-            canvas.drawArc(
-                outerCircleRectF, (90 * 3 - 45).toFloat(), 90f, true, directionPaint
-            )
-        }
-
-        if (rightTurn) {
-            canvas.drawArc(outerCircleRectF, -45f, 90f, true, directionPaint)
-        }
-
-        if (bottomTurn) {
-            canvas.drawArc(outerCircleRectF, 45f, 90f, true, directionPaint)
-        }
-    }
-
     enum class Direction {
         LEFT, TOP, RIGHT, BOTTOM
     }

lite/src/main/res/drawable/bg_solid_layout_dark_blue_10.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="64dp"
+    android:viewportWidth="1024"
+    android:viewportHeight="1024">
+    <path
+        android:fillColor="#4D65BFEA"
+        android:pathData="M619.8,44.8l359.4,359.5a152.5,152.5 0,0 1,0 215.6L619.8,979.3a152.5,152.5 0,0 1,-215.7 0L44.7,619.8a152.5,152.5 0,0 1,0 -215.6L404.2,44.8a152.5,152.5 0,0 1,215.7 0z" />
+</vector>

lite/src/main/res/drawable/direction_point_selector.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true">
+        <vector android:width="64px" android:height="64px" android:viewportWidth="1024" android:viewportHeight="1024">
+            <path android:fillColor="#1A65BFEA" android:pathData="M83.1,669l346.2,-490.3c37.1,-51.7 129.8,-51.7 166.9,0l347.3,490.3c37.1,51.7 10.5,137.1 -63.7,137.1l-734.1,-0c-74.2,-0 -99.8,-85.4 -62.7,-137.1z" />
+        </vector>
+    </item>
+
+    <item android:state_pressed="false">
+        <vector android:width="64px" android:height="64px" android:viewportWidth="1024" android:viewportHeight="1024">
+            <path android:fillColor="@color/white" android:pathData="M83.1,669l346.2,-490.3c37.1,-51.7 129.8,-51.7 166.9,0l347.3,490.3c37.1,51.7 10.5,137.1 -63.7,137.1l-734.1,-0c-74.2,-0 -99.8,-85.4 -62.7,-137.1z" />
+        </vector>
+    </item>
+</selector>