Android开发笔记之自定义View

刮刮卡奖的实现

实现效果如图所示

---

我们自定义一个CardView
让其继承View,代码如下

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.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.util.Random;

/**
 * Created by user on 2016/7/6.
 */
public class CardView extends View{
    private Random random;
    private Paint paint;
    private Paint clearPaint;
    private static final String[] PRIZE = {"一等奖","二等奖","三等奖","再来一次"};
    private static final int FINGER = 50;
    private Bitmap bitmapBuffer;
    private Canvas canvasBuffer;
    private int curX,curY;

    public CardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        random = new Random();//用来随机抽取几等奖
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//画笔
        paint.setTextSize(120);//设置字体的大小
        paint.setColor(Color.BLACK);//设置字体的颜色,中奖字体的颜色
        clearPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//清除画笔,用来刮开刮奖区
        clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));//设置模式
        clearPaint.setStrokeJoin(Paint.Join.ROUND);
        clearPaint.setStrokeCap(Paint.Cap.ROUND);
        clearPaint.setStrokeWidth(FINGER);
        drawBackground();
    }

----------


    protected void onSizeChanged(int w,int h,int oldw,int oldh){
        super.onSizeChanged(w,h,oldw,oldh);
        bitmapBuffer = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
        canvasBuffer = new Canvas(bitmapBuffer);
        canvasBuffer.drawColor(Color.parseColor("#ff808080"));
    }
    private int getPrizeIndex(){
        return random.nextInt(PRIZE.length);
    }
    private void drawBackground() {
        Bitmap bitmapbackground = BitmapFactory.decodeResource(getResources(),R.drawable.background);
        Bitmap bitmapBackgroundMutable = bitmapbackground.copy(Bitmap.Config.ARGB_8888,true);
        Canvas canvasBack = new Canvas(bitmapBackgroundMutable);
        String text = PRIZE[getPrizeIndex()];
        Rect rect =new Rect();
        paint.getTextBounds(text,0,text.length(),rect);
        int x = (bitmapBackgroundMutable.getWidth()-rect.width())/2;
        int y = (bitmapBackgroundMutable.getHeight()-rect.height())*4/5;
        this.setLayerType(View.LAYER_TYPE_SOFTWARE,paint);
        paint.setStrokeWidth(5);
        paint.setShadowLayer(10,0,0,Color.BLACK);
        canvasBack.drawText(text,x,y,paint);
        paint.setShadowLayer(0,0,0,Color.YELLOW);
        if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.JELLY_BEAN) {
            this.setBackground(new BitmapDrawable(getResources(),bitmapBackgroundMutable));
        }else {
            this.setBackground(new BitmapDrawable(bitmapBackgroundMutable));
        }
    }
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        canvas.drawBitmap(bitmapBuffer,0,0,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                curX = x;
                curY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                canvasBuffer.drawLine(curX,curY,x,y,clearPaint);
                invalidate();
                curX = x;
                curY = y;
                break;
            case MotionEvent.ACTION_UP:
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }
}

---

自定义的view的代码就是上面所示,我们只要在布局中引进这个自定义view就可以,主布局的代码非常的简单,如下所示

<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: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="com.xxxxxx.xxxx.flowering.MainActivity">

    <com.lanou.songxuehu.flowering.CardView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
         />
</RelativeLayout>


----------
主函数中什么也不用写,直接运行就可以