Android UI 之自定义RadarView——高仿微信雷达扫描
来源:互联网 发布:电梯乘坐10人答案 知乎 编辑:程序博客网 时间:2024/06/11 13:07
版权声明:本文为博主原创文章,未经博主允许不得转载。
最近看了一个视频讲了一种微信雷达扫描的实现方案,借鉴了一下,自己也写一个玩玩,与大家分享一下。基本想出来三种解决方案,根据不同需求情况选择即可。
方案一实现思路(通用):
1.自定义view
2.重写onDraw()方法
3.画四个无锯齿空心圆
4.画以最大圆为半径的实心渐变圆
5.创建矩阵,旋转画布,重绘,并用Handler实现循环
- package com.ml512.radarview;
- import com.ml512.radardemo.R;
- import android.annotation.SuppressLint;
- import android.content.Context;
- import android.graphics.Canvas;
- import android.graphics.Color;
- import android.graphics.Matrix;
- import android.graphics.Paint;
- import android.graphics.Paint.Style;
- import android.graphics.Shader;
- import android.graphics.SweepGradient;
- import android.os.Handler;
- import android.util.AttributeSet;
- import android.view.View;
- /**
- * 2015/12/06 22:49
- * @author ITjianghuxiaoxiong
- * http://blog.csdn.net/itjianghuxiaoxiong
- */
- @SuppressLint("DrawAllocation")
- public class RadarView extends View {
- private int w, h;// 获取控件宽高
- private Paint mPaintLine;// 画雷达圆线
- private Paint mPaintSolid;// 画雷达渐变实心圆
- private Matrix matrix;
- private int degrees;
- private Handler mHandler = new Handler();
- private Runnable mRunnable = new Runnable() {
- @Override
- public void run() {
- degrees++;
- matrix.postRotate(degrees, w / 2, h / 2);//旋转矩阵
- RadarView.this.invalidate();// 重绘
- mHandler.postDelayed(mRunnable, 55);
- }
- };
- 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);
- setBackgroundResource(R.drawable.radar_bg);//雷达的背景图片(紫色满天星,可以在微信APP中直接找到图片资源)
- initPaint();
- mHandler.postDelayed(mRunnable,500);
- }
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- w = getMeasuredWidth();//获取view的宽度
- h = getMeasuredHeight();//获取view的高度
- }
- /**
- * 初始化画笔
- */
- private void initPaint() {
- mPaintLine = new Paint();
- mPaintLine.setColor(Color.parseColor("#CCA1A1A1"));// 设置画笔
- mPaintLine.setStrokeWidth(1);// 设置画笔宽度
- mPaintLine.setAntiAlias(true);// 消除锯齿
- mPaintLine.setStyle(Style.STROKE);// 设置空心
- mPaintSolid = new Paint();
- mPaintSolid.setAntiAlias(true);// 消除锯齿
- mPaintSolid.setStyle(Style.FILL);//实心圆
- matrix = new Matrix();//创建组件
- }
- @Override
- protected void onDraw(Canvas canvas) {
- //四个空心圆
- canvas.drawCircle(w / 2, h / 2, w / 6, mPaintLine);
- canvas.drawCircle(w / 2, h / 2, 5 * w / 14, mPaintLine);
- canvas.drawCircle(w / 2, h / 2, 12 * w / 20, mPaintLine);
- canvas.drawCircle(w / 2, h / 2, 9 * w / 11, mPaintLine);
- //渐变
- Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT, Color.parseColor("#33FFFFFF"));
- mPaintSolid.setShader(mShader);
- canvas.setMatrix(matrix);
- canvas.drawCircle(w / 2, h / 2, 9 * w / 11, mPaintSolid);
- matrix.reset();//重置矩阵,避免累加,越转越快
- super.onDraw(canvas);
- }
- }
本以为微信也是这么实现的,结果发现透明还是照微信差一点点,继续看微信apk解压的资源文件发现,原来连四个空心圆+实心渐变圆是一张图片,害的我还画了半天调比例。所以就有下面的第二种方案。
方案二实现思路(适用于最大圆直径小于屏幕宽度的情况):
1.四个空心圆+实心圆为一张图片
2.普通ImageView+xml旋转动画
旋转动画:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <rotate
- android:duration="10000"
- android:fromDegrees="0"
- android:pivotX="50%"
- android:pivotY="50%"
- android:repeatCount="-1"
- android:toDegrees="359"/>
- </set>
repeatCount设置成-1保证循环转动,从0度转到359,duration时长10秒,绕中心点旋转。
加载动画:
- // 加载动画
- Animation rotateAnim = AnimationUtils.loadAnimation(this, R.anim.radar_rotate_anim);
- LinearInterpolator lin = new LinearInterpolator();// 匀速旋转
- rotateAnim.setInterpolator(lin);
- ImageView radarImage = (ImageView) findViewById(R.id.image_radar);
- radarImage.startAnimation(rotateAnim);
方案三实现思路(通用):
1.四个空心圆+实心圆为一张图片
2.自定义ImageView
3.利用方案一的方法用矩阵让image转起来- package com.ml512.radarview;
- import com.ml512.radardemo.R;
- import android.annotation.SuppressLint;
- import android.content.Context;
- import android.graphics.Canvas;
- import android.graphics.Matrix;
- import android.os.Handler;
- import android.util.AttributeSet;
- import android.widget.ImageView;
- /**
- * 2015/12/06 22:49
- * @author ITjianghuxiaoxiong
- * http://blog.csdn.net/itjianghuxiaoxiong
- */
- @SuppressLint("DrawAllocation")
- public class RadarImageView extends ImageView {
- private int w, h;// 获取控件宽高
- private Matrix matrix;
- private int degrees;
- private Handler mHandler = new Handler();
- private Runnable mRunnable = new Runnable() {
- @Override
- public void run() {
- degrees++;
- matrix.postRotate(degrees, w / 2, h / 2);
- RadarImageView.this.invalidate();// 重绘
- mHandler.postDelayed(mRunnable, 50);
- }
- };
- public RadarImageView(Context context) {
- this(context, null);
- }
- public RadarImageView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public RadarImageView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- init();
- }
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- w = getMeasuredWidth();//获取view的宽度
- h = getMeasuredHeight();//获取view的高度
- }
- /**
- * 初始化
- */
- private void init() {
- setBackgroundResource(R.drawable.radar_bg);
- matrix = new Matrix();
- mHandler.postDelayed(mRunnable,500);
- }
- @Override
- protected void onDraw(Canvas canvas) {
- canvas.setMatrix(matrix);
- super.onDraw(canvas);
- matrix.reset();
- }
- }
- <com.ml512.radarview.RadarImageView
- android:id="@+id/image_radar"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:scaleType="centerCrop"
- android:padding="15dp"
- android:src="@drawable/wx_radar_imgae"/>
很简单吧,好了,以上就是三种实现方案了,根据自己的实际需要选择吧,同时如果有更好的解决方法,也欢迎交流~
Demo源码 :http://download.csdn.NET/detail/itjianghuxiaoxiong/9331925
0 0
- Android UI 之自定义RadarView——高仿微信雷达扫描
- Android UI 之自定义RadarView——高仿微信雷达扫描
- Android高级UI之颜色渲染——SweepGradient,Matrix实现雷达扫描效果
- Android自定义View—仿雷达扫描效果
- 自定义view之雷达扫描
- Android自定义雷达扫描控件
- Android自定义控件入门实践之雷达扫描控件
- Android 自定义控件之实现雷达扫描效果
- Android自定义View实现雷达扫描动画
- Android 自定义View( 雷达扫描)
- Android自定义View实现雷达扫描动画
- Android:自定义view 实现雷达扫描效果
- Android自定义控件之扫描动画UI
- Android雷达扫描
- Android 雷达扫描效果
- android 仿微信雷达扫描
- 自定义控件入门实践之雷达扫描控件
- Android 自定义View 使用Kotlin编写雷达扫描效果
- hibernate核心API介绍
- Mybatis之高级映射collection (递归查出树形数据之查询部门及部门下所有人员 二叉树)
- 欧朋的paused in debugger怎么关闭
- Android studio Failed to open zip file解决方案
- poj3509 Rotating Rings
- Android UI 之自定义RadarView——高仿微信雷达扫描
- java基础——final、finally、finalize区别
- 函数中定义了迭代器
- 怎么学unity3d-unity3d学习路线建议
- UNITY3D对象之间实现消息通信管理[源码转载自unity wiki]
- numpy矩阵数值太多不能全部显示
- Java类修饰符
- WPF开发总结
- 文件的保存对话框