Android | 自定义摇杆控件

最新推荐文章于 2022-08-22 15:57:32 发布
最新推荐文章于 2022-08-22 15:57:32 发布
阅读量2.6k 收藏 47
点赞数 10
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyu233/article/details/117228068
版权

控件已开源，gitee项目地址:https://gitee.com/y141111/RockerView
先看实现的功能，如不能满足需求，不必浪费宝贵的时间继续阅读

Android摇杆控件

功能

在这里插入图片描述
xml:

<?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="match_parent"
    android:orientation="vertical"
    tools:context=".ControlEp">
    <TextView
        android:id="@+id/msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <com.shy.rockerview.MyRockerView
        android:id="@+id/rocker_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:rockerSpeedLevel="10"
        app:rockerCallBackMode="CALL_BACK_MODE_STATE_CHANGE"
        app:rockerScale="0.5"/>

    <Button
        android:id="@+id/startReceiver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/stopReceiver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

java:

class MainActivity : AppCompatActivity() {
    companion object {
        const val TAG = "MainActivity"
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mRockerViewXY = findViewById<MyRockerView>(R.id.rockerXY_View)  // 1
        val mRockerViewZ = findViewById<MyRockerView>(R.id.rockerZ_View)    // 2
        val directionXY_Text = findViewById<TextView>(R.id.directionXY_Text)    // 1当前方向
        val angleXY_Text = findViewById<TextView>(R.id.angleXY_Text)    // 1当前角度
        val levelXY_Text = findViewById<TextView>(R.id.levelXY_Text)    // 1当前偏移级别
        val directionZ_Text = findViewById<TextView>(R.id.directionZ_Text) // 2当前方向
        val angleZ_Text = findViewById<TextView>(R.id.angleZ_Text) // 2当前角度
        val levelZ_Text = findViewById<TextView>(R.id.levelZ_Text) // 2当前偏移级别
        
        // 1
        mRockerViewXY.setOnShakeListener(MyRockerView.DirectionMode.DIRECTION_8, object : MyRockerView.OnShakeListener {
            override fun onStart() {}
            override fun direction(direction: MyRockerView.Direction) {
                var directionXY = ""
                when (direction) {
                    MyRockerView.Direction.DIRECTION_CENTER -> {
                        directionXY = "当前方向：中心"
                        angleXY_Text.text = "当前方向："
                        levelXY_Text.text = "当前偏移级别："
                    }
                    MyRockerView.Direction.DIRECTION_DOWN -> {
                        directionXY = "当前方向：下"
                    }
                    MyRockerView.Direction.DIRECTION_LEFT -> {
                        directionXY = "当前方向：左"
                    }
                    MyRockerView.Direction.DIRECTION_UP -> {
                        directionXY = "当前方向：上"
                    }
                    MyRockerView.Direction.DIRECTION_RIGHT -> {
                        directionXY = "当前方向：右"
                    }
                    MyRockerView.Direction.DIRECTION_DOWN_LEFT -> {
                        directionXY = "当前方向：左下"
                    }
                    MyRockerView.Direction.DIRECTION_DOWN_RIGHT -> {
                        directionXY = "当前方向：右下"
                    }
                    MyRockerView.Direction.DIRECTION_UP_LEFT -> {
                        directionXY = "当前方向：左上"
                    }
                    MyRockerView.Direction.DIRECTION_UP_RIGHT -> {
                        directionXY = "当前方向：右上"
                    }
                }
                Log.e(TAG, "XY轴$directionXY")
                Log.e(TAG, "-----------------------------------------------")
                directionXY_Text.text = directionXY
            }
            override fun onFinish() {}
        })
        // 1
        mRockerViewXY.setOnAngleChangeListener(object : MyRockerView.OnAngleChangeListener {
            override fun onStart() {}
            override fun angle(angle: Double) {
                var angleXY = ""
                angleXY = "当前角度：$angle"
                Log.e(TAG, "XY轴$angleXY")
                angleXY_Text.setText(angleXY)
            }

            override fun onFinish() {}
        })
        // 1
        mRockerViewXY.setOnDistanceLevelListener { level ->
            var levelXY = ""
            levelXY = "当前距离级别：$level"
            Log.e(TAG, "XY轴$levelXY")
            levelXY_Text.setText(levelXY)
        }


        // 2
        mRockerViewZ.setOnShakeListener(MyRockerView.DirectionMode.DIRECTION_4_ROTATE_45, object : MyRockerView.OnShakeListener {
            override fun onStart() {}
            override fun direction(direction: MyRockerView.Direction) {
                var directionXY = ""
                when (direction) {
                    MyRockerView.Direction.DIRECTION_CENTER -> {
                        directionXY = "当前方向：中心"
                        angleZ_Text.text = "当前方向："
                        levelZ_Text.text = "当前偏移级别："
                    }
                    MyRockerView.Direction.DIRECTION_DOWN -> {
                        directionXY = "当前方向：下"
                    }
                    MyRockerView.Direction.DIRECTION_LEFT -> {
                        directionXY = "当前方向：左"
                    }
                    MyRockerView.Direction.DIRECTION_UP -> {
                        directionXY = "当前方向：上"
                    }
                    MyRockerView.Direction.DIRECTION_RIGHT -> {
                        directionXY = "当前方向：右"
                    }
                    else -> {}
                }
                Log.e(TAG, "XY轴$directionXY")
                Log.e(TAG, "-----------------------------------------------")
                directionZ_Text.text = directionXY
            }
            override fun onFinish() {}
        })

        // 2
        mRockerViewZ.setOnAngleChangeListener(object : MyRockerView.OnAngleChangeListener {
            override fun onStart() {}
            override fun angle(angle: Double) {
                var angleXY = ""
                angleXY = "当前角度：$angle"
                Log.e(TAG, "XY轴$angleXY")
                angleZ_Text.setText(angleXY)
            }

            override fun onFinish() {}
        })
        // 2
        mRockerViewZ.setOnDistanceLevelListener { level ->
            var levelXY = ""
            levelXY = "当前距离级别：$level"
            Log.e(TAG, "XY轴$levelXY")
            levelZ_Text.setText(levelXY)
        }
    }
}

