Android UI高级之自定义控件

在android中有许多控件，比如editview、button等，但是，有时这些控件并不能满足我们的需求，这时，我们就需要去自定义一个控件来满足我们的需要，下面给出一个仿360加速球的demo.

1、首先，来看一下360加速球的效果

2、 下面给出一个自定义的view，加速球（Accelerating ball )

package com.example.houjie.studyapk.studyview.custom;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Bitmap;
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.os.Build;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.Random;

/**
 * 仿360加速球的自定义控件
 * Created by hj on 2016/5/19.
 */
public class CustomViewAccBall extends View{
    private Paint paintCircle,paintText,paintLine;//三个画笔，
    private int r,width,height;//加速球的半径，view的宽和高
    private int dWidth,dHeight,bCount = 5,bHeight=50;//贝塞尔曲线的一些决定量，可以自己设置，我不太会用
    private Random random;//产生随机数，加速球的波浪效果
    private Path path;//
    private final int maxProgress = 100;//当前的进度
    private int progress=0;
    private Bitmap bitmap;//位图
    private Canvas bitmapCanvas;//位图画板
    public int getProgress() {
        return progress;
    }//

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();//实时更新进度
    }

    public int getMaxProgress() {
        return maxProgress;
    }


    //构造器，必须实现
    public CustomViewAccBall(Context context) {
        super(context);
        init();
    }

    public CustomViewAccBall(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomViewAccBall(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)//取消版本限制
    public CustomViewAccBall(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init(){
        //初始化圆的画笔
        paintCircle = new Paint();
        paintCircle.setStrokeWidth(1);
        paintCircle.setAntiAlias(true);
        paintCircle.setColor(Color.argb(0xff,0x2b,0x84,0x62));
        paintCircle.setStyle(Paint.Style.FILL);
        //初始化文字的画笔
        paintText = new Paint();
        paintText.setTextSize(50f);
        paintText.setAntiAlias(true);
        paintText.setTextAlign(Paint.Align.CENTER);
        paintText.setColor(Color.WHITE);

        //初始化波浪线的画笔
        paintLine = new Paint();
        paintLine.setStyle(Paint.Style.FILL);
        paintLine.setColor(Color.argb(0xff,0x4e,0xc8,0x63));
        paintLine.setStrokeWidth(1);
        paintLine.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        // android.graphics.PorterDuff.Mode.SRC_IN:只在源图像和目标图像相交的地方绘制源图像

        path = new Path();
        //初始化path
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bitmapCanvas.drawCircle(width/2,height/2,r,paintCircle);//绘制圆
        //通过Path绘制贝塞尔曲线，此处贝塞尔曲线不是太懂，所以画的东西不是太好，望高手指点
        path.reset();//清除path内容
        path.moveTo(0, height);
        path.lineTo(0, ((float) maxProgress-progress)/100*height);//此处若在定义时若是int,则必须强制转换，否则结果为零，聪明的你一定能理解。
        for (int i = 0; i < bCount; i++) {
            path.rQuadTo(random.nextFloat()*bHeight, random.nextFloat()*dWidth/2,random.nextFloat()*dWidth, 0);
//            path.rQuadTo(20, -5, 40, 0);//可以是这样的固定值
        }
        path.lineTo(width, ((float) maxProgress-progress)/100*((float)height));
        Log.e("(maxProgrerogressheight","----------------"+((float) maxProgress-progress)/100*height);
        path.lineTo(width, height);
        path.close();
        //将贝塞尔曲线绘制到Bitmap的Canvas上
        bitmapCanvas.drawPath(path, paintLine);
        //将Bitmap绘制到View的Canvas上
        bitmapCanvas.drawText(progress * 100f / maxProgress + "%", width / 2, height / 2, paintText);
        canvas.drawBitmap(bitmap, 0, 0, null);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = this.getMeasuredWidth();//得到宽和高
        height = this.getMeasuredWidth();
        setMeasuredDimension(width, height);
        r = width/2;//设置圆的半径
        dHeight = height/5;
        dWidth = width/5;
        bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//设置图片的大小
        bitmapCanvas = new Canvas(bitmap);
        random = new Random();
    }
}

3、activity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.example.houjie.studyapk.studyview.custom.ActivityCustomViewAccBall">
    <com.example.houjie.studyapk.studyview.custom.CustomViewAccBall
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/viewAccBall"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnCustomAccBall"
        android:text="开启动画"
        />
</LinearLayout>

4、activity

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.example.houjie.studyapk.R;

/**
 * 仿360加速球显示的activity
 */
public class ActivityCustomViewAccBall extends AppCompatActivity {
    private Button btnCustomAccBall;
    private CustomViewAccBall viewAccBall;
    private int i = 0;
    private  Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(i<=100){
                viewAccBall.setProgress(i);//延时1秒改变加速球进度
                sendEmptyMessageDelayed(1,1000);
                i+=10;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_custom_view_acc_ball);
        viewAccBall = (CustomViewAccBall) findViewById(R.id.viewAccBall);
        btnCustomAccBall = (Button) findViewById(R.id.btnCustomAccBall);
        btnCustomAccBall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                i = 0;
                handler.sendEmptyMessageDelayed(1,1000);//开启动画
            }
        });
    }
}

5、效果