通过之前的两个基础文章的学习,我们基本知道自定义view的基本流程和各方法的作用了。那么接下来我们就要拿起画笔去绘制我们的view了。首先老规矩把我们的学习大纲拿出来,时刻不能忘,,哈哈、
1.自定义view单纯的用画笔绘制view(死view)
2.自定义view增加手势
3.自定义view增加动画
4.自定义view手势动画交互 这4步让我们一步一步的来探索学习
好了这就是我们的大纲。这是我们第一个view,所以就只是一个单纯的“死”view。我为什么称之为死view,通过这个名字我们就知道了。就是单纯的画一个图而已,没有动画。就是单单纯纯的一个图。但是一定不要着急,这是我们学自定义view的一个过程。。凡事都有个过程,还没学会走,就想跑,那是不可能的,所以我们要一步一步的来。好了那就开始把。先上死view 效果图例:
通过这个图我们看到,确实是个死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); //判断view的mode类型 //这种是 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。。。要一点点的去过度。不能过度的太快。基础要打捞呀。不然后期学起来一样吃力。