实现的监听功能

1.摇杆方向监听
2.摇杆摇动角度监听
3.摇杆摇动距离监听

方向模式

实现了摇杆的五中方向模式
DIRECTION_2_HORIZONTAL,// 横向 左右两个方向
DIRECTION_2_VERTICAL, // 纵向 上下两个方向
DIRECTION_4_ROTATE_0, // 四个方向
DIRECTION_4_ROTATE_45, // 四个方向 旋转45度
DIRECTION_8 // 八个方向

用法

准备工作

1.在project的build.gradle中添加

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

2.在module的build.gradle中添加

	dependencies {
	        implementation 'com.gitee.y141111:RockerView:1.0.0'
	}

3.xml中添加

    <com.shy.rockerview.MyRockerView
        android:id="@+id/rocker_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:areaBackground="@color/white"
        app:rockerBackground="@color/black"
        app:rockerSpeedLevel="10"
        app:rockerCallBackMode="CALL_BACK_MODE_STATE_CHANGE"
        app:rockerScale="0.5"/>

areaBackground 设置区域背景
rockerBackground 设置摇杆样式
rockerScale 设置摇杆的相对于背景的比例
rockerSpeedLevel 设置当前位置相对于中心点的距离的比例
rockerCallBackMode 有变化就回调，或者是方向改变才会回调

4.在Activity中添加

八方向示例

1).添加方向监听（方向发生改变触发）
        MyRockerView rockerView = binding.rockerView;
        
        rockerView.setOnShakeListener(MyRockerView.DirectionMode.DIRECTION_8, new MyRockerView.OnShakeListener() {
            @Override
            public void onStart() {
                
            }

            @Override
            public void direction(MyRockerView.Direction direction) {
                switch (direction){
                    case DIRECTION_CENTER:
                        // 中心方向触发事件，一般归零
                        break;
                    case DIRECTION_UP:
                        // 上 触发事件
                        break;
                    case DIRECTION_UP_RIGHT:
                        // 上右 触发事件
                        break;
                    case DIRECTION_RIGHT:
                        break;
                    case DIRECTION_DOWN_RIGHT:
                        break;
                    case DIRECTION_DOWN:
                        break;
                    case DIRECTION_DOWN_LEFT:
                        break;
                    case DIRECTION_LEFT:
                        break;
                    case DIRECTION_UP_LEFT:
                        break;
                }
            }

            @Override
            public void onFinish() {

            }
        });
