基于Android自定义控件实现刮刮乐效果

只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧,

其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main

上代码!!

主activity:

package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.widget.Button; import android.widget.RelativeLayout; /** * 主activity * * @author HaoZai * */ public class MainActivity extends Activity { RelativeLayout container; Button btn; ErinieShow erinieShow; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); container = (RelativeLayout) findViewById(R.id.container); btn = (Button) findViewById(R.id.enterbtn); btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub showEnrie(); } }); } private void showEnrie() { // TODO Auto-generated method stub // 移除所有子元素 container.removeAllViews(); // 产生一个彩票 int level = getLevel(); erinieShow = new ErinieShow(this, level); container.addView(erinieShow, new LayoutParams(-2, -2)); } /** * 获取奖励等级 * * @return */ private int getLevel() { // TODO Auto-generated method stub double d = Math.random() * 100; if (d < 50) { return 3; } if (d < 90) { return 2; } return 1; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } 因为彩票视图相对复杂,所以通过自定义控件的方式,构造了一个彩票视图 package com.guaguale; import android.content.Context; import android.graphics.Color; import android.view.Gravity; import android.view.View; import android.widget.Button; import android.widget.RelativeLayout; /** * 彩票视图类 * * @author HaoZai * */ public class ErinieShow extends RelativeLayout { int level; Context mContext; RelativeLayout rubberBG;// 最底层奖励等级 RubberShow mRubberShow;// 橡皮擦 Button mButton; int rubberBGID = 10001; int mButtonID = 10002; public ErinieShow(Context context, int level) { super(context); // TODO Auto-generated constructor stub this.mContext = context; this.level = level; getElement();// 得到子元素 setElementLP();// 设置布局参数 // 初始化彩票了 setElementStyle(); // 设置橡皮檫了 setElement(); } private void setElement() { // 第一步在彩票上面画一个图层 mRubberShow.beginRubber(Color.parseColor("#d3d3d3"), 30, 10); } private void setElementStyle() { switch (level) { case 1: rubberBG.setBackgroundResource(R.drawable.ic_launcher); break; case 2: rubberBG.setBackgroundResource(R.drawable.ic_launcher); break; case 3: rubberBG.setBackgroundResource(R.drawable.ic_launcher); break; default: break; } } /** * 给布局的子元素设置布局参数 */ private void setElementLP() { // TODO Auto-generated method stub RelativeLayout.LayoutParams rubber_bg_lp = new RelativeLayout.LayoutParams( 350, 80); rubberBG.setLayoutParams(rubber_bg_lp); mRubberShow.setLayoutParams(rubber_bg_lp); // rubber_bg_lp正下方 RelativeLayout.LayoutParams rubber_btn_lp = new RelativeLayout.LayoutParams( -2, -2); rubber_btn_lp.addRule(RelativeLayout.CENTER_HORIZONTAL); rubber_btn_lp.addRule(RelativeLayout.BELOW, rubberBGID); mButton.setLayoutParams(rubber_btn_lp); mButton.setClickable(false); } /** * 获取布局的子元素 */ private void getElement() { // TODO Auto-generated method stub rubberBG = new RelativeLayout(mContext);// 得到彩票 mRubberShow = new RubberShow(mContext, level);// 得到橡皮擦 mButton = new Button(mContext); rubberBG.setId(rubberBGID); mButton.setId(mButtonID); mButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub } }); rubberBG.addView(mRubberShow); addView(rubberBG); addView(mButton); } } 橡皮檫类,用于将中奖信息上面的临时画布去掉 package com.guaguale; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Bitmap.Config; import android.graphics.Paint.Style; import android.graphics.Path; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup.LayoutParams; /** * 橡皮擦类 * * @author HaoZai * */ public class RubberShow extends View { private float TOUCH_TO_ERANCE;// 填充的最小距离,这个值越小画出来的曲线越柔和 private Bitmap bitmap; private Canvas canvas;// 临时画布 private Paint paint;// 画笔 private Path mPath;// 鼠标的运行路径 private float mx, my;// 坐标 private boolean isDraw = false; public RubberShow(Context context, int level) { super(context); // TODO Auto-generated constructor stub } @Override protected void onDraw(Canvas mCanvas) { // TODO Auto-generated method stub super.onDraw(mCanvas); if (isDraw) { Log.i("tag", "111"); mCanvas.drawPath(mPath, paint); mCanvas.drawBitmap(bitmap, 0, 0, null);// 从起点开始画 } } @Override public boolean onTouchEvent(MotionEvent event) { if (!isDraw) { return true; } switch (event.getAction()) { case MotionEvent.ACTION_DOWN: touchDown(event.getX(), event.getY()); invalidate();// 刷新 break; case MotionEvent.ACTION_MOVE: touchMove(event.getX(), event.getY()); invalidate();// 刷新 break; case MotionEvent.ACTION_UP: touchUp(event.getX(), event.getY()); invalidate();// 刷新 break; default: break; } return true; } private void touchUp(float x, float y) { // 画出路线 mPath.lineTo(x, y); canvas.drawPath(mPath, paint); mPath.reset(); } private void touchMove(float x, float y) { float dx = Math.abs(x - mx); float dy = Math.abs(y - my); // 两点之间的距离大于TOUCH_TO_ERANCE,就生成贝瑟尔曲线 if (dx >= TOUCH_TO_ERANCE || dy >= TOUCH_TO_ERANCE) { // 用贝瑟尔实现平滑的曲线 // mPath.lineTo(dx, dy); mPath.quadTo(mx, my, (x + mx) / 2, (y + my) / 2); mx = x; my = y; } } private void touchDown(float x, float y) { mPath.reset();// 重置路径 mPath.moveTo(x, y); mx = x; my = y; } /** * @param bgColor * 覆盖的背景颜色 * @param paintStrokeWidth * 橡皮擦宽度 * @param touchToLerance * 填充距离 */ public void beginRubber(final int bgColor, final int paintStrokeWidth, float touchToLerance) { TOUCH_TO_ERANCE = touchToLerance; paint = new Paint(); // 画笔划过的痕迹变为透明 paint.setColor(Color.BLACK);// 此处不能为透明 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); paint.setAntiAlias(true);// 变为光滑 paint.setStyle(Style.STROKE);// 空心和实心 paint.setStrokeJoin(Paint.Join.ROUND);// 前面圆角 paint.setStrokeCap(Paint.Cap.ROUND);// 后圆角 paint.setStrokeWidth(paintStrokeWidth);// 画笔宽度 // 覆盖 LayoutParams layoutParams = getLayoutParams(); int height = layoutParams.height; int width = layoutParams.width; // if(layoutParams.height ==LayoutParams.MATCH_PARENT){ // // }else{ // // } // 记录痕迹 mPath = new Path(); bitmap = Bitmap.createBitmap(width, height, Config.ARGB_4444);// 4444占内存更少 canvas = new Canvas(bitmap); canvas.drawColor(bgColor); isDraw = true; } }

以上代码附有注释,有哪里不明白的地方欢迎大家提出宝贵意见,谢谢大家一直以来对脚本之家网站的支持。

时间: 2024-10-11 23:59:47

基于Android自定义控件实现刮刮乐效果的相关文章

Android自定义控件eBook实现翻书效果实例详解_Android

本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

Android自定义控件eBook实现翻书效果实例详解

本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

基于Android自定义控件实现刮刮乐效果_Android

 只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; im

Android自定义控件之广告条滚动效果_Android

在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

基于Android自定义控件实现雷达效果

如何制作出类似雷达扫描的效果,具体方法如下 一.效果图 二.实现思路 1.自定义控件RadarView用来画雷达的效果图,可以自定义属性包括 backgroundColor:背景颜色 circleNum:圆的数量 startColor:开始颜色 endColor:结束颜色 lineColor:线的颜色 2.通过Handler循环发送消息到MessageQueue中,将mRotate加3,使Matrix旋转mRotate,重绘雷达扫描的圆. 3.通过梯度渐变扫描渲染器SweepGradient,在

Android自定义控件简单实现侧滑菜单效果_Android

侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

Android自定义控件实现温度旋转按钮效果_Android

首先看下效果图 温度旋转按钮 实现思路 初始化一些参数 绘制刻度盘 绘制刻度盘下的圆弧 绘制标题与温度标识 绘制旋转按钮 绘制温度 处理滑动事件 提供一些接口方法 实现方法 初始化一些参数 public class TempControlView extends View { // 控件宽 private int width; // 控件高 private int height; // 刻度盘半径 private int dialRadius; // 圆弧半径 private int arcRa

Android自定义控件之广告条滚动效果

在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

Android自定义控件简单实现侧滑菜单效果

侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android