Android使用自定义View实现360手机卫士波浪球进度的效果

像360卫士的波浪球进度的效果,一般最常用的方法就是画线的方式,先绘sin线或贝塞尔曲线,然后从左到右绘制竖线,然后再裁剪圆区域。

创新互联一直在为企业提供服务,多年的磨炼,使我们在创意设计,网络营销推广到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过十年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务重庆服务器托管成都app软件开发、手机移动建站、网页设计、网络整合营销。

今天我这用图片bitmap的方式,大概的方法原理是:

(1)首先用clipPath裁剪园区域,

(2)然后用4张图来不断绘制到画布上,再用偏移量来控制移动的速度,从而形成波浪动态效果。

(3)有一点需要注意的是,裁剪圆的时候用到的clipPath这个方法,在android 4.1,和4.2等某些系统上,裁剪出来不是圆,而是矩形,针对这些系统 需要在manifest.xml文件的activity中

将硬件加速关掉,因为默认是开启的。即添加这个:android:hardwareAccelerated="false"

(源码在下面最后给出哈)

手机上的效果:

Android使用自定义View实现360手机卫士波浪球进度的效果

Android使用自定义View实现360手机卫士波浪球进度的效果

下面咱们就来看看怎么实现吧:

(1)自定义波浪View的实现:

package com.czm.mysinkingview;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.Region.Op;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.FrameLayout;
/**
 * 水波浪球形进度View
 * @author caizhiming
 *
 */
public class MySinkingView extends FrameLayout {
 private static final int DEFAULT_TEXTCOLOT = 0xFFFFFFFF;
 private static final int DEFAULT_TEXTSIZE = 250;
 private float mPercent;
 private Paint mPaint = new Paint();
 private Bitmap mBitmap;
 private Bitmap mScaledBitmap;
 private float mLeft, mTop;
 private int mSpeed = 15;
 private int mRepeatCount = 0;
 private Status mFlag = Status.NONE;
 private int mTextColor = DEFAULT_TEXTCOLOT;
 private int mTextSize = DEFAULT_TEXTSIZE;
 public MySinkingView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 public void setTextColor(int color) {
 mTextColor = color;
 }
 public void setTextSize(int size) {
 mTextSize = size;
 }
 public void setPercent(float percent) {
 mFlag = Status.RUNNING;
 mPercent = percent;
 postInvalidate();
 }
 public void setStatus(Status status) {
 mFlag = status;
 }
 public void clear() {
 mFlag = Status.NONE;
 if (mScaledBitmap != null) {
 mScaledBitmap.recycle();
 mScaledBitmap = null;
 }
 if (mBitmap != null) {
 mBitmap.recycle();
 mBitmap = null;
 }
 }
 @Override
 protected void dispatchDraw(Canvas canvas) {
 super.dispatchDraw(canvas);
 int width = getWidth();
 int height = getHeight();
 //裁剪成圆区域
 Path path = new Path();
 canvas.save();
 path.reset();
 canvas.clipPath(path);
 path.addCircle(width / 2, height / 2, width / 2, Direction.CCW);
 canvas.clipPath(path, Op.REPLACE);
 if (mFlag == Status.RUNNING) {
 if (mScaledBitmap == null) {
 mBitmap = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.wave2);
 mScaledBitmap = Bitmap.createScaledBitmap(mBitmap, mBitmap.getWidth(), getHeight(), false);
 mBitmap.recycle();
 mBitmap = null;
 mRepeatCount = (int) Math.ceil(getWidth() / mScaledBitmap.getWidth() + 0.5) + 1;
 }
 for (int idx = 0; idx < mRepeatCount; idx++) {
 canvas.drawBitmap(mScaledBitmap, mLeft + (idx - 1) * mScaledBitmap.getWidth(), (1-mPercent) * getHeight(), null);
 }
 String str = (int) (mPercent * 100) + "%";
 mPaint.setColor(mTextColor);
 mPaint.setTextSize(mTextSize);
 mPaint.setStyle(Style.FILL);
 canvas.drawText(str, (getWidth() - mPaint.measureText(str)) / 2, getHeight() / 2 + mTextSize / 2, mPaint);
 mLeft += mSpeed;
 if (mLeft >= mScaledBitmap.getWidth())
 mLeft = 0;
 // 绘制外圆环
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeWidth(4);
 mPaint.setAntiAlias(true);
 mPaint.setColor(Color.rgb(33, 211, 39));
 canvas.drawCircle(width / 2, height / 2, width / 2 - 2, mPaint);
 postInvalidateDelayed(20);
 }
 canvas.restore();
 }
 public enum Status {
 RUNNING, NONE
 }
}

(2)布局文件的实现:

<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="#000000"
 tools:context=".MainActivity" >
 <com.czm.mysinkingview.MySinkingView
 android:id="@+id/sinking"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:layout_centerInParent="true" >
 <ImageView
 android:id="@+id/image"
 android:layout_width="400dp"
 android:layout_height="400dp"
 android:src="@drawable/charming2" />
 </com.czm.mysinkingview.MySinkingView>
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_centerHorizontal="true"
 android:orientation="horizontal" >
 <Button
 android:id="@+id/btn_test"
 android:layout_width="80dp"
 android:layout_height="wrap_content"
 android:text="体验" />
 </LinearLayout>
</RelativeLayout>

(3)如何使用自定义波浪View:

package com.czm.mysinkingview;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
/**
 * 使用并测试用例页
 * 
 * @author caizhiming
 */
public class MainActivity extends Activity {
 private MySinkingView mSinkingView;
 private float percent = 0;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 mSinkingView = (MySinkingView) findViewById(R.id.sinking);
 findViewById(R.id.btn_test).setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 test();
 }
 });
 percent = 0.56f;
 mSinkingView.setPercent(percent);
 }
 private void test() {
 Thread thread = new Thread(new Runnable() {
 @Override
 public void run() {
 percent = 0;
 while (percent <= 1) {
 mSinkingView.setPercent(percent);
 percent += 0.01f;
 try {
 Thread.sleep(40);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 }
 percent = 0.56f;
 mSinkingView.setPercent(percent);
 // mSinkingView.clear();
 }
 });
 thread.start();
 }
}

最后,照例,给出源码地址

真题园网

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。

新闻标题:Android使用自定义View实现360手机卫士波浪球进度的效果
浏览地址:https://www.cdcxhl.com/article12/gcoggc.html

成都网站建设公司_创新互联,为您提供定制网站静态网站网站排名网站收录手机网站建设外贸建站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司