Android 自定义缩放球以及水纹效果

最新推荐文章于 2021-05-25 15:47:33 发布
最新推荐文章于 2021-05-25 15:47:33 发布
阅读量1.8k 收藏 1
点赞数 2
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csm_qz/article/details/50919440
版权

没事写着玩，效果图
这里写图片描述

这里写图片描述

在values中的attrs.xml 定义属性样式maxRadius为半径最大值

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="maxRadius" format="integer"></attr>

    <declare-styleable name="CanvasView">
        <attr name="maxRadius"/>
    </declare-styleable>
</resources>

Layout中使用，关键点在于xmlns:custom=”http://schemas.android.com/apk/res-auto”命名空间的添加以及自定义custom:maxRadius=”150”的使用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="demo.cn.com.demo.MainActivity">

    <demo.cn.com.demo.view.CanvasView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:maxRadius="150"
        />
</RelativeLayout>

缩放球效果的java Code

package demo.cn.com.demo.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import demo.cn.com.demo.R;

/**
 * Created by rander on 16-3-17.
 */
public class CanvasView extends View{
    public CanvasView(Context context) {
        this(context, null);
    }

    public CanvasView(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //解析自定义属性
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CanvasView, defStyleAttr, 0);
        final int count = typedArray.getIndexCount();
        for(int i=0 ;i < count;i++)
        {
            int attr = typedArray.getIndex(i);
            switch (attr)
            {
                case R.styleable.CanvasView_maxRadius:
                    maxRadius = typedArray.getInteger(attr,DEFAULT_RADIUS);
                    break;
            }
        }
        typedArray.recycle();
        init();
    }

    private Paint mPaint;
    /** 屏幕宽*/
    private int mScreenWith;
    /** 屏幕高*/
    private int mScreenHeight;
    /** 圆心x,y*/
    private int cx;
    private int cy;
    /** 半径，动态变化*/
    private int mRadius;
    /** 最大半径*/
    private int maxRadius;
    /** 用户没设的时候默认最大半径*/
    private static final int DEFAULT_RADIUS = 200;
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(10);
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mScreenWith = w;
        mScreenHeight = h;
        cx = mScreenWith/2;
        cy = mScreenHeight/2;
    }

    private static final int MSG = 0x7986;
    /** 是否需要递增*/
    private boolean isIncrease = true;
    Handler handler = new Handler()
    {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what)
            {
                case MSG:
                    /**是递增*/
                    if(isIncrease)
                    {
                        /**超过最大值就递减*/
                        if(mRadius > maxRadius)
                        {
                            isIncrease = false;
                        }
                        else
                        {
                            mRadius++;
                        }
                    }
                    else
                    {
                        /**小于0就递增*/
                        if(mRadius < 0)
                        {
                            isIncrease = true;
                        }
                        else
                        {
                            mRadius--;
                        }
                    }
                    invalidate();
                    break;
            }
        }
    };


    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawCircle(cx, cy, mRadius, mPaint);
        handler.sendEmptyMessage(MSG);
        super.onDraw(canvas);
    }
}

波浪纹的java Code

package rander.com.randerc.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.lang.ref.WeakReference;

import rander.com.randerc.R;

/**
 * Created by rander on 16-3-17.
 */