2).添加角度监听（角度发生改变触发）
        rockerView.setOnAngleChangeListener(new MyRockerView.OnAngleChangeListener() {
            @Override
            public void onStart() {
                
            }

            @Override
            public void angle(double angle) {
                // 角度发生改变 触发事件 当前角度 angle
            }

            @Override
            public void onFinish() {

            }
        });
3).添加距离监听（距离发生改变触发）
        rockerView.setOnDistanceLevelListener(new MyRockerView.OnDistanceLevelListener() {
            @Override
            public void onDistanceLevel(int level) {
                // 距中心点距离发生改变 触发事件
            }
        });

四方向示例

旋转45度才是正常情况下使用的四方向

1).添加方向监听（方向发生改变触发）

        MyRockerView rockerView = binding.rockerView;

        rockerView.setOnShakeListener(MyRockerView.DirectionMode.DIRECTION_4_ROTATE_45, new MyRockerView.OnShakeListener() {
            @Override
            public void onStart() {

            }

            @Override
            public void direction(MyRockerView.Direction direction) {
                switch (direction){
                    case DIRECTION_CENTER:
                        // 中心方向触发事件，一般归零
                        break;
                    case DIRECTION_UP:
                        // 上 触发事件
                        break;
                    case DIRECTION_RIGHT:
                        // 右 触发事件
                        break;
                    case DIRECTION_DOWN:
                        // 下 触发事件
                        break;
                    case DIRECTION_LEFT:
                        // 左 触发事件
                        break;
                }
            }

            @Override
            public void onFinish() {

            }
        });
2).添加角度监听，角度发生改变触发
        rockerView.setOnAngleChangeListener(new MyRockerView.OnAngleChangeListener() {
            @Override
            public void onStart() {
                
            }

            @Override
            public void angle(double angle) {
                // 角度发生改变 触发事件 当前角度 angle
            }

            @Override
            public void onFinish() {

            }
        });
3).添加距离监听（距离发生改变触发）
        rockerView.setOnDistanceLevelListener(new MyRockerView.OnDistanceLevelListener() {
            @Override
            public void onDistanceLevel(int level) {
                // 距中心点距离发生改变 触发事件
            }
        });

角度和距离发生改变触发的是相同的监听事件

源代码

控件已开源，gitee项目地址:https://gitee.com/y141111/RockerView

