实现一个视图在固定圆圈内移动

2024-02-04 10:18
文章标签 实现 圆圈 视图 移动 固定

本文主要是介绍实现一个视图在固定圆圈内移动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

    我们知道，在android4.0系统原生的滑动锁屏中，用户可以拖动中心的图标在固定的圆圈内移动。本文将以一个小Demo来实现类似这种绕着固定圆圈内拖动图标。

    这个Demo有两个类：

    1. MainActivity：继承Activity，主要用来承载MainView这个自定义ViewGroup类；

    2. MainView：自定义ViewGroup，继承ViewGroup，是本Demo核心类，功能的实现都在这个自定义View类里了；


    MainActivity的代码如下:

package com.example.hu.tvt;import android.app.Activity;
import android.os.Bundle;public class MainActivity extends Activity 
{/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//加载MainViewsetContentView(new MainView(this));}
}

  MainView的代码如下： 

package com.example.hu.tvt;import android.content.Context;
import android.graphics.Rect;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;public class MainView extends ViewGroup 
{private static final boolean DBG = true;private static final String TAG = "MainView";private int mWidth, mHight;//手机屏幕高度的一半private int mScreenHalfWidth;private int mAlphaViewWidth, mAlphaViewHeight;private int mCenterViewWidth, mCenterViewHeight;private int mCenterViewTop, mCenterViewBottom;private int mAlphaViewTop, mAlphaViewBottom;private boolean mTracking = false;private Rect mCenterViewRect;private ImageView mCenterView, mAlphaView;private AlphaAnimation mAlphaAnimation;public MainView(Context context){super(context);initViews(context);onAnimationStart();}//获取图标，将获取的图标添加入MainView，设置图标的可见性private void initViews(Context context){mAlphaView = new ImageView(context);mAlphaView.setImageResource(R.drawable.alpha);setViewsLayout(mAlphaView);mAlphaView.setVisibility(View.INVISIBLE);mCenterView = new ImageView(context);mCenterView.setImageResource(R.drawable.centure);setViewsLayout(mCenterView);mCenterView.setVisibility(View.VISIBLE);}//设置获取图标的参数，并添加到MainViewprivate void setViewsLayout(ImageView image) {image.setScaleType(ScaleType.CENTER);image.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));addView(image);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubif (changed){mWidth = r;mHight = b;//mHalfWidth >> 1为向右位移1位，相当于mHalfWidth / 2。采用位移的原因是计算效率比较高。mScreenHalfWidth = mWidth >> 1;getViewMeasure();//中心图标顶部到屏幕顶部的距离mCenterViewTop = mHight / 2 - (mCenterViewHeight >> 1);//中心图标底部部到屏幕顶部的距离mCenterViewBottom = mHight / 2 + (mCenterViewHeight >> 1);//显示动画的图标顶部到屏幕顶部的距离mAlphaViewTop = mHight / 2 - (mAlphaViewHeight >> 1);//显示动画的图标底部到屏幕顶部的距离mAlphaViewBottom = mHight / 2 + (mAlphaViewHeight >> 1);setChildViewLayout();//创建中心图标所在矩形区域mCenterViewRect = new Rect(mWidth / 2 - mAlphaViewWidth / 2, mAlphaViewTop,mWidth / 2 + mAlphaViewWidth / 2, mAlphaViewBottom);}}//获取中心图片和显示动画图片的宽、高private void getViewMeasure(){mAlphaView.measure(View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));//显示动画图标的宽mAlphaViewWidth = mAlphaView.getMeasuredWidth();//显示动画图标的高mAlphaViewHeight = mAlphaView.getMeasuredHeight();mCenterView.measure(View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));//中心图标的宽mCenterViewWidth = mCenterView.getMeasuredWidth();//中心图标的高mCenterViewHeight = mCenterView.getMeasuredHeight();}//设置各图标在MainView中的布局private void setChildViewLayout(){mAlphaView.layout(mScreenHalfWidth - mAlphaViewWidth / 2, mAlphaViewTop,mScreenHalfWidth + mAlphaViewWidth / 2, mAlphaViewBottom);mCenterView.layout(mScreenHalfWidth - mCenterViewWidth / 2, mCenterViewTop,mScreenHalfWidth + mCenterViewWidth / 2, mCenterViewBottom);}//停止显示动画@Overrideprotected void onAnimationEnd() {// TODO Auto-generated method stubsuper.onAnimationEnd();if (mAlphaAnimation != null){mAlphaAnimation = null;}mAlphaView.setAnimation(null);}//显示中心图标动画@Overrideprotected void onAnimationStart() {// TODO Auto-generated method stubsuper.onAnimationStart();mAlphaView.setVisibility(View.VISIBLE);if (mAlphaAnimation == null) {mAlphaAnimation = new AlphaAnimation(0.0f, 1.0f);mAlphaAnimation.setDuration(1000);}mAlphaAnimation.setRepeatCount(Animation.INFINITE);mAlphaView.startAnimation(mAlphaAnimation);}//用户手机点下屏幕时首先会先调用执行该函数，然后再执行onTouchEvent@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if(DBG) Log.d(TAG, "onInterceptTouchEvent()");final int action = ev.getAction();final float x = ev.getX();final float y = ev.getY();switch (action) {case MotionEvent.ACTION_DOWN://手指点在中心图标范围区域内if (mCenterViewRect.contains((int) x, (int) y)) {mTracking = true;onAnimationEnd();mAlphaView.setVisibility(View.INVISIBLE);return true;} break;default:break;}return super.onInterceptTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent event){/*mTracking为true时，说明中心图标被点击移动* 即只有在中心图标被点击移动的情况下，onTouchEvent* 事件才会触发。*/if (mTracking){final int action = event.getAction();final float nx = event.getX();final float ny = event.getY();switch (action) {case MotionEvent.ACTION_DOWN:break;case MotionEvent.ACTION_MOVE://中心图标移动handleMoveView(nx, ny);break;case MotionEvent.ACTION_UP:mTracking = false;resetMoveView();break;case MotionEvent.ACTION_CANCEL:mTracking = false;resetMoveView();break;}}if(DBG) Log.d(TAG, "onTouchEvent()");return mTracking || super.onTouchEvent(event);}//实现图标在固定圆圈内移动的方法private void handleMoveView(float x, float y){int mHalfCenterViewWidth = mCenterViewWidth >> 1;//Radius为中心图标移动的限定的圆范围区域半径(可根据自己的需要设置大小)int Radius = mCenterViewWidth + mHalfCenterViewWidth;//int Radius = 100;/*若用户手指移动的点与中心点的距离长度大于Radius，则中心图标坐标位置限定在移动区域范围圆弧上。* 一般是用户拖动中心图标，手指移动到限定圆范围区域外。*/if (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mCenterViewWidth / 2))) > Radius)		{//原理为x1 / x = r1 / r ，此时的x，y为以Radius为半径的圆圈圆弧上的坐标x = (float) ((Radius / (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mHalfCenterViewWidth))))) * (x - mScreenHalfWidth) + mScreenHalfWidth);y = (float) ((Radius / (Math.sqrt(dist2(x - mScreenHalfWidth, y - (mCenterView.getTop() + mHalfCenterViewWidth))))) * (y - (mCenterView.getTop() + mHalfCenterViewWidth)) + mCenterView.getTop() + mHalfCenterViewWidth);}/*图形的坐标是以左上角为基准的，* 所以，为了使手指所在的坐标和图标的中心位置一致，* 中心坐标要减去宽度和高度的一半。*/mCenterView.setX((int)x - mCenterView.getWidth()/2);mCenterView.setY((int)y - mCenterView.getHeight()/2);invalidate();}//平方和计算private float dist2(float dx, float dy){return dx * dx + dy * dy;}//重置中心图标，回到原位置private void resetMoveView(){mCenterView.setX(mWidth / 2 - mCenterViewWidth /2);	mCenterView.setY((mCenterView.getTop() + mCenterViewHeight / 2) - mCenterViewHeight / 2);onAnimationStart();invalidate();}
}

  代码实现总结：

     1. 代码中的handleMoveView函数是计算图标在固定圆圈中移动的核心方法。

     2. 当我们移动中心图标时，会调用onTouchEvent方法，然后会获得用户手指所在屏幕点的移动坐标。

     3. 将获得的移动坐标作为参数传到handleMoveView，在handleMoveView方法里再对坐标的选定判断处理。

     4. 当用户移动图标超出限定的圆圈(移动坐标相对图标原始位置的偏移量形成的直角三角形的斜边大于限定圆圈半径时)，那么这时候就将图标移动定格在限定圆圈的圆弧上。

     5. 至于圆弧点的坐标值，可根据获得的用户手指所在屏幕的坐标值(即通过onTouchEvent获得的坐标值)通过比例计算得到相应的圆弧点的坐标值(注：x，y的偏移量和半径连成一个直角三角形，所以可以通过比例等值计算得到圆弧的坐标值)。

     6. 得到圆弧点上的坐标值后，就可以通过设置中心图标的坐标值移动图标到相应的坐标点了。


     ok，关于实现一个视图在固定圆圈内移动就到此结束了，有时间会在此基础上开发一个基于第三方应用的锁屏；

    相关Demo代码下载链接：http://download.csdn.net/detail/stevenhu_223/5591373

这篇关于实现一个视图在固定圆圈内移动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/677150。

相关文章

使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2