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
    Android--自定义View_第1张图片

如何使用自带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实例

点击中间的圆,每点击一下增长一个数,实现计数器功能
Android--自定义View_第2张图片

  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

"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"/>

自定义View实例(2)

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

实现效果展示
Android--自定义View_第3张图片

  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:

"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" />

你可能感兴趣的:(Android--自定义View)