Android自定义摇杆

转载请说明出处!
作者:kqw攻城狮
出处:个人站 | CSDN


部署

To get a Git project into your build:

Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

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

Step 2. Add the dependency

dependencies {
        compile 'com.github.kongqw:AndroidRocker:1.0.1'
}

使用

XML

<com.kongqw.rockerlibrary.view.RockerView
    android:id="@+id/rockerView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    kongqw:areaBackground="@drawable/default_area_bg"
    kongqw:rockerBackground="@drawable/default_rocker_bg"
    kongqw:rockerRadius="30dp" />

Activity

初始化

RockerView rockerView = (RockerView) findViewById(R.id.rockerView);

设置回调模式

// 设置回调模式
rockerView.setCallBackMode(RockerView.CallBackMode.CALL_BACK_MODE_STATE_CHANGE);

监听摇动方向

// 监听摇动方向
rockerView.setOnShakeListener(RockerView.DirectionMode.DIRECTION_8, new RockerView.OnShakeListener() {
    @Override
    public void onStart() {
        mLogLeft.setText(null);
    }

    @Override
    public void direction(RockerView.Direction direction) {
        mLogLeft.setText("摇动方向 : " + getDirection(direction));
    }

    @Override
    public void onFinish() {
        mLogLeft.setText(null);
    }
});

监听摇动角度

// 监听摇动角度
rockerViewRight.setOnAngleChangeListener(new RockerView.OnAngleChangeListener() {
    @Override
    public void onStart() {
        mLogRight.setText(null);
    }

    @Override
    public void angle(double angle) {
        mLogRight.setText("摇动角度 : " + angle);
    }

    @Override
    public void onFinish() {
        mLogRight.setText(null);
    }
});

效果图

效果图

效果图

源码

KqwRockerDemo

喜欢就给个star,谢谢!

功能

  • 支持自适应大小
  • 支持2个方向、4个方向、8个方向的摇动监听
  • 支持摇动角度获取
  • 可选回调模式
  • 支持可摇动区域自定义
  • 支持摇杆自定义
  • 支持设置图片、色值、Shape图形

使用

<kong.qingwei.rockerlibrary.RockerView
    android:id="@+id/rockerView_center"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_centerHorizontal="true"
    kongqw:areaBackground="#FF333333"
    kongqw:rockerBackground="#FF987654"
    kongqw:rockerRadius="15dp" />

参数

参数是否必须描述
areaBackground可选可摇动区域的背景
rockerBackground可选摇杆的背景
rockerRadius可选摇杆半径

设置回调方式

setCallBackMode(CallBackMode mode)

参数

回调方式描述
CALL_BACK_MODE_MOVE有移动就立刻回调
CALL_BACK_MODE_STATE_CHANGE状态有变化的时候回调

监听摇动角度

返回角度的取值范围:[0°,360°)

取值范围

setOnAngleChangeListener(OnAngleChangeListener listener)

监听摇动方向

setOnShakeListener(DirectionMode directionMode, OnShakeListener listener)

支持监听的方向

方向描述
DIRECTION_2_HORIZONTAL左右两个方向横向 左右两个方向
DIRECTION_2_VERTICAL上下两个方向纵向 上下两个方向
DIRECTION_4_ROTATE_0四个方向四个方向
DIRECTION_4_ROTATE_45四个方向 旋转45°四个方向 旋转45°
DIRECTION_8八个方向八个方向

方向描述

方向描述
DIRECTION_LEFT
DIRECTION_RIGHT
DIRECTION_UP
DIRECTION_DOWN
DIRECTION_UP_LEFT左上
DIRECTION_UP_RIGHT右上
DIRECTION_DOWN_LEFT左下
DIRECTION_DOWN_RIGHT右下
DIRECTION_CENTER中间

例子

RockerView rockerViewLeft = (RockerView) findViewById(R.id.rockerView_left);
if (rockerViewLeft != null) {
    rockerViewLeft.setCallBackMode(RockerView.CallBackMode.CALL_BACK_MODE_STATE_CHANGE);
    rockerViewLeft.setOnShakeListener(RockerView.DirectionMode.DIRECTION_8, new RockerView.OnShakeListener() {
        @Override
        public void onStart() {
            mLogLeft.setText(null);
        }

        @Override
        public void direction(RockerView.Direction direction) {
            mLogLeft.setText("摇动方向 : " + getDirection(direction));
        }

        @Override
        public void onFinish() {
            mLogLeft.setText(null);
        }
    });
}

RockerView rockerViewRight = (RockerView) findViewById(R.id.rockerView_right);
if (rockerViewRight != null) {
    rockerViewRight.setOnAngleChangeListener(new RockerView.OnAngleChangeListener() {
        @Override
        public void onStart() {
            mLogRight.setText(null);
        }

        @Override
        public void angle(double angle) {
            mLogRight.setText("摇动角度 : " + angle);
        }

        @Override
        public void onFinish() {
            mLogRight.setText(null);
        }
    });
}
  • 26
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 33
    评论
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 中的内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值