频道栏目
首页 > 程序开发 > 移动开发 > 其他 > 正文
吃豆豆进度条_完整版
2017-04-24 09:48:17         来源:fkgjdkblxckvbxbgb的专栏  
收藏   我要投稿

上一章节主要写了简单的绘制思路 。

代碼全部帖出來了 , 不設置下載地址了,

解释下:吃豆豆的动画用了一个简单思路

1:利变量值得递增关系,产生数字 , 根据基数和偶数分辨来绘制不同角度的扇形

2:小眼睛是一个小圆圈,随着主界面传过来的进度去高边位置

3:豆豆绘制利用了canvas的位移来实现的 ,目前绘制的长度是写死了,屏幕的2/3的长度。这个根据需求自行修改

4;被吃掉的豆豆实现 ,是根据当前的脸的中心坐标的位置和当前绘制点的坐标多对比,小于脸的横坐标的设置画笔位透明色(这里可以不绘制也是可以的)

5:根据绘制的进度 ,回调给主界面更换颜色,其实可以直接在主界面实现 , 但是为了确保确实绘制成功了,我还是采用了回调的方法

6:由于豆豆大于90的时候,会出现界面不正常的情况 ,在绘制的时候,要向左移动一个脸的长度,确保看起来流畅性好

7:计算比较复杂 , 为了达到中心对称性 , 计算有点绕 。

8:尺寸的获取, 我是在主界面获取的,这样更好的设置View的长度,目钱设置的是屏幕尺寸的2/3;

9:最后增加了对豆豆脸的颜色, 和豆豆颜色 ,以及各种尺寸大小的设置 。

\

属性文件

布局文件

主界面文件

package demo.cdl.com.mydemo;

import android.animation.ArgbEvaluator;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.util.Log;

import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity implements PlayDouView.ChangeBgListener{

RelativeLayout rela_bg;

PlayDouView playview;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

DisplayMetrics dm = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

ScreenWidth = dm.widthPixels;

Log.i("main","width===="+ScreenWidth);

setContentView(R.layout.activity_main);

initView();

}

private void initView() {

playview = (PlayDouView)findViewById(R.id.playview);

playview.setOnChangeListener(this);

rela_bg = (RelativeLayout)findViewById(R.id.rela_bg);

Thread thread = new MyThread();

thread.start();

}

int i = 0;

public class MyThread extends Thread{

@Override

public void run() {

super.run();

while (true){

i++;

if (i>100){

i=0;

}

try {

Thread.sleep(200);

} catch (InterruptedException e) {

e.printStackTrace();

}

runOnUiThread(new Runnable() {

@Override

public void run() {

playview.setProgress(i);

}

});

}

}

}

public static int ScreenWidth = 800;

@Override

protected void onResume() {

super.onResume();

}

public void changeBg(int progress) {

rela_bg.setBackgroundColor(ColorUtil.calculateColor(progress));

}

}

变换背景颜色工具类

package demo.cdl.com.mydemo;

import android.animation.ArgbEvaluator;

public class ColorUtil {

private static int maxNum = 100;

public static int calculateColor(int value) {

ArgbEvaluator evealuator = new ArgbEvaluator();

float fraction = 0;

int color = 0;

if (value <= maxNum / 2) {

fraction = (float) value / (maxNum / 2);

color = (Integer) evealuator.evaluate(fraction, 0xFFe296ed, 0xFF9698ed); // 由紫色——蓝色

} else {

fraction = ((float) value - maxNum / 2) / (maxNum / 2);

color = (Integer) evealuator.evaluate(fraction, 0xFF9698ed, 0xFF96eda2); // 由蓝色换成绿色

}

return color;

}

}

吃豆豆界面

package demo.cdl.com.mydemo;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Rect;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.util.Log;

import android.util.TypedValue;

import android.view.View;

public class PlayDouView extends View {

private Paint mPaint;

Paint paint_eye;

public PlayDouView(Context context) {

this(context, null);

}

public PlayDouView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public PlayDouView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.PlayView);

circle_dou = ta.getDimensionPixelSize( R.styleable.PlayView_face_size,100);

text_size =ta.getDimensionPixelSize( R.styleable.PlayView_text_progress_size,circle_dou/3);

text_size =ta.getDimensionPixelSize( R.styleable.PlayView_text_progress_size,circle_dou/3);

dou_size=ta.getDimensionPixelSize( R.styleable.PlayView_dou_size,circle_dou/10);

face_color = ta.getColor(R.styleable.PlayView_face_color, Color.YELLOW);

dou_color= ta.getColor(R.styleable.PlayView_dou_color, Color.WHITE);

ta.recycle();

initView();

}

int dou_color;

int progress = 0;

public void setProgress(int progress) {

this.progress = progress;

invalidate();

}

Paint circle_paint;

private void initView() {

mPaint = new Paint();

mPaint.setAntiAlias(true);

paint_eye = new Paint();

paint_eye.setAntiAlias(true);

paint_eye.setColor(Color.BLACK);

paint_eye.setStyle(Paint.Style.FILL);

circle_paint = new Paint();

circle_paint.setAntiAlias(true);

circle_paint.setStyle(Paint.Style.FILL);

}

/**

* 脸的半径

*/

int circle_dou = 100;

/**

* 眼睛的半径

*/

int eye_radius = circle_dou / 15;

int eye_height = circle_dou / 4;

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawText(canvas);

if (myThread == null) {

myThread = new MyThread();

myThread.start();

} else {

drawLinePoint(canvas);

drawDou(canvas);

}

}

int text_size ;

/**绘制精度textView*/

private void drawText(Canvas canvas) {

Rect bounds2 = new Rect();

String persent = progress + "%";

paint_eye.getTextBounds(persent, 0, persent.length(), bounds2);

paint_eye.setTextSize(text_size);

int height_text = getHeight() / 2 - circle_dou/3*2;

paint_eye.setColor(Color.WHITE);

int left_text = (getWidth()/2-view_width/2)+(view_width * progress / 100)+bounds2.width()/2-circle_dou;

canvas.drawText(persent, left_text, height_text, paint_eye);

}

/**

* 绘制一圈的点.间隔50画一个点

*/

int degree = 50;

private void drawLinePoint(Canvas canvas) {

canvas.save();

canvas.translate(getWidth()/2-view_width/2, 0);

int piont_num = view_width / degree;

int left_start = (view_width * progress / 100)-circle_dou/2;

for (int i = 0; i < piont_num; i++) {

int pointX = i*50;

//根據當前的進度和每個點的坐標進行比對,小於進度的不繪製

if (left_start

 

点击复制链接 与好友分享!回本站首页
上一篇:IDR机制
下一篇:Xshell连接VirtualBox虚拟机
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站