public class WaveView extends View{
    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //解析自定义属性
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CanvasView, defStyleAttr, 0);
        final int count = typedArray.getIndexCount();
        for(int i=0 ;i < count;i++)
        {
            int attr = typedArray.getIndex(i);
            switch (attr)
            {
                case R.styleable.CanvasView_maxRadius:
                    maxRadius = typedArray.getInteger(attr,DEFAULT_RADIUS);
                    break;
            }
        }
        typedArray.recycle();
        init();
    }

    private Paint mPaint;
    /** 屏幕宽*/
    private int mScreenWith;
    /** 屏幕高*/
    private int mScreenHeight;
    /** 圆心x,y*/
    private int cx;
    private int cy;
    /** 半径，动态变化*/
    private int mRadius;
    /** 最大半径*/
    private int maxRadius = DEFAULT_RADIUS;
    /** 用户没设的时候默认最大半径*/
    private static final int DEFAULT_RADIUS = 200;

    private Handler mHandler;
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mHandler = new WaveHandler(this);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mScreenWith = w;
        mScreenHeight = h;
        cx = mScreenWith/2;
        cy = mScreenHeight/2;
    }

    private static final int MSG = 0x7986;
    /** 是否需要递增*/
    private boolean isIncrease = true;
    static class WaveHandler extends Handler
    {
        WeakReference<WaveView> wrf;

        public WaveHandler(WaveView waveView) {
            this.wrf = new WeakReference<WaveView>(waveView);
        }

        @Override
        public void handleMessage(Message msg) {
            WaveView waveView = wrf.get();
            if(waveView == null)
            {
                removeCallbacksAndMessages(null);
                return;
            }
            waveView.handleMessage(msg);
        }
    }

    private void handleMessage(Message msg)
    {
        switch (msg.what)
        {
            case MSG:
                /**是递增*/
                if(isIncrease)
                {
                    /**超过最大值就递减*/
                    if(mRadius > maxRadius)
                    {
                        isIncrease = false;
                    }
                    else
                    {
                        mRadius++;
                    }
                }
                else
                {
                    /**小于0就递增*/
                    if(mRadius < 0)
                    {
                        isIncrease = true;
                    }
                    else
                    {
                        mRadius--;
                    }
                }
                invalidate();
                break;
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if(mHandler != null)
        {
            mHandler.removeCallbacksAndMessages(null);
        }
    }

    /**波浪数量,可以在xml里面配置*/
    private final int WAVE_COUNT = 10;
    @Override
    protected void onDraw(Canvas canvas) {

        for(int i=0;i<WAVE_COUNT;i++)
        {
            canvas.drawCircle(cx, cy, mRadius - 20 * i, mPaint);
        }
        mHandler.sendEmptyMessage(MSG);
        super.onDraw(canvas);
    }
}

缩放球与水纹效果的实现区别如下:
1.画笔的不同Paint设置Paint.Style.STROKE样式可以画空心效果，不设置则是实心圆。
2.onDraw方法的实现不一样，缩放球只是画了一次，而水纹效果通过缩小半径画了好几个。

