仿微信雷达搜索好友特效

[复制链接]
来自: suisui0614 分类: Android精品源码 上传时间: 2016-4-26 12:52:11
Tag:仿微信 雷达 搜索 好友 特效

项目介绍:

本帖最后由 suisui0614 于 2016-4-26 15:54 编辑
截图

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

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

layou_main.xml
[XML] 查看源文件 复制代码


    

    


我们新建一个RadarView
RadarView
[Java] 查看源文件 复制代码
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);

    }
}



相关源码推荐:

我来说两句
所有评论(23)
xiefeng111 2016-4-26 14:23:43
买了,下载不下来,页面都打不开
回复
xiefeng111 2016-4-26 14:23:59
楼主用心了,内容非常精彩。
回复
apkbusgj 2016-4-26 14:45:24
我只是路过打酱油的。
回复
fill 2016-4-26 15:09:57
正需要啊,感谢楼主无私分享!
回复
fill 2016-4-26 15:10:06
楼主用心了,内容非常精彩。
回复
fill 2016-4-26 15:10:53
楼主用心了,内容非常精彩。
回复
xieshushu 2016-5-3 11:27:49
学习学习!
回复
123下一页
提取码: q5g0 下载次数:11 状态:已购或VIP 售价:5(原价:5)金钱 下载权限:初级码农 
1584 0 11
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿
帖子代码编辑/版权问题
QQ:435399051,1294855032
如何获得代码达人称号?
如何成为签约作者?
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )