iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >如何在android中制作一个方向轮盘详解
  • 760
分享到

如何在android中制作一个方向轮盘详解

2024-04-02 19:04:59 760人浏览 独家记忆
摘要

目录先上效果图原理很简单,其实就是一个自定义的view计算滑块位置的原理:通用性很好的接口:小技巧:代码部分写在最后:先上效果图 原理很简单,其实就是一个自定义的view 通过观察

先上效果图

原理很简单,其实就是一个自定义的view

通过观察,很容易发现,我们自己的轮盘就两个view需要绘制,一个是外面的圆盘,一个就随手指移动的滑块;
外面的圆盘很好绘制,内部的滑块则需要采集手指的位置,根据手指的位置计算出滑块在大圆内的位置;
最后,我们做的UI不是单纯做一个UI吧,肯定还是要用于实际应用中去,所以要加一个通用性很好的回调.

计算滑块位置的原理:

  • 当触摸点在大圆与小圆的半径差之内:
    那么滑块的位置就是触摸点的位置
  • 当触摸点在大圆与小圆的半径差之外:

已知大圆圆心坐标(cx,cy),大圆半径rout,小圆半径rinside,触摸点的坐标(px,py)
求小圆的圆心(ax,ay)?

作为经过九义的你我来说,这不就是一个简简单单的数学题嘛,很容易就求解出小圆的圆心位置了。
利用三角形相似:

通用性很好的接口:

滑块在圆中的位置,可以很好的用一个二位向量来表示,也可以用两个浮点的变量来表示;

这个接口就可以很好的表示了小圆在大圆的位置了,他们的取值范围是[-1,1]

小技巧:

为了小圆能始终在脱手后回到终点位置,我们设计了一个动画,当然,实际情况中有一种情况是,你移动到某个位置后,脱手后位置不能动,那你禁用这个动画即可。

代码部分

tips:代码部分的变量名与原理的变量名有出入


public class ControllerView extends View implements View.OnTouchListener {
  private Paint borderPaint = new Paint();//大圆的画笔
  private Paint fingerPaint = new Paint();//小圆的画笔
  private float radius = 160;//默认大圆的半径
  private float centerX = radius;//大圆中心点的位置cx
  private float centerY = radius;//大圆中心点的位置cy
  private float fingerX = centerX, fingerY = centerY;//小圆圆心的位置(ax,ay)
  private float lastX = fingerX, lastY = fingerY;//小圆自动回归中点动画中上一点的位置
  private float innerRadius = 30;//默认小圆半径
  private float radiusBorder = (radius - innerRadius);//大圆减去小圆的半径
  private ValueAnimator positionAnimator;//自动回中的动画
  private MoveListener moveListener;//移动回调的接口

  public ControllerView(Context context) {
    super(context);
    init(context, null, 0);
  }

  public ControllerView(Context context,
      @Nullable AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
  }

