Android | 自定义摇杆控件

最新推荐文章于 2024-06-24 19:18:07 发布
最新推荐文章于 2024-06-24 19:18:07 发布
阅读量3.4k 收藏 51
点赞数 11
分类专栏： 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

Android自定义view摇杆,Android 自定义摇杆控件（使用图片）
weixin_26759093的博客
05-25 1020
效果图 1.找两张图片1)Joystick背景图片circle_1.png 2)Joystick图片circle_2.png 2.在layout中创建布局文件 imagejoystick.xml内容为：xml version="1.0"encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"and...
Android自定义摇杆
erhtre的博客
04-30 617
Activity。
【AndroidStudio】安卓虚拟摇杆组件
04-20
1.标准化的安卓页面虚拟摇杆 2.可获取虚拟摇杆的X、Y偏离值 3.横屏左右两个虚拟摇杆。 具体使用查看文章：https://blog.csdn.net/xanadw/article/details/124234671
Android 自定义摇杆控件（使用图片）
cx415462822的专栏
10-21 4041
效果图 1.找两张图片  1）Joystick背景图片circle_1.png   2）Joystick图片circle_2.png   2.在layout中创建布局文件 imagejoystick.xml 内容为： &lt;?xml version="1.0"encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="h...
Android自定义摇杆控件
10-21
一个用贴图片的方式制作的摇杆控件。
Android自定义摇杆实现蓝牙控制小车
05-17
1）控制摇杆由摇杆（小圆）和底座（大圆）组成； 2）全屏触摸，摇杆位置不离开底座范围； 3）停止触摸，摇杆恢复到中心，小车停止运动； 4）摇杆分成6个方向，分别控制小车 前进、后退、前进左、前进右、后退左、后退右。
Android虚拟摇杆
09-22
综上所述，Android虚拟摇杆的实现涉及自定义视图组件、图形绘制、触摸事件处理、坐标计算等多个方面。`JK-RockerView`可能就是一个完整的虚拟摇杆解决方案，包含了上述所有功能。在实际项目中，开发者可以根据需求对...
Android自定义View之游戏摇杆键盘实现(一)
2401_84149339的博客
05-04 796
其实客户端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。然而Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。贵在坚持！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！
Android自定义view摇杆,Android自定义摇杆
weixin_29914581的博客
05-25 392
转载请说明出处！作者：kqw攻城狮出处：个人站 | CSDN效果图效果图效果图源码喜欢就给个star，谢谢！功能支持自适应大小支持2个方向、4个方向、8个方向的摇动监听支持摇动角度获取可选回调模式支持可摇动区域自定义支持摇杆自定义支持设置图片、色值、Shape图形使用android:id="@+id/rockerView_center"android:layout_width="100dp"and...
Android自定义虚拟摇杆，虚拟四分按盘，左右拖动按盘
06-23
虚拟摇杆，上下左右控制，可控速度，可改颜色背景阴影； 虚拟按盘，上下左右控制，形状可变圆形或椭圆； 左右拖动控制组件；
【AndroidStudio】安卓虚拟摇杆组件demo
04-20
1.标准化的安卓页面虚拟摇杆的演示demo项目 2.横屏左右两个摇杆，并且可获取虚拟摇杆的X、Y偏离值 具体使用查看文章：https://blog.csdn.net/xanadw/article/details/124234671
android 开发之虚拟摇杆
11-19
android 虚拟摇杆，可用于游戏、遥控小车、四轴控制
android摇杆控制小球（实现了8方向），带简陋按钮，可以实现小球开炮操作
04-10
eclipse开发环境，android摇杆控制小球（实现了8方向），带简陋按钮，可以实现小球开炮操作
android 自定义遥杆,Android自定义摇杆实现蓝牙控制小车
weixin_34688966的博客
05-28 690
【实例简介】1)控制摇杆由摇杆(小圆)和底座(大圆)组成；2)全屏触摸，摇杆位置不离开底座范围；3)停止触摸，摇杆恢复到中心，小车停止运动；4)摇杆分成6个方向，分别控制小车 前进、后退、前进左、前进右、后退左、后退右。【实例截图】【核心代码】service.tar└── service├── AndroidManifest.xml├── ic_launcher-web.png├── libs│...
android 摇杆控件实现RockerView
andylauren的专栏
08-22 2869
android 摇杆控件实现RockerView
Android自定义view摇杆,Android仿游戏摇杆 自定义控件
weixin_42510140的博客
05-25 419
Android上使用FrameLayout制作游戏摇杆控件 先看效果图这里写图片描述首先设置监听view.setCallback(callback);private CircleViewByImage.ActionCallback callback = new CircleViewByImage.ActionCallback() {@Overridepublic void forwardMove(...
一丶Android如何自定义一个固定的飞行操作摇杆?
qq_29382709的博客
07-29 1178
自定义控件这一块，今天我就教大家如何来自定义一个无人飞行器的固定摇杆控件，摇杆是固定在手机屏幕的固定位置，点击的对应区域高亮，并且实时对飞行器的轨迹控制。
Android自定义游戏摇杆、方向轮盘控件
最新发布
weixin_44397129的博客
06-24 825
安卓游戏手柄控件，摇杆控件，自定义控件，Android studio学习提高
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

指针不南

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

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

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

打赏作者

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

抵扣说明：

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

余额充值