指针不南
关注
  • 10
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
专栏目录
Android自定义View实现游戏摇杆键盘的方法示例
08-29
Android进阶过程中有一个绕不开的话题——自定义View。最近在做项目中又遇到了，所以下面这篇文章主要给大家介绍了利用Android自定义View实现游戏摇杆键盘的相关资料，操作方式类似王者荣耀的摇杆操作，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。
Android自定义摇杆实现蓝牙控制小车
05-17
1）控制摇杆由摇杆（小圆）和底座（大圆）组成； 2）全屏触摸，摇杆位置不离开底座范围； 3）停止触摸，摇杆恢复到中心，小车停止运动； 4）摇杆分成6个方向，分别控制小车 前进、后退、前进左、前进右、后退左、后退右。
RockerView:基于Android的Custom-Rocker的简单Demo
06-26
摇杆视图 基于Android的Custom-Rocker的简单Demo。
【Android游戏开发二十四】360°平滑游戏摇杆（触屏方向导航）
热门推荐
李华明Himi
05-16 2万+
李华明Himi 原创,转载务必在明显处注明：转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/384.html ,  此章节为正在创作的游戏开发书籍中的一部分，由于写书的缘故很久没有更新了，挺对不起大家的；那么今天放出书中的一部分，让大家先睹为快吧；  在Android系统的手机，有的根本没有实体的上下左右导航按键，所以很多游戏
android获取摇杆半径的方法,Android开发:360度平滑游戏摇杆(触屏方向导航)
weixin_42610671的博客
05-26 394
在Android系统的手机，有的根本没有实体的上下左右导航按键，所以很多游戏都会有利用Android手机都具有触屏的特性，制作360度摇杆来取代游戏方向键，这样不仅能使界面UI变得很美观，而且更加的方便操作；下面先来看效果吧：下面开始实现：首先，肯定是绘制两个圆形，无可置疑；圆心点重合，为了区分 ，所以设置了不同颜色；灰色：固定不动的摇杆背景(也意味着摇杆的活动范围)；红色：摇杆；然后考虑：红色摇...
android虚拟摇杆
0729Liang
04-05 8917
虚拟摇杆一资源下载效果如下：第一步：attr 中定义自定义参数，如下：&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;resources&gt;    &lt;!--    areaBackground 设置区域背景    rockerBackground 设置摇杆的样式    rockerScale 设置摇杆的相对于背景的比例    rockerS...
android摇杆控件四方向,JK-RockerView Android 虚拟摇杆，多种模式回调，返回距离级别，方向，角度。 @codeKK Android开源站...
weixin_34611277的博客
05-25 687
Android 虚拟摇杆使用方法①attr 中定义自定义参数②复制 RockerView 到项目中③使用摇杆控件android:id="@+id/my_rocker"android:layout_width="200dp"android:layout_height="200sp"android:background="@color/colorPrimary"app:areaBackground="...
android 手柄摇杆代码,android虚拟手柄摇杆的实现
weixin_39997310的博客
05-26 419
最近的项目开发中的一个任务是实现Android虚拟手柄界面，如图所示： 界面是一个SurfaceView，摇杆和按键都是通过画图显示出来的，这里详细介摇杆的实现，当用户点击摇杆即中间的黄球时，然后可以再圆圈内移动，这里运用了三角函数的知识，我们可以把黄球的中心点为一个含有4个象限的坐标的中心，当黄球移动的位置超出了圆圈时，就让黄球的位置设置为相对于坐标中心同一角度圆圈的边缘的点上的位置。下面直接上...
android 摇杆控件实现RockerView
andylauren的专栏
08-22 2453
android 摇杆控件实现RockerView
Android控件晃动效果实现
安卓加油
11-04 1426
Android控件晃动效果实现 原创 2016-08-12 亚运 Android学习交流 动画是android中的重要组成部分，可以让APP的交互更有趣味性，今天介绍的这个小实例可以用于提醒功能。首先看一下效果如下： 这个效果也可以用在密码错误时的提示，下面看一下代码： activity_main.xml： xml version="1
qt+自定义的摇杆控件
11-21
控件类实时输出横纵坐标，作为子控件使用，大小可调节，可供大家学习参考
Android代码-JK-RockerView
08-06
Android虚拟摇杆 使用方法 ①attr中定义自定义参数 <!-- areaBackground 设置区域背景 rockerBackground 设置摇杆的样式 rockerScale 设置摇杆的相对于背景的比例 rockerSpeedLevel 设置当前位置相对于中心点的距离的比例 如：10 则中心点到边缘的距离分为10分 越靠外数值越大0-10 rockerCallBackMode 有变化就回调，或者是方向改变才会回调--> ②复制RockerView到项目中 ③使用摇杆控件 ③事件回调 mRockerView.setOnShakeListener(DIRECTION_8, new RockerView.OnShakeListener() { @Override public void onStart() { } @Override public void direction(RockerView.Direction direction) {
【AndroidStudio】安卓虚拟摇杆组件
04-20
1.标准化的安卓页面虚拟摇杆 2.可获取虚拟摇杆的X、Y偏离值 3.横屏左右两个虚拟摇杆。 具体使用查看文章：https://blog.csdn.net/xanadw/article/details/124234671
Android自定义摇杆控件
10-21
一个用贴图片的方式制作的摇杆控件。
Android开发自定义游戏摇杆键盘
03-22
Android开发之自定义View实现的游戏摇杆键盘，类似于王者荣耀遥感效果，游标跟随,方向判定，计算等等
自定义安卓摇杆源码
12-11
自定义摇杆源码,使用于AndroidUI的源码，属于java文件，配合自定义的layout文件使用。
android 手机端360度摇杆自定义
11-29
安卓手机端 模仿操控杆 实现360度自定义滑动摇杆，自定义角度和力度
【AndroidStudio】安卓虚拟摇杆组件demo
04-20
1.标准化的安卓页面虚拟摇杆的演示demo项目 2.横屏左右两个摇杆，并且可获取虚拟摇杆的X、Y偏离值 具体使用查看文章：https://blog.csdn.net/xanadw/article/details/124234671
Android虚拟摇杆
最新发布
09-22
Android虚拟摇杆
android自定义摇杆
05-18
Android 自定义摇杆可以通过继承 View 或者 ViewGroup 来实现。以下是一个简单的实现步骤： 1. 创建一个自定义 View 或者 ViewGroup，命名为 JoystickView。 2. 在 JoystickView 中定义一些必要的属性，例如大小、颜色、形状等。 3. 在 JoystickView 中重写 onMeasure() 方法，根据用户设置的大小来测量 View 的宽高。 4. 在 JoystickView 中重写 onDraw() 方法，绘制摇杆和底盘。 5. 在 JoystickView 中重写 onTouchEvent() 方法，处理用户触摸事件，计算出摇杆的位置并通知监听器。 6. 创建一个 JoystickListener 接口，并在 JoystickView 中定义一个 setJoystickListener() 方法，用于设置监听器。 7. 在 JoystickView 中实现回调接口，当摇杆位置发生变化时，通知监听器。 下面是一个简单的代码示例： ```java public class JoystickView extends View { private Paint paint; private int centerX; private int centerY; private int baseRadius; private int hatRadius; private JoystickListener joystickListener; public JoystickView(Context context) { super(context); init(); } public JoystickView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public JoystickView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.FILL); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int size = Math.min(width, height); setMeasuredDimension(size, size); centerX = size / 2; centerY = size / 2; baseRadius = size / 3; hatRadius = size / 6; } @Override protected void onDraw(Canvas canvas) { // 绘制底盘 paint.setColor(Color.GRAY); canvas.drawCircle(centerX, centerY, baseRadius, paint); // 绘制摇杆 paint.setColor(Color.RED); canvas.drawCircle(centerX, centerY, hatRadius, paint); } @Override public boolean onTouchEvent(MotionEvent event) { float distance = (float) Math.sqrt(Math.pow(event.getX() - centerX, 2) + Math.pow(event.getY() - centerY, 2)); if (distance > baseRadius) { return true; } switch (event.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: float x = event.getX(); float y = event.getY(); invalidate(); if (joystickListener != null) { joystickListener.onJoystickMoved((x - centerX) / baseRadius, (y - centerY) / baseRadius); } break; case MotionEvent.ACTION_UP: invalidate(); if (joystickListener != null) { joystickListener.onJoystickReleased(); } break; } return true; } public void setJoystickListener(JoystickListener listener) { joystickListener = listener; } public interface JoystickListener { void onJoystickMoved(float xPercent, float yPercent); void onJoystickReleased(); } } ``` 使用示例： ```java public class MainActivity extends AppCompatActivity implements JoystickView.JoystickListener { private TextView directionTextView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); directionTextView = findViewById(R.id.direction_text_view); JoystickView joystickView = findViewById(R.id.joystick_view); joystickView.setJoystickListener(this); } @Override public void onJoystickMoved(float xPercent, float yPercent) { String direction = ""; if (xPercent < -0.5) { direction += "LEFT "; } else if (xPercent > 0.5) { direction += "RIGHT "; } if (yPercent < -0.5) { direction += "UP"; } else if (yPercent > 0.5) { direction += "DOWN"; } directionTextView.setText(direction); } @Override public void onJoystickReleased() { directionTextView.setText(""); } } ``` 以上示例中，我们在 MainActivity 中设置了一个 JoystickListener 监听器，当摇杆位置发生变化时，就会调用 onJoystickMoved() 方法。在 onJoystickMoved() 方法中，我们计算出摇杆的位置百分比，并根据百分比来判断摇杆的方向。最后将方向显示在 TextView 中。当用户松开摇杆时，我们会调用 onJoystickReleased() 方法，清空 TextView 中的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

指针不南

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值