  public ControllerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
  }

  //初始化
  private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    if (attrs != null) {
      TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ControllerView);
      int fingerColor = typedArray.getColor(R.styleable.ControllerView_fingerColor,
          Color.parseColor("#3fffffff"));
      int borderColor = typedArray.getColor(R.styleable.ControllerView_borderColor,
          Color.GRAY);
      radius = typedArray.getDimension(R.styleable.ControllerView_radius, 220);
      innerRadius = typedArray.getDimension(R.styleable.ControllerView_fingerSize, innerRadius);
      borderPaint.setColor(borderColor);
      fingerPaint.setColor(fingerColor);
      lastX = lastY = fingerX = fingerY = centerX = centerY = radius;
      radiusBorder = radius - innerRadius;
      typedArray.recycle();
    }
    setOnTouchListener(this);
    positionAnimator = ValueAnimator.ofFloat(1);
    positionAnimator.addUpdateListener(animation -> {
      Float aFloat = (Float) animation.getAnimatedValue();
      changeFingerPosition(lastX + (centerX - lastX) * aFloat, lastY + (centerY - lastY) * aFloat);
    });
  }

  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(getActualSpec(widthMeasureSpec), getActualSpec(heightMeasureSpec));
  }


  //处理wrapcontent的测量
  //默认wrapcontent,没有做matchParent,指定大小的适配
  //view实际的大小是通过大圆半径确定的
  public int getActualSpec(int spec) {
    int mode = MeasureSpec.getMode(spec);
    int len = MeasureSpec.getSize(spec);
    switch (mode) {
      case MeasureSpec.AT_MOST:
        len = (int) (radius * 2);
        break;
    }
    return MeasureSpec.makeMeasureSpec(len, mode);
  }

  //绘制
  @Override protected void onDraw(canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(centerX, centerY, radius, borderPaint);
    canvas.drawCircle(fingerX, fingerY, innerRadius, fingerPaint);
  }

  @Override public boolean onTouch(View v, MotionEvent event) {
    float evx = event.getX(), evy = event.getY();
    float deltaX = evx - centerX, deltaY = evy - centerY;
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        //圆外按压不生效
        if (deltaX * deltaX + deltaY * deltaY > radius * radius) {
          break;
        }
      case MotionEvent.ACTION_MOVE:
        //如果触摸点在圆外
        if (Math.abs(deltaX) > radiusBorder || Math.abs(deltaY) > radiusBorder) {
          float distance = (float) Math.sqrt(deltaX * deltaX + deltaY * deltaY);
          changeFingerPosition(centerX + (deltaX * radiusBorder / distance),
              centerY + (deltaY * radiusBorder / distance));
        } else { //如果触摸点在圆内
          changeFingerPosition(evx, evy);
        }
        positionAnimator.cancel();
        break;
      case MotionEvent.ACTION_UP:
        positionAnimator.setDuration(1000);
        positionAnimator.start();
        break;
    }
    return true;
  }

  
  private void changeFingerPosition(float fingerX, float fingerY) {
    this.fingerX = fingerX;
    this.fingerY = fingerY;
    if (moveListener != null) {
      float r = radius - innerRadius;
      if (r == 0) {
        invalidate();
        return;
      }
      moveListener.move((fingerX - centerX) / r, (fingerY - centerY) / r);
    }
    invalidate();
  }

  @Override protected void finalize() throws Throwable {
    super.finalize();
    positionAnimator.removeAllListeners();
  }

  public void setMoveListener(
      MoveListener moveListener) {
    this.moveListener = moveListener;
  }

  
  public interface MoveListener {
    void move(float dx, float dy);
  }
}

style.xml


<declare-styleable name="ControllerView">
  <attr name="fingerColor" fORMat="color" />
  <attr name="borderColor" format="color" />
  <attr name="fingerSize" format="dimension" />
  <attr name="radius" format="dimension" />
</declare-styleable>

写在最后:

这个是一个智能小车的安卓控制端的一部分demo,到此这篇关于如何在Android中制作一个方向轮盘的文章就介绍到这了,更多相关android制作方向轮盘内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何在android中制作一个方向轮盘详解

