android脚本 附近的人,Android仿微信、QQ附近好友雷达扫描效果
1.概述
最近一直到在带实习生，因为人比较多，所以很长一段时间没有更新博客了，今天更新一篇雷达扫描附近好友效果，以后尽量每周更新一篇，先看一下效果：
2．实现
1、效果分析
效果分为两个部分，一个是上半部分的自定义RadarView，还有就是下半部分的ViewPager，至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍，这里主要实现扫描效果部分。
2、扫描效果实现
2.1自定义RadarView在onDraw()方法中画六个圆圈，至于圆圈的半径是多少我们需要通过onMeasure(int widthMeasureSpec, int heightMeasureSpec)测量方法获取控件的宽高来确定圆的半径，每个圆的半径是宽度的1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f，这只是自己测试出来感觉比较舒适的效果，下面请看代码：
//每个圆圈所占的比例
private static float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};
private Paint mPaintCircle;//画圆需要用到的paint
public class RadarView extends View {
public RadarView(Context context) {
this(context, null);
}
public RadarView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaintCircle = new Paint();
mPaintCircle.setColor(Color.WHITE);
mPaintCircle.setAntiAlias(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 获取控件的宽高
setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(widthMeasureSpec));
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
mWidth = mHeight = Math.min(mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
// 绘制六个白色圆圈
drawCircle(canvas);
}
/**
* 绘制圆线圈
*
* @param canvas
*/
private void drawCircle(Canvas canvas) {
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[1], mPaintLine); // 绘制最小圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[1], mPaintLine); // 绘制小圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[2], mPaintLine); // 绘制中圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[3], mPaintLine); // 绘制中大圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintLine); // 绘制大圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[5], mPaintLine); // 绘制大大圆
}
}
2.2下面需要去画中间的用户图像，可以运行看看中间的六个圆圈有没有达到效果，这里就不看了直接在onDraw()方法中画中间图像：
private Bitmap centerBitmap;//最中间icon
private void init(){
// 通过bitmap工厂区获取用户图像的bitmap
centerBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.circle_photo);
}
@Override
protected void onDraw(Canvas canvas) {
drawCenterIcon(canvas);
}
/**
* 绘制最中间的图标
*
* @param canvas
*/
private void drawCenterIcon(Canvas canvas) {
int iconWidth = mWidth * circleProportion[0];
canvas.drawBitmap(centerBitmap, 0,0,iconWidth ,iconWidth , null);
}
2.3最后只需要实现这个扫描的效果这个控件基本就完成了，第一需要开启线程不断调用invalidate()去更新onDraw()方法，第二需要熟悉扫描渲染SweepGradient这个类，如果这两个都没问题那么大功告成：
private Paint mPaintScan;//画扫描需要用到的paint
private Matrix matrix = new Matrix();//旋转需要的矩阵
private int mRoteDegree;//扫描旋转的角度
private Shader scanShader;//扫描渲染shader
public Runnable run = new Runnable() {
@Override
public void run() {
mRoteDegree +=2;
mRoteMatrix.postRotate(mRoteDegree,cx,cy);
invalidate();
postDelayed(run,60);
}
};
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//设置扫描渲染的shader
scanShader = new SweepGradient(mWidth / 2, mHeight / 2,
new int[]{Color.TRANSPARENT, Color.parseColor("#84B5CA")}, null);
}
@Override
protected void onDraw(Canvas canvas) {
drawScan(canvas);
}
/**
* 绘制扫描
*
* @param canvas
*/
private void drawScan(Canvas canvas) {
canvas.save();
mPaintScan.setShader(scanShader);
canvas.concat(matrix);
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintScan);
canvas.restore();
}
2.4.到这里我们来看一下扫描RadarView的效果
3. 实现添加数据效果RadarViewGroup,我们的图像附近点需要加入ViewGroup这里又需要自定义了，这里简单说一下自定ViewGroup：
1).onMeasure()测量方法这里就不说了
2).只要搞清楚onLayout()方法是干嘛的就Ok,ViewGroup里面的子View都显示在什么位置就是写在这个方法里面的，换句话说有的隔得近有的隔得远都是由 child.layout(int l, int t, int r, int b)决定的，下面我们看一下代码：
public class RadarViewGroup extends ViewGroup implements RadarView.IScanningListener {
private int mWidth, mHeight;//viewgroup的宽高
private SparseArray scanAngleList = new SparseArray<>();//记录展示的item所在的扫描位置角度
private SparseArray mDatas;//数据源
private int dataLength;//数据源长度
private int minItemPosition;//最小距离的item所在数据源中的位置
private CircleView currentShowChild;//当前展示的item
private CircleView minShowChild;//最小距离的item
private IRadarClickListener iRadarClickListener;//雷达图中点击监听CircleView小圆点回调接口
public void setiRadarClickListener(IRadarClickListener iRadarClickListener) {
this.iRadarClickListener = iRadarClickListener;
}
public RadarViewGroup(Context context) {
this(context, null);
}
public RadarViewGroup(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RadarViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(heightMeasureSpec));
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
mWidth = mHeight = Math.min(mWidth, mHeight);
//测量每个children
measureChildren(widthMeasureSpec, heightMeasureSpec);
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
if (child.getId() == R.id.id_scan_circle) {
//为雷达扫描图设置需要的属性
((RadarView) child).setScanningListener(this);
//考虑到数据没有添加前扫描图在扫描，但是不会开始为CircleView布局
if (mDatas != null && mDatas.size() > 0) {
((RadarView) child).setMaxScanItemCount(mDatas.size());
((RadarView) child).startScan();
}
continue;
}
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
//首先放置雷达扫描图
View view = findViewById(R.id.id_scan_circle);
if (view != null) {
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
}
//放置雷达图中需要展示的item圆点
for (int i = 0; i < childCount; i++) {
final int j = i;
final View child = getChildAt(i);
if (child.getId() == R.id.id_scan_circle) {
//如果不是Circleview跳过
continue;
}
//设置CircleView小圆点的坐标信息
//坐标 = 旋转角度 * 半径 * 根据远近距离的不同计算得到的应该占的半径比例
((CircleView) child).setDisX((float) Math.cos(Math.toRadians(scanAngleList.get(i - 1) - 5))
* ((CircleView) child).getProportion() * mWidth / 2);
((CircleView) child).setDisY((float) Math.sin(Math.toRadians(scanAngleList.get(i - 1) - 5))
* ((CircleView) child).getProportion() * mWidth / 2);
//如果扫描角度记录SparseArray中的对应的item的值为0，
// 说明还没有扫描到该item，跳过对该item的layout
//(scanAngleList设置数据时全部设置的value=0，
// 当onScanning时，value设置的值始终不会0，具体可以看onScanning中的实现)
if (scanAngleList.get(i - 1) == 0) {
continue;
}
//放置Circle小圆点
child.layout((int) ((CircleView) child).getDisX() + mWidth / 2, (int) ((CircleView) child).getDisY() + mHeight / 2,
(int) ((CircleView) child).getDisX() + child.getMeasuredWidth() + mWidth / 2,
(int) ((CircleView) child).getDisY() + child.getMeasuredHeight() + mHeight / 2);
//设置点击事件
child.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
resetAnim(currentShowChild);
currentShowChild = (CircleView) child;
//因为雷达图是childAt(0),所以这里需要作-1才是正确的Circle
startAnim(currentShowChild, j - 1);
if (iRadarClickListener != null) {
iRadarClickListener.onRadarItemClick(j - 1);
}
}
});
}
}
private int measureSize(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = 300;
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
/**
* 设置数据
*
* @param mDatas
*/
public void setDatas(SparseArray mDatas) {
this.mDatas = mDatas;
dataLength = mDatas.size();
float min = Float.MAX_VALUE;
float max = Float.MIN_VALUE;
//找到距离的最大值，最小值对应的minItemPosition
for (int j = 0; j < dataLength; j++) {
Info item = mDatas.get(j);
if (item.getDistance() < min) {
min = item.getDistance();
minItemPosition = j;
}
if (item.getDistance() > max) {
max = item.getDistance();
}
scanAngleList.put(j, 0f);
}
//根据数据源信息动态添加CircleView
for (int i = 0; i < dataLength; i++) {
CircleView circleView = new CircleView(getContext());
if (mDatas.get(i).getSex()) {
circleView.setPaintColor(getResources().getColor(R.color.bg_color_pink));
} else {
circleView.setPaintColor(getResources().getColor(R.color.bg_color_blue));
}
//根据远近距离的不同计算得到的应该占的半径比例 0.312-0.832
circleView.setProportion((mDatas.get(i).getDistance() / max + 0.6f) * 0.52f);
if (minItemPosition == i) {
minShowChild = circleView;
}
addView(circleView);
}
}
/**
* 雷达图没有扫描完毕时回调
*
* @param position
* @param scanAngle
*/
@Override
public void onScanning(int position, float scanAngle) {
if (scanAngle == 0) {
scanAngleList.put(position, 1f);
} else {
scanAngleList.put(position, scanAngle);
}
requestLayout();
}
/**
* 雷达图扫描完毕时回调
*/
@Override
public void onScanSuccess() {
LogUtil.m("完成回调");
resetAnim(currentShowChild);
currentShowChild = minShowChild;
startAnim(currentShowChild, minItemPosition);
}
/**
* 恢复CircleView小圆点原大小
*
* @param object
*/
private void resetAnim(CircleView object) {
if (object != null) {
object.clearPortaitIcon();
ObjectAnimator.ofFloat(object, "scaleX", 1f).setDuration(300).start();
ObjectAnimator.ofFloat(object, "scaleY", 1f).setDuration(300).start();
}
}
/**
* 放大CircleView小圆点大小
*
* @param object
* @param position
*/
private void startAnim(CircleView object, int position) {
if (object != null) {
object.setPortraitIcon(mDatas.get(position).getPortraitId());
ObjectAnimator.ofFloat(object, "scaleX", 2f).setDuration(300).start();
ObjectAnimator.ofFloat(object, "scaleY", 2f).setDuration(300).start();
}
}
/**
* 雷达图中点击监听CircleView小圆点回调接口
*/
public interface IRadarClickListener {
void onRadarItemClick(int position);
}
/**
* 根据position，放大指定的CircleView小圆点
*
* @param position
*/
public void setCurrentShowItem(int position) {
CircleView child = (CircleView) getChildAt(position + 1);
resetAnim(currentShowChild);
currentShowChild = child;
startAnim(currentShowChild, position);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
android脚本 附近的人,Android仿微信、QQ附近好友雷达扫描效果相关推荐
- 微信QQ附近好友雷达扫描
1.概述 最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果: 2．实现 1． 效果分析 效果分为两个部分,一个是 ...
- android标题栏不被顶上去,Android仿微信QQ聊天顶起输入法不顶起标题栏的问题
在这记录一下输入法弹出的一系列问题,有的输入法弹出就把整个布局弹上去,有的输入法弹出布局不会有变化,有的输入法弹出遮盖输入框等等问题,网上也有很多说加着加那的,但是看一下都不是很完整,解决不了所有问题 ...
- android 仿微信头像裁剪,Android仿微信QQ设置图形头像裁剪功能
最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue ...
- android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
- php仿微信朋友圈源码,Android开发仿微信发朋友圈浏览图片效果实例代码
这篇文章主要介绍了Android仿微信发朋友圈浏览图片效果的相关资料,需要的朋友可以参考下 先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路1.首先我们要获取数据源,数据源就是我们的每条说说 ...
- 仿 微信/QQ 实现小程序功能 -IOS
仿 微信/QQ 实现小程序功能 -IOS 1. 需求 首先,来大致看一下 微信/QQ 小程序的功能. Android端: 点击图标进入小程序,会新开一个任务栈,每个小程序一个任务栈(有的机型所有小程序 ...
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
- Vue3 PC桌面端聊天室｜vue3.0+elementPlus仿微信/QQ界面
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
最新文章
- 每日一篇——lodash—array——differenceBy
- 入门单片机需要购买什么东西，学哪款单片机最好？
- 关于 Angular 服务实例作用域的问题 - 使用组件限定服务提供者的作用域
- android读取excel文件_python里读写excel等数据文件的几种常用方式
- 我的世界javamod怎么装_装暖气片，10个有8个人都想知道的这点事儿！
- linux下网络编程设置非阻塞,UNIX网络编程 非阻塞connect的实现
- y7000p内存是一个16还是8+8_现货黄金创8年新高！黄金ETF年内净值增逾16％，买入还是离场？...
- 掌握rm命令删除文件
- Hive中NULL和''
- 电子工业出版社博文视点Open Party 新年聚会 圆满成功召开
- 斐讯K2路由器刷机_潘多拉PandoraBox固件
- 如何基于 Spark Streaming 构建实时计算平台
- 单点漫延问题（水陆判断、洪水漫延、无权最小路径）
- 【IOS】模仿抽屉新热榜动态启动页YFSplashScreen
- 微信摇心愿如何选不同服务器,2020微信游戏摇心愿活动参与方法介绍
- python小玩具（恶俗古风生成器）
- does not specify a Swift version and none of the targets (`packager`) integrating it have the `SWIFT
- 有参构造方法的作用和无参构造方法的作用
- 天呐！350道Java面试真题分享
- 7-24 猜数字游戏
热门文章
- csgo降低延迟指令_打开NVIDIA 驱动程序FPS降低操作延迟技术，让你的游戏操作如丝般润滑...
- 0基础学web----小鲜项目搭建（拓展）
- oracle 回滚操作
- 原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
- “Cannot read property 'classList' of null” when using classList.add
- pgsql数据库自动备份
- 数字图像处理三：图像增强
- Idea JAVA开发工具快速上手-常用快捷键汇总
- Android仿QQ主界面-------完善篇
- php 求总页数,WordPress单篇文章分页，获取总页数代码