Android--自定义View

为什么要用View

因为android自带的view无法满足你的需求。这时候就需要我们的自定义View了

什么是自定义View，android自带View

• ImageVIew：imageButton,QuickContactBadge,AppConpatImageView
• TextView：EditText,Button,RadioButton,ToddleButton,CheckBox,switch
• ViewGroup（视图组）：
  LinearLayout,RelativeLayout,ViewPager,ListView,AbsoluteLayout，
  FrameLayout,GridLayout
  

如何使用自带View，三种方式

• 自绘控件：直接继承View（原料重造）
• 重写控件：间接继承View，重写View子类（成品加工）
• 组合控件：间接继承View子类，将需要的组合到一起

Paint常用方法及解释

• setAntiAlias（）：设置画笔的锯齿效果
• setColor（）：设置画笔
• setARGB（）：设置画笔ARGB的值
• setAlpha（）：设置画笔Alpha的值
• setStyle（）：设置画笔的风格（空心或者实心）
• setStrokeWidth（）：设置空心框的宽度
• getColor（）：获取画笔的颜色
• setTextSize（）：设置字体的尺寸

Canvas常用方法及解释

• drawLine():绘制直线
• drawCircle:绘制圆形
• drawBitmap：绘制图形
• drawRect（）：绘制矩形
• drawText（）：绘制字符

自绘控件步骤：

1. 继承View（用第二个有两个参数的构造方法））
2. 实现Listener接口
3. 重写构造方法
4. 重写onDraw方法
5. Paint画笔
6. Canvas画布
7. invalidate方法
8. 在布局文件中引用

自定义View实例

点击中间的圆，每点击一下增长一个数，实现计数器功能

1. 新建一个实体类继承View
2. 重写第二个有两个参数的构造方法
3. 重写onDraw方法绘制
4. 在onTouchEvent方法中调用invalidate自动调用onDraw方法

附代码MyView

public class MyView extends View{

    private Paint paint=new Paint();
    private int num=0;

    //第一个参数：上下文环境
    //第二个参数，属性集合，接收textsize类属性
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

 //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        //调用父View的onDraw函数，因为View这个类帮我们实现了一些
        //基本的绘制功能，比如绘制背景颜色、背景图片等
        int r=getWidth()/4;
        int centreX=getWidth()/2;
        int centreY=getHeight()/2;
        paint.setAntiAlias(true);//反锯齿
        //开始绘制
        canvas.drawCircle(centreX,centreY,r,paint);

        //画笔操作
        paint.setColor(Color.BLUE);
        paint.setTextSize(50);
        //在画布上添加字
        canvas.drawText(num+"",centreX-15,centreY+25,paint);//由于字是由左下角为中心，所以要进行微调
        paint.setStyle(Paint.Style.FILL);
    }

    //点击画布时的操作
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        num++;
        invalidate();//默认直接调用onDraw方法
        return super.onTouchEvent(event);
    }
}

activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.homework.activity.viewdemo.MainActivity">

    <com.homework.activity.viewdemo.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

自定义View实例（2）

实现计时器效果，进去即当时的时间，按照正常的钟表式转动

实现效果展示

1. 新建一个实体类ClockView继承View
2. 重写第二个有两个参数的构造方法
3. 重写onDraw方法绘制，定义画布Canvas画笔Paint
4. 尤其记得第一部分先保存画布状态，最后一步再恢复画布状态

附上全部代码

ClockView

public class ClockView extends View {

    private Paint paint=new Paint();

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);//空心圆
        paint.setAntiAlias(true);//消除锯齿
        paint.setStrokeWidth(10);//设置线条厚度

    //定义横坐标纵坐标半径
        int centreX=getWidth()/2;
        int centreY=getHeight()/2;
        int r=getWidth()/3;

        //开始绘制大圆
        canvas.drawCircle(centreX,centreY,r,paint);
        //画出圆中心
        canvas.drawCircle(centreX,centreY,5,paint);

        //圆形刻度
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.FILL);//实心
        paint.setStrokeWidth(2);//刻度的宽度
        paint.setTextSize(35);


        //依次旋转画布，画出每个刻度和对应数字
        for(int i=1;i<=12;i++){
            canvas.save();//保存当前画布
            canvas.rotate(30*i,centreX,centreY);//刻度间隔
            canvas.drawLine(centreX,centreY-r,centreX,centreY-r+30,paint);//起始外坐标
            canvas.drawText(i+"",centreX-15,centreY-r+70,paint);//循环的刻度位置
            canvas.restore();//恢复画布最初的状态
        }

        //获取当前时间
        Calendar calendar=Calendar.getInstance();
        int hour=calendar.get(Calendar.HOUR);
        int minute=calendar.get(Calendar.MINUTE);
        int second=calendar.get(calendar.SECOND);

        //绘制秒针
        canvas.save();//保存当前画布
        canvas.rotate(second*6,centreX,centreY);//秒针旋转的角度
        paint.setColor(Color.GREEN);
        canvas.drawLine(centreX,centreY,centreX,centreY-r+40,paint);//指针起点和终点的位置
        canvas.restore();//恢复画布最初的状态

        //绘制分针
        canvas.save();//保存当前画布
        canvas.rotate(minute*6,centreX,centreY);//分针旋转的角度
        paint.setColor(Color.RED);
        canvas.drawLine(centreX,centreY,centreX,centreY-r+80,paint);//指针起点和终点的位置
        canvas.restore();//恢复画布最初的状态

        //绘制时针
        canvas.save();//保存当前画布
        canvas.rotate(hour*30+minute*30/60,centreX,centreY);//时针旋转的角度
        paint.setColor(Color.BLUE);
        canvas.drawLine(centreX,centreY,centreX,centreY-r+80,paint);//指针起点和终点的位置
        canvas.restore();//恢复画布最初的状态

        invalidate();//自动调用onDraw方法

    }
}

activity_main：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.homework.activity.viewdemo.MainActivity">

    <com.homework.activity.viewdemo.ClockView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>