Rander.C
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android自定义View——实现水波纹效果类似剩余流量球
上辈子作恶多端，这辈子写前端。
09-04 1万+
最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩，终于功夫不负有心人最后实现了想要的效果，一起来看下吧： 效果图镇楼一：先一步一步来分解一下实现的过程 需要绘制一个正弦曲线(sin)或者余弦曲线(cos) 通过水平平移曲线来的到像水波波动的效果 水平移动的同时还需要有水位上涨，也就是向上平移 裁剪画布为圆形，在圆形区域绘制曲线 通过上面4步就可以实现了 二：现在就来实现第一步，绘制一个sin曲线；这
Android 自定义球型水波纹带圆弧进度效果(实例代码)
08-25
最近小编接到一个这样的需求，需要实现一个圆形水波纹，带进度，两层水波纹需要渐变显示，且外围有一个圆弧进度。今天小编给大家分享实例代码，感兴趣的朋友一起看看吧
android代码实现手机加速功能,Android自定义View实现内存清理加速球效果
weixin_42515120的博客
05-25 495
Android自定义View实现内存清理加速球效果发布时间：2020-09-21 22:21:57来源：脚本之家阅读：105作者：程序员的自我反思前言用过猎豹清理大师或者相类似的安全软件，大家都知道它们都会有一个功能，那就是内存清理，而展现的形式是通过一个圆形的小球来显示内存大小，通过百分比数字以及进度条的形式来显示清理的进度。本文将对该效果的实现过程进行详细讲述，但不涉及内存清理的实现。预览我们...
关于Android手势缩放圆球
ziyanguang1989的专栏
07-25 1016
这个主要是根据手势缩放图片功能改装的一个简易Demo.熟悉一下图形操作.. 代码如下： package hfut.gmm; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import and
Android自定义ImageView实现缩放，回弹效果
11-12
android自定义ImageView实现缩放，回弹效果。
Android 自定义imageview实现图片缩放实例详解
08-30
主要介绍了Android 自定义imageview实现图片缩放实例详解的相关资料,需要的朋友可以参考下
Android自定义控件之三点循环缩放效果
01-04
本文实例为大家分享了Android自定义控件之三点循环缩放的具体代码，供大家参考，具体内容如下 效果图如上，就是三点循环的变大、变小 package com.example.dotdemo; import java.util.ArrayList; import java.util...
Android 自定义缩放控件
04-10
Android 自定义缩放控件Imageview
Android 百分比、水波、流量剩余进度球的实现
meburningg的专栏
06-01 4238
因为项目中有遇到进度的一个需求，目前类似的在实现网络进度加载和流量用量上比较多，所有今天就把代码贴出来，希望有需要的朋友能够有用到。 1.首先是主页面 package com.zhanglu.percentageball; import android.app.Activity; import android.content.Intent; import android.os.Bundle;
Android 自定义view实现水波纹效果
qq_43685172的博客
02-20 399
Android 自定义view实现水波纹效果
android 自定义view实现拖动放大缩小_Android自定义View之实现简单炫酷的球体进度球...
weixin_39795292的博客
11-27 249
前言最近一直在研究自定义view，正好项目中有一个根据下载进度来实现球体进度的需求，所以自己写了个进度球，代码非常简单。先看下效果：效果还是非常不错的。准备知识要实现上面的效果我们只要掌握两个知识点就好了，一个是Handler机制，用于发消息刷新我们的进度球，一个是clipDrawable。网上关于Handler的教程很多，这里重点介绍一下clipDrawable，进度球的实现全靠clipDraw...
Android自定义控件系列五：自定义绚丽水波纹效果
苦咖啡的自留地
11-17 3752
利用Android自定义控件实现一个比较有趣的效果：滑动水波纹。欢迎拍砖！
Android 自定义球型水波纹，带圆弧进度
sinat_34430383的博客
11-30 1398
需求 如下，实现一个圆形水波纹，带进度，两层水波纹需要渐变显示，且外围有一个圆弧进度。 思路 外围圆弧进度：可以通过canvas.drawArc()实现。由于圆弧需要实现渐变，可以通过给画笔设置shader(SweepGradient)渲染，为了保证圆弧起始的颜色值始终一致，需要动态调整shader的参数。具体参见 SweepGradient(centerX.toFloat(), c...
android 自定义view 水波纹进度球
顾修忠的博客
08-18 7259
如果你是老司机，一看标题就会就return吧，嘻嘻。 在我们的日常开发中自定义控件还是用的挺多的，设计师或者产品为了更好的漂亮，美观，交互都会做一些牛逼的ui效果图，但是最后实现的还是我们程序员啊。 所以说 自定义view你还是得会的。 要开车了哦，请刷卡… 滴，老司机卡 滴，学生卡 滴，… 今天我们要实现的没有太多交互性的view，所以就继承view。 自定义view的套路，套
android获取SD卡的总容量，已使用的容量，剩余容量
tan313的专栏
04-24 1904
android中获取SD卡的总容量，已使用的容量，剩余的容量。 判断SD卡是否插入: if(Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)){ return true; }else { return false; } 获取SD卡的总容量,剩余容量，已使用的容量: StatFs sf = ne
Android 流量球效果的WaveView
此去经年
04-13 970
Android 流量球效果的WaveView 先看效果图： 实现上面效果的思路是使用正弦或者余弦曲线，代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
android 图片拖拽缩放以及旋转
最新发布
10-02
在Android开发中，我们可以使用触摸事件处理来实现图片的拖拽、缩放和旋转操作。 首先，要实现拖拽功能，我们需要监听触摸事件，并在触摸事件的ACTION_MOVE中更新图片的位置。我们可以通过获取触摸点的坐标，然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值