当前位置: 代码迷 >> Android >> Android奇效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单
  详细解决方案

Android奇效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单

热度:94   发布时间:2016-04-24 11:44:14.0
Android特效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单

Android特效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单

不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的分析,也会觉得很简单了,国际惯例,无图无真相,我们先看看效果图,对了,真
测试机送人了,所讲这段时间应该一直用模拟器显示吧!

截图

这里写图片描述

这个界面相信大家都认识,我们来说下原理,其实就三层

这里写图片描述

中间是一张图片,然后画四个圆,这个应该简单吧,不会的可以看下Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解,然后最上面就是一个渐变的圆了,这个圆我们只要让他不停的旋转就可以了,那我们新建一个工程——RadarSearch

这里写图片描述

layou_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/photo" >    <com.lgl.radarsearch.RadarView        android:layout_width="match_parent"        android:layout_height="match_parent" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:src="@drawable/circle_photo" /></RelativeLayout>

我们新建一个RadarView

RadarView

package com.lgl.radarsearch;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;/** * 雷达搜索 *  * @author LGL * */public class RadarView extends View {    /**     * 思路:我们首先初始化画笔,并且获取到控件的宽高,在onMeasure()中设置铺满,然后在onDraw()方法中绘制四个静态圆和一个渐变圆,     * 我们通过Matrix矩阵来让他不停的旋转就达到我们想要的效果了     */    private Paint mPaintLine, mPaintCircle;    private int w, h;    // 动画    private Matrix matrix;    // 旋转角度    private int start;    // Handler定时动画    private Handler handler = new Handler();    private Runnable run = new Runnable() {        @Override        public void run() {            start = start + 1;            matrix = new Matrix();            // 参数:旋转角度,围绕点坐标的x,y坐标点            matrix.postRotate(start, w / 2, h / 2);            // 刷新重绘            RadarView.this.invalidate();            // 继续循环            handler.postDelayed(run, 60);        }    };    public RadarView(Context context, AttributeSet attrs) {        super(context, attrs);        initView();        // 获取高宽        w = context.getResources().getDisplayMetrics().widthPixels;        h = context.getResources().getDisplayMetrics().heightPixels;        // 一致旋转        handler.post(run);    }    private void initView() {        mPaintLine = new Paint();        mPaintLine.setColor(Color.WHITE);        mPaintLine.setAntiAlias(true);        mPaintLine.setStyle(Style.STROKE);        mPaintCircle = new Paint();        mPaintCircle.setColor(Color.RED);        mPaintCircle.setAntiAlias(true);        matrix = new Matrix();    }    /**     * 测量     *      * @author LGL     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // 设置铺满        setMeasuredDimension(w, h);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        // 画四个圆形        canvas.drawCircle(w / 2, h / 2, w / 2, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w / 3, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w / 4, mPaintLine);        // 绘制渐变圆        Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT,                Color.parseColor("#AAAAAAAA"));        // 绘制时渐变        mPaintCircle.setShader(mShader);        // 增加旋转动画,使用矩阵实现        canvas.concat(matrix); // 前置动画        canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintCircle);    }}

Demo下载地址:http://download.csdn.net/detail/qq_26787115/9430942

4楼MRHUANG2416597349前天 09:36
楼主这里有个小问题啊,头像的ImageView设置成centerInParent后,是针对父控件居中,和画的圆中心对不上,头像会稍微往上方偏了一点
Re: laoxidi昨天 11:51
回复MRHUANG2416597349n楼主获取高宽是指屏幕区域的高宽,即h是包括状态栏高度的,而头像居中是不包括状态高度的。n所以不是 头像低了,是圆的中心高了。n那么现在只要将获取的高度减去状态栏高度就可以了。n获取状态栏高度可以通过Resource类 获取系统尺寸资源的status_bar_heightnint result = 0;n int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");n if (resourceId > 0) {n result = getResources().getDimensionPixelSize(resourceId);n }nresult就是状态栏的高度。
Re: qq_26787115昨天 14:02
回复laoxidin如果实际用到的话,应该在View里面绘制Bitmap,这样就是比例对称了 ,就不用考虑外部因素了
Re: qq_26787115昨天 14:10
回复laoxidinGood
Re: qq_267871154小时前
回复MRHUANG2416597349把actionBar去掉试试
3楼u010331406前天 08:43
先顶。。。。
2楼daidaineteasy前天 20:37
谢谢分享,学习了
1楼adfghjkl4天前 10:43
图像为何不放在自定义控件中?设置一个对外的set方法实现
Re: qq_267871153天前 14:14
回复adfghjkln也是可以的,其实还可以继承FrameLayout,搜索到好友之后在圆内显示出来
  相关解决方案