自定义View->刮刮乐

原理:canvas画上背景加文字<奖项>,再画上遮罩层,通过paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); 用户点击滑动后清除遮罩层。核心就是前面那句话。

package com.example.customshapedemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class GuaGuaKa extends View {
    Path path = new Path();// 用作划线
    Paint paint = new Paint();// 初始化画笔
    Bitmap mBitmap;// 最终要画在canvas上的bitmap
    Canvas mCanvas;// 用来给mBitmap上进行填充的画布

    String text = "";
    int text_size = 20;
    int background_color = Color.parseColor("#FFFAFA");
    int text_color = Color.BLACK;
    int mask_color = Color.parseColor("#CFCFCF");
    int strokeWidth = 20;

    public GuaGuaKa(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        initPaint();
    }

    public GuaGuaKa(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        initParam(context, attrs);
        initPaint();
    }

    public GuaGuaKa(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        initParam(context, attrs);
        initPaint();
    }

    // 解析参数
    void initParam(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.GuaGuaKa);
        background_color = typedArray.getColor(0, background_color);
        text = typedArray.getString(1);
        text_color = typedArray.getColor(2, text_color);
        text_size = typedArray.getInt(3, text_size);
        mask_color = typedArray.getColor(4, mask_color);
        strokeWidth = typedArray.getColor(5, strokeWidth);
        typedArray.recycle();
    }

    // 初始化画笔
    void initPaint() {
        paint.setAntiAlias(true);// 消除锯齿
        paint.setDither(true);// 消除色块
        paint.setStrokeJoin(Paint.Join.ROUND); // 线条对接处圆润
        paint.setStrokeCap(Paint.Cap.ROUND); // 线条圆润
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(Paint.Style.STROKE); // 空心
    }

    /**
     * 初始化刮刮卡的底层颜色,并且写上奖项
     *
     * @param canvas
     */
    void initPrizeLayer(Canvas canvas, String str) {
        Paint p = new Paint();// 初始化画笔
        p.setStyle(Paint.Style.FILL);
        // 获取View的宽高
        int w = canvas.getWidth();
        int h = canvas.getHeight();
        // 最底层的背景色
        canvas.drawColor(background_color);
        // 初始化一个字体
        Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
        p.setTypeface(font);
        p.setTextSize(text_size);
        p.setColor(text_color);
        // 获取字符串的宽高
        Rect r = new Rect();
        p.getTextBounds(str, 0, text.length(), r);
        int str_h=r.height();
        int str_w=r.width();
        // 给View的canvas中写上奖金
        canvas.drawText(str, (w - str_w) / 2, (h + str_h)/2, p);
        // 创建一个bitmap然后画上遮罩层
        mBitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
        mCanvas.drawColor(mask_color);
    }

    // 用户点击后划线操作
    void drawPath(Canvas canvas) {
        mCanvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        initPrizeLayer(canvas, text);
        drawPath(canvas);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(x, y);
            break;
        case MotionEvent.ACTION_MOVE:
            path.lineTo(x, y);
            break;
        default:
            break;
        }
        invalidate();// 更新界面
        return true;
    }

}

自定义属性:

 <declare-styleable name="GuaGuaKa">
        <attr name="backgroundColor" format="reference|color" />
        <attr name="text" format="reference|string" />
        <attr name="textColor" format="reference|color" />
        <attr name="textSize" format="integer" />
        <attr name="maskColor" format="reference|color" />
        <attr name="strokeWidth" format="integer" />
  </declare-styleable>

View引入:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:customshape="http://schemas.android.com/apk/res/com.example.customshapedemo"
    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=".MainActivity" >

    <com.example.customshapedemo.GuaGuaKa
        android:layout_width="300dp"
        android:layout_height="100dp"
        customshape:text="奖金 5,000,000 RMB"
        customshape:textSize="30"
        customshape:strokeWidth="50"
         />

</RelativeLayout>
时间: 2024-10-11 00:24:51

自定义View->刮刮乐的相关文章

【Android - View】之自定义View实现“刮刮卡”效果

首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的"刮刮卡"的效果,即用户可以刮开覆盖层,查看自己是否中奖: (3)用户可以设置覆盖层的图片以及显示的文本内容和字体大小等参数: (4)用户可以设置一个阈值,当刮开的面积大于这个阈值时,就会自动清除所有覆盖物. 接下来简单介绍一下在这个自定义View中用到的技术点: (1)自定义属性:在 /res/values/attr.xml 

Android 自定义View 实现刮刮卡效果

主要思想: 将一个view设计成多层:背景层,含中奖信息等: 遮盖层,用于刮奖,使用关联一个Bitmap的Canvas 在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作) 使用paint.setXfermode 来进行消除手势滑动区域 /** * author : stone * email : [email protected] * time : 15/7/28 11 01 */ public class GuaView extends Vie

【2014年最后的分享啦】Android实现自定义刮刮卡效果View

一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文<Android实现自定义圆形.圆角和椭圆ImageView(使用Xfermode图形渲染方法)>, 今天我们来看看如何实现电商app里常用到的刮刮卡效果的view组件,其实原理和实现圆角图片的差不多,都是使用Xfermode渲染模式来实现的. (老规矩,源码在博文最后给出哈) 基本原理步骤是这样的

Android 刮刮卡自定义view

import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

安卓开发之刮刮乐实例教程

刮奖在生活中常常见到,网上现在也有各种各样的抽奖活动,下面我们就要实现一个刮刮乐程序,可以完美满足 大家的虚荣心,哈哈,下面就开始吧,100%中奖的喔! 下面先来看看效果图: 让我们来看看它的布局: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <RelativeLayout      android:layout_width="match_parent"      android:layout_heigh

Android 撕衣服(刮刮乐游戏)

项目简介: 该项目为撕衣服,类似刮刮乐游戏 详细介绍: 用户启动项目后,加载一张图片,当用户点击图片的时候,点击的一片区域就会消失,从而显示出在这张图片下面的图片 这个小游戏类似与刮奖一样,刮开涂层就会显示文字. 这里则是撕掉美女身上的衣服,漏出里面的图片. 该应用涉及到的知识有: 1.如何实现画图功能 2.如何把像素点变为透明色 3.如何监听手机对屏幕的操作 主要有触击,滑动,离开三种情况 注意: 1.一定要注意在设置像素点的时候,范围不能超过当前控件的范围 2.设置ImageView最好设置

自己定义控件-画板,橡皮擦,刮刮乐

画板效果图 页面代码 public class ActionerView extends View { private Paint mPaint = new Paint(); private Path mPath = new Path();//手指滑动路径 private Canvas mCanvas;//缓存画布 private Bitmap mBitmap;//缓存图片 private float pointX, pointY;//触点坐标 public ActionerView(Conte

Android实现刮刮乐效果

前几个月刚接触Android的时候做了一个小项目,其中也用到了类似刮刮乐的效果,现在把代码贴出来 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOU

赵雅智_Android案例_刮刮乐

实现效果 主要代码 <FrameLayout 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" > <I