Android自定义view案例一气泡框

通过之前的两个基础文章的学习,我们基本知道自定义view的基本流程和各方法的作用了。那么接下来我们就要拿起画笔去绘制我们的view了。首先老规矩把我们的学习大纲拿出来,时刻不能忘,,哈哈、

1.自定义view单纯的用画笔绘制view(死view)
2.自定义view增加手势
3.自定义view增加动画
4.自定义view手势动画交互     这4步让我们一步一步的来探索学习

好了这就是我们的大纲。这是我们第一个view,所以就只是一个单纯的“死”view。我为什么称之为死view,通过这个名字我们就知道了。就是单纯的画一个图而已,没有动画。就是单单纯纯的一个图。但是一定不要着急,这是我们学自定义view的一个过程。。凡事都有个过程,还没学会走,就想跑,那是不可能的,所以我们要一步一步的来。好了那就开始把。先上死view 效果图例:

Android自定义view案例一气泡框_第1张图片

通过这个图我们看到,确实是个死view,就一个图。首先分析一下:

1.就是一个矩形,有圆角

2.矩形下面有个三角形

是不是很简单,不要眼高手低。。再简单也要亲自去试试。这是个学习的过程。。。。学习自定义view最好的方法就是多练,多找一些例子练练。。慢慢你就牛逼了。

不管再难的view,还是很简单的view。套路还是我们前两篇文章的流程。

第一步:创建一个类继承View。第二步......................这里我也不想重复写了,不熟悉的可以去看我第一篇自定义view。

下面就开始我们的例子:

//圆角半径
float ridus;
//背景颜色
int  popu_bg;
//画笔
Paint paint;

public PopuView(Context context) {
    this(context,null);
}
public PopuView(Context context, @Nullable AttributeSet attrs) {
    this(context,attrs,0);
}
public PopuView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    //获取属性
    TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.PopuView,0,0);
    ridus = a.getDimension(R.styleable.PopuView_ridus,5);
    popu_bg = a.getColor(R.styleable.PopuView_popu_bg,0xFF4081);
    a.recycle();
    //初始化画笔
    paint = new Paint();
    //设置抗锯齿
    paint.setAntiAlias(true);
    //设置填充
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    //设置防抖动
    paint.setDither(true);
}
这里就是我们初始化的数据。

//view的宽高
int widthSize;
int heightSize;

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获得当前view的宽高限制的类型
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    //获得view的默认尺寸
    widthSize= MeasureSpec.getSize(widthMeasureSpec);
    heightSize= MeasureSpec.getSize(heightMeasureSpec);
    //判断viewmode类型
    //这种是 warp_parent 类型 就是view的宽高不确定,所以我们要给view 赋值。实在 dimen.xml 里面写的
    if (widthMode==MeasureSpec.AT_MOST&&heightMode==MeasureSpec.AT_MOST){
        widthSize = R.dimen.pwidth;
        heightSize = R.dimen.pheight;
    }
    //最后把宽,高设置到view    setMeasuredDimension(widthSize,heightSize);
}
这里就是我们测量view的尺寸。看一下布局:

    android:id="@+id/po"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    app:ridus="5dp"
    app:popu_bg="@color/colorAccent"
    />
宽高都是固定的所以MeasureSpace的模型就是 MeasureSpec.EXACTLY,就是确切的值。既然是确切的值那我们的
MeasureSpec.getSize(widthMeasureSpec)

这个方法获取到的尺寸就是具体的布局中的view的尺寸。所以我们就默认默认view的宽高,不用修改。如果我们布局中用wrap_parent 就是MeasureSpec.AT_MOST这样的模型。就是我们view没有值。所以我们要给他赋值。

name="PopuView">
    name="ridus" format="dimension">
    name="popu_bg" format="color">
这是我们定义的view的属性。以便写死。

接下来就是根据参数绘制view了

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    paint.setColor(popu_bg);
    //画矩形
    RectF rectF = new RectF(0,0,widthSize,heightSize-20);
    canvas.drawRoundRect(rectF,ridus,ridus,paint);
    //画三角形(这里是基于path路径的绘制)
    Path path = new Path();
    path.moveTo((widthSize/2)-50, heightSize-20);
    path.lineTo(widthSize / 2, heightSize);
    path.lineTo((widthSize/2)+50, heightSize-20);
    path.close();
    canvas.drawPath(path, paint);

}

注释也很清晰,,一般就是一些参数和算法。这是一个死的view。我们大纲里面要从死view到动态view。在到与人交互的view。这个过程的学习。所以我们不能只搞死view

下一篇我们就来学一学有动态的view。。。要一点点的去过度。不能过度的太快。基础要打捞呀。不然后期学起来一样吃力。










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