本文链接: https://www.lsjlt.com/news/135861.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在android中制作一个方向轮盘详解
    目录先上效果图原理很简单,其实就是一个自定义的view计算滑块位置的原理:通用性很好的接口:小技巧:代码部分写在最后:先上效果图 原理很简单,其实就是一个自定义的view 通过观察...
    99+
    2024-04-02
  • Android如何制作抽奖轮盘
    这篇文章主要介绍Android如何制作抽奖轮盘,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下main布局(图片资源请自行寻找,抱歉)<FrameLayout xmlns:android=&...
    99+
    2023-05-30
    android
  • win7如何制作一个U盘启动盘
    这篇文章主要讲解了“win7如何制作一个U盘启动盘”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“win7如何制作一个U盘启动盘”吧!制作一个U盘启动盘,这里以U盘装机大师为例。保持U盘与电脑...
    99+
    2023-07-01
  • 如何在Android中使用PopupWindow制作一个自定义弹窗
    本篇文章给大家分享的是有关如何在Android中使用PopupWindow制作一个自定义弹窗,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。代码:PopupWindow ...
    99+
    2023-05-31
    android popupwindow
  • 如何在Android应用中实现一个无限循环轮播
    如何在Android应用中实现一个无限循环轮播?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、自定义控件属性新建自定义控件SliderLayout继承于Rel...
    99+
    2023-05-31
    android roi
  • 如何在Android应用层中制作一个LED指示灯效果
    本篇文章给大家分享的是有关如何在Android应用层中制作一个LED指示灯效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。实现方法如下:public class LEDAct...
    99+
    2023-05-31
    android roi
  • 如何在Android中使用SurfaceView制作一个天气动画效果
    如何在Android中使用SurfaceView制作一个天气动画效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。首先是最终实现的效果图:初识 SurfaceV...
    99+
    2023-05-31
    android surfaceview sur
  • 如何在Android中利用viewpager实现一个无限轮播功能
    如何在Android中利用viewpager实现一个无限轮播功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。小圆点属性dot_focused.xml<xml&nbs...
    99+
    2023-05-30
    viewpager android
  • 如何在Android中利用Drawable绘制一个圆角
    如何在Android中利用Drawable绘制一个圆角?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1. 创建类RoundCircleDrawable继承Drawablepub...
    99+
    2023-05-30
    android drawable
  • 如何用Python制作一个C盘清理器
    今天小编给大家分享一下如何用Python制作一个C盘清理器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。关于python的文...
    99+
    2023-07-05
  • 在android应用中利用WebView制作一个进度条
    本篇文章为大家展示了在android应用中利用WebView制作一个进度条,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。进度条的位置问题 进度条加载完成后消失,是invisible还是go...
    99+
    2023-05-31
    android webview
  • 如何在Android中使用OpenGL绘制一个2D图形
    今天就跟大家聊聊有关如何在Android中使用OpenGL绘制一个2D图形,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体如下:Android为OpenGL ES支持提供了GLSu...
    99+
    2023-05-30
    android opengl
  • 如何在Android中实现一个圆盘旋转菜单效果
    本文章向大家介绍如何在Android中实现一个圆盘旋转菜单效果的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系统,主要使用于移动...
    99+
    2023-05-30
    android
  • 详解如何开发一个MyBatis通用Mapper的轮子
    目录一、前言二、需求三、实现原理四、代码实现1、自定义注解2、几个pojo,用来保存实体对应的信息3、定义开头说的BaseMapper4、SqlProvider5、实体类转Table...
    99+
    2022-12-21
    MyBatis通用Mapper轮子 MyBatis Mapper轮子 MyBatis Mapper
  • 怎么在android中利用recyclerview制作一个聊天界面
    本篇文章给大家分享的是有关怎么在android中利用recyclerview制作一个聊天界面,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。实现代码:package c...
    99+
    2023-05-31
    android recyclerview recycle
  • 在Android开发中使用View制作一个引导动画
    这篇文章将为大家详细讲解有关在Android开发中使用View制作一个引导动画,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、实现效果图关于贝塞尔曲线 二、实现代码自定义viewpacka...
    99+
    2023-05-31
    android view
  • 如何在html中实现一个轮播图效果
    这期内容当中小编将会给大家带来有关如何在html中实现一个轮播图效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些...
    99+
    2023-06-06
  • 详解如何通过Python制作一个密码生成器
    目录原由编程思路代码效果如下补充原由 定期更换密码是一种非常重要的安全措施,这种做法可以有效地保护你的账户和个人信息不受黑客和网络攻击者的侵害。 密码泄露是一个非常普遍的问题,许多人...
    99+
    2023-05-19
    Python实现密码生成器 Python密码生成器 Python密码
  • Android如何实现一个DocumentProvider示例详解
    目录前言步骤首先在Manifest 中注册这个Provider创建这个Provider重写queryRoot重写queryDocument重写getChildDocument前言 假...
    99+
    2022-12-25
    Android实现DocumentProvider Android DocumentProvider
  • 详解Python使用OpenCV如何确定一个对象的方向
    目录1.代码实现2.输出图像3.了解坐标轴4.计算0到180度之间的方向在本教程中,我们将构建一个程序,该程序可以使用流行的计算机视觉库 OpenCV 确定对象的方向(即以度为单位的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作