android自定义组合
1. android自定义View组合控件
需要看你实现什么效果。一般自定义控件可以用2种方式:
1.
将现有的控件封装起来,作为一个通用的组件来使用,此时只能用代码的形式调用,无法再xml中引用,例如将textview和button封装为一个登录控件。
2.
继承view或者viewgroup,其实viewgroup也是继承的view。然后依次实现onmeasure()、onlayout()、ondraw(),
1.
onmeasure
--
负责测绘控件的大小
2.
onlayout
--
负责控件中子元素摆放的位置
3.
ondraw
--
负责控件和子控件的绘制,使其显示在屏幕中
4.
一些设计和实现较好的自定义view,一般还需要考虑事件的传递、动画的控制、touch事件的处理等
2. Android自定义View基础篇
在我们自定义View,尤其是制作一些复杂炫酷的效果的时候,实际上是将一些简单的东西通过数学上精密的计算组合到一起形成的效果。这其中可能会涉及到画布的相关操作(旋转),以及一些正余弦函数的计算等,这些内容就会用到一些角度、弧度相关的知识。
圆一周对应的角度为360度(角度),对应的弧度为2π弧度。
故得等价关系:360(角度) = 2π(弧度) ==> 180(角度) = π(弧度)
几种创建或使用颜色的方式
Android自定义属性可分为以下几步:
2.自定义View中获取属性
3.在布局中使用
4.属性值的类型归纳
3. Android自定义控件总结
每个view的坐标系原点为左上角那个点,水平方向为x轴,右正左负,竖直方向为y轴,下正上负。
canvas.drawColor //绘制区域涂上颜色(设置底色/蒙层)
canvas.drawCircle(float centerX(圆心X坐标),float centerY(圆心Y坐标),float radius(圆的半径,单位像素),Paint paint)
canvas.drawBitmap
canvas.drawRect(float left,float top,float right,float bottom,Paint paint) //画矩形
canvas.drawRect(RecF rect,Paint paint)
canvas.drawRect(Rect rect,Paint paint)
canvas.drawPoint(float x(点X轴坐标),float y(点Y轴坐标),Paint paint)//画点
点的大小 ->paint.setStrokeWidth(width)
点的形状 ->paint.setStrokeCap(cap)
ROUND(圆形),BUTT(平头),SQUARE(方头)
canvas.drawPoints()//批量画点
canvas.drawOval(float left(左边界点),float top(上边界点),float right(右边界点),float bottom(下边界点),Paint paint) //画椭圆
canvas.drawLine(float startX(起点X轴坐标),float startY(起点Y轴坐标),float stopX(终点X轴坐标),float stopY(终点X轴坐标),Paint paint) (setStyle对直线没有影响)
canvas.drawLines(批量画线)
canvas.drawRoundRect(float left,float top,float right,float bottom,float rx(圆角的横向半径),float ry(圆角的纵向坐标),Paint paint)//画圆角矩形
canvas.drawRoundRect(RectF rect,float rx, float ry,Paint paint)
canvas.drawArc(float left, float top, float right, float bottom, float startAngle(起始角度,顺时针为正,逆时针为负), float sweepAngle(弧形划过角度), boolean useCenter(是否连接到圆心), Paint paint) //绘制弧形或扇形 根据弧形所在椭圆进行绘制
canvas.drawPath() //通过描述路径的方式来绘制图形
path.addXxx() —添加子图形
path.addCircle(x,y,radius,dir(路径方向:顺时针/逆时针))
path.xxxTo —画线
path.lineTo()
path.rLineTo()
path.close() —封闭当前图形
path.setFillType(Path.FillType ft) //设置填充模式
canvas.drawBitmap(Bitmap bitmap,float left,float top,Paint paint);//画bitmap
canvas.drawBitmap(Bitmap bitmap,Rect src,RectF dst,Paint paint)
canvas.drawBitmap(Bitmap bitmap,Rect src,Rect dst,Paint paint)
canvas.drawBitmap(Bitmap bitmap,Matrix matrix,Paint paint)
canvas.drawText(String text,float x(起点x坐标),float y(起点y坐标),Paint paint) //绘制文字
Paint.setStyle //设置绘制模式
FILL 填充模式(默认)
STROKE 画线模式
FILL_AND_STROKE 既画线又填充
Paint.setStrokeWidth //设置线条宽度 (仅在style:Stroke、FILL_AND_STROLE下有效)
Paint.setTextSize //设置文字大小
Paint.setAntiAlias //设置抗锯齿开关
Paint.setTextSize(float textSize)//设置文字大小
Paint.setStrokeJoin(Paint.Join join) //设置拐角的形状
MITER//尖角(默认)
BEVEL//平角
ROUND//圆角
Paint.setStokeMiter(float miter)//设置MITER型拐角的延长线的最大值
设置颜色
直接设置颜色
Paint.setColor(int color)
Paint.setARGB(int a,int r,int g,int b)
Paint.setShader(Shader shader) //设置shader
LinearGradient 线性渐变
RadialGradient 辐射渐变
SweepGradient 扫描渐变
BitmapShader 用bitmap的像素来作为图形或文字的填充
ComposeShader 混合着色器,多个shader混合使用
Paint.setColorFilter(ColorFilter colorFilter) //设置颜色过滤
Paint.setXfermode(Xfermode xfermode) //以要绘制的内容为源图像,以View中已有内容作为目标图像,选取一个PorterDuff.Mode作为绘制内容的颜色处理方案。
色彩优化
Paint.setDither(boolean dither) //设置抖动来优化色彩深度降低时的绘制效果
Paint.setFilterBitmap(boolean filter) //设置双线性过滤优化Bitmap放大绘制的效果
可以理解为 由马赛克变成模糊状态
Paint.setPathEffect(PathEffect effect)//使用PathEffect设置形状的轮廓效果
CornerPathEffect//把所有的拐角变成圆角
DiscretePathEffect//把线条进行随机的偏离
DashPathEffect//使用虚线
PathDashPathEffect//使用一个Path来绘制虚线
SumPathEffect//组合效果
ComposePathEffect//组合效果,组合有先后顺序
Paint.setShadowLayer(float radius,float dx,float dy,int shadowColor)//添加阴影
Paint.setMaskFilter(MaskFilter maskfilter)//在绘制层上方的附加效果
BlurMaskFilter //模糊效果
new BlurMaskFilter(float radius(模糊范围),BlurMaskFilter.Blur style(模糊类型))
EmbossMaskFilter//浮雕效果
new EmbossMaskFilter(float[] direction(光源的方向),float ambient(环境光强度),float specular(炫光系数),float blurRadius(光线范围))
获取绘制的Path
getFillPath(Path src,Path dst)//实际path
getTextPath(Stirng text,int start,int end,float x,float y,Path)/getTextPath(char[] text,int index,int count,float x,float y,Path path)//文字的path
drawTextOnPath()//沿一条Path来绘制文字
StaticLayout //绘制文字,支持换行
paint.setFakeBoldText(booleab fakeBoldText)//是否使用伪粗体
paint.setStrikeThruText()//是否加删除线
paint.setUnderLineText(boolean underlineText)//是否加下划线
paint.setTextSkewX(float skewX)//设置文字横向错切角度
paint.setTextScaleX(float scaleX)//设置文字横向放缩
paint.setLetterSpacing(float letterSpacing)//设置字符间距,默认为0
paint.setTextAlign(Paint.Align align)//LEFT、CENTER、RIGHT默认为LEFT
paint.setTextLocale(Locale locale)/paint.setTextLocales(LocaleList locales) //设置绘制所用的地域
paint.setHinting(int mode)//是否启用字体微调
测量文字尺寸类:
paint.getFontSpacing();//获取推荐的行距
paint.getFontMetrics();//获取point的FontMetrics
baseline:基准线
ascent/descent:普通字符的顶部和底部范围
top/bottom:限制字型的顶部和底部
leading:行的额外间距,即上一行字的bottm与下一行字的top距离
paint.getTextBounds(String text(测量的文字),int start(文字的起始位置),int end(文字的结束位置),Rect bounds(文字显示范围的对象))//获取文字的显示范围
paint.measureText(String text)//测量文字占用的宽度
measureText()>getTextBounds()
paint.getTextWidths(String text,float[] widths)//获取字符串中每个字符的宽度,并把结果填入参数widths
paint.breakText(String text((要测量的文字),boolean measureForwards(测量的方向),float maxWidth(宽度上限(超出上限会截断文字)),float[] measuredWidth(用于接受数据))//测量完成后会把文字宽度赋给measureWidth[0]
paint.getRunAdvance(CharSequence text,int start(文字的起始坐标),int end(文字的结束坐标),int contextStart(上下文的起始坐标),int ContextEnd(上下文的结束坐标),boolean isRtl(文字的方向),int offset(字数的偏移))//计算某个字符处光标的x坐标
paint.getOffsetForAdvance(CharSequence text, int start, int end, int contextStart, int contextEnd, boolean isRtl, float advance)//计算出文字中最接近这个位置的字符偏移量
paint.hasGlyph(String s)//检查指定的字符串是否是一个单独的字型
canvas.clipRect()//范围裁剪
canvas.clipPath()//根据范围裁剪
canvas.translate(float dx,float dy)//位移
canvas.rotate(float degrees,float px,float py)//旋转
canvas.scale(float sx(横向缩放倍数),float sy(纵向缩放倍数),float px,float py)//缩放
canvas.skew(float sx(x轴的错切系数),float sy(y轴的错切系数))//错切
canvas.setMatrix(matrix)//用Matrix直接替换Canvas当前的变换矩阵
canvas.concat(matrix)//用Canvas当前的变换矩阵和Matrix相乘
Camera.rotate*()//三维旋转
1、super.draw()//总调度方法
2、super.onDraw()
3、dispatchDraw()//绘制子View的方法
绘制顺序:
draw()总调度方法,view的绘制过程都发生在draw()方法里
1、背景(drawBackground()不能重写)-------android:background:/View.setBackgroundXxx()
2、主体(onDraw())
3、子View(dispatchDraw())
4、滑动边缘渐变和滑动条(onDrawForeground())-------android:scrollbarXxx/View.setXXXScrollBarXXX()
5、前景(onDrawForeground())-------android:foreground/View.setForeground()
view.animate().translationX()//x轴偏移
1、如果是自定义控件,需要添加setter、getter方法
2、ObjectAnimator.ofXXX()创建ObjectAnimator对象
3、用start()方法执行动画
setDuration(int ration)//设置动画时长
setInterpolator(Interpolator interpolator)//设置插值器
ViewPropertyAnimator.setListener()/ObjectAnimator.addListener()
ViewPropertyAnimator.setUpdateListener()/ObjectAnimator.addUpdateListener()
ObjectAnimator.addPauseListener()
ViewPropertyAnimator.withStartAction/EndAction()
ArgbEvaluator//颜色渐变动画
PropertyValuesHolder//同一个动画中改变多个属性
PropertyValuesHolders.ofKeyframe()//把同一个属性拆分
AnimatorSet//多个动画配合执行
targetSdkVersion>=14,硬件加速默认开启
view.setLayerType()
LAYER_TYPE_SOFTWARE:使用软件来绘制View Layer,绘制到Bitmap,并顺便关闭硬件加速
LAYER_TYPE_HARDWARE:使用GPU来绘制View Layer,绘制到OpenGL texture(如果硬件加速关闭,那么行为和LAYER_TYPE_SOFTWARE一致)
LAYER_TYPE_NONE:关闭View Layer
View Layer可以加速无invalidate()(例如动画)时的刷新效率,但对于需要调用invalidate()的刷新无法加速
硬件加速并不支持所有的绘制操作
1、测量(measure)
View:View在onMeasuer中会计算自己的尺寸然后保存
ViewGroup:ViewGroup在onMeasure中会调用所有子View的measure让它们进行自我测量,并根据子View
计算出的期望尺寸来计算他们的事迹尺寸和位置然后保存。
2、布局(layout)
View:无子View所以onLayout不做任何处理
ViewGroup:ViewGroup在onLayout中会调用自己所有子View的layout方法,把他们的尺寸、位置传给他们, 让他们完成自我布局。
MeasureSpec = mode + size :父类传递过来给当前View的一个建议值
MeasureSpec.getMode(int spec)//获取模式
MeasureSpec.getSize(int spec)//获取数值
限制分类:
UNSPECIFIED(不限制)
AT_MOST(限制上限)->wrap_content
EXACTLY(限制固定值)->match_parent/具体值
1、重写onMeasure来修改已有的View尺寸
(1)、重写onMeasure方法,调用super.onMeasure触发原有的自我测量。
(2)、在super.onMeasure下用getMeasureWidth与getMeasureHeigh获取之前测量的结果,使用自己的算法计算新结果。
(3)、调用setMeasureDimension保存新结果。
2、重写onMeasure来全新定制自定义View的尺寸
与1区别,保证计算的同时,保证结果满足父View给出的尺寸限制
(1)重写onMeasure,计算出View的尺寸
(2)使用resolve让子View的计算结果符合父View的限制,也可不使用该方法自己定义
3、重写onMeasure和onLayout来全新定制自定义ViewGroup的内部布局
两个注意点:
子控件间的margin值
1、重写generateLayoutParams()和generateDefaultLayoutParams()
2、获取margin值 MarginLayoutParams lp = (MarginLayoutParams )child.getLayoutParams()
子控件间的padding值
1、测量后直接getPaddingLeft、getPaddingTop、getPaddingRight、getPaddingBottom
重写onMeasure来计算内部布局
(1)调用每个子View的measure来计算子View的尺寸
结合layout_xxx和自己可用空间
(2)计算子View的位置并保存子View的尺寸和位置
(3)计算自己的尺寸并用setMeasureDimension保存
重写onLayout来摆放子View
(1)调用每个子View的layout,让他们保存自己的位置和尺寸
view工作原理
触摸事件
1、ACTION_DOWN:手指刚接触屏幕,按下去的那一瞬间
2、ACTION_MOVE:手指在屏幕上移动
3、ACTION_UP:手指从屏幕上松开的瞬间
事件序列:从ACTION_DOWN -> ACTION_UP
ViewGroup:
DispatchTouchEvent
• return true:表示该View内部消化掉了所有事件
• return false:表示事件在本层不再继续进行分发,并交由上层控件的onTouchEvent方法进行消费
• return super.dispatchTouchEvent(ev):默认事件将分发给本层的事件拦截onInterceptTouchEvent方法 进行处理
OnInterceptTouchEvent
• return true:表示将事件进行拦截,并将拦截到的事件交由本层控件的onTouchEvent进行处理
• return false:表示不对事件进行拦截,事件得以成功分发到子View
• return super.onInterceptTouchEvent(ev):默认表示不拦截该事件,并将事件传递给下一层View的 dispatchTouchEvent
OnTouchEvent 默认false
• return true:表示onTouchEvent处理完事件后消费了此次事件
• return fasle:表示不响应事件,那么该事件将会不断向上层View的onTouchEvent方法传递,直到某个View的 onTouchEvent方法返回true
• return super.dispatchTouchEvent(ev):表示不响应事件,结果与return false一样
子View不存在分发:
• DispatchTouchEvent 事件分发
• OnTouchEvent 默认true
如下图为事件分发流程图:
---------------------- 以上总结部分源自Hencoder教程 ------------------------------
4. android中怎样实现自定义控件中的组合控件
public
class
MyView
extends
View{
//
此处省略
构造方法
private
void
onDraw(Canvas
canvas){
//重写view的onDraw方法,绘制控件的样式
//这里你使用canvas来绘制,你布局中使用这个控件就是你绘制的样子
}
//然后你可以定义很多自己的一些方法,用来修改控件的样式
//假如你自定义的一个
进度条
的话,就要修改进度条值,你就可以自定义方法,让实现对象来改变进度值,记得修改后调用validate方法更新显示。(具体函数记不太清了)
}
大概就是这样实现的自定义控件,自定义控件的话优化是很重要的哦,不然性能会很差。
然后你要使用这个控件的话,在布局中就需要这样定义,假如这个自定义控件类是这样的:
xxx.xxx.MyView。
则使用时:
5. Android | 自定义上拉抽屉+组合动画效果
话不多说先来个效果图看一下
实现的主要功能就是上拉抽屉(解决了子view的滑动冲突)+ 边缘动画 + 中间小球和seekbar效果动画。黄色部分就是上拉抽屉整体,绿色部分是横向的recyclerview。有个朋友说有阻尼效果就完美了 ... 因为效果图没有阻尼效果,所以就没有去研究 - -!
顶部也可以放个图片,像酱紫
圆形中间也可以放图片和文字,上下滑动的时候内部图片和文字也会随之改变,其实原理都是一样的,一个会了你放啥都行,文章后面也会介绍。
效果就是酱紫
抽屉里我放的是LinearLayout,然后动态添加了多个可以横向滚动的RecyclerView,上滑下滑左滑右滑轻松无压力~~就是这么刺激
效果介绍完了,下面我们看一下如何实现的
在当前demo里
到这里就可以实现如效果图一样的滚动效果了
这样看就比较直观些
这个就是用贝塞尔曲线画的简单的一个效果
我这里是用了两个三阶贝塞尔曲线,从中间分开,左边一个右边一个,然后吧这个视图上下分为一半,中间的点不变,两边的高度增加,两边是扇形画的圆角,然后lineto画成封闭图形,这样就出现了如上图所示的动画效果。
这部分大家应该就比较熟悉,自定义view经常会用到,用法就不多说了,记录一下中间图片随之缩放和透明改变的写法
然后再动画中不断改变圆和圆环的半径、图的尺寸、画笔透明度,就能达到效果
抽屉的弧度、圆、圆环和图片这些的改变主要是监听当前上滑的距离和需要上滑的距离做的百分比计算的然后相应的随之改变。
是在父view的滚动监听里做的改变,topHeight就是抽屉需要滚动的距离。
之前接触的动画都是单独的模块,直接开始结束的那种,像这次这样需要动态改变而且多个结合的还是第一次遇到(渣渣本渣没错了),所以也是在边学边写,可能有很多地方写的不是很恰当,也是希望大佬可以指出,共同学习共同进步。其实现在的效果是大改过一次的,最初贝塞尔曲线高度取的整个高度,然后改变中间的那个点向下凹,但是外面的圆又要正好一半在他的上方一半在下方,这样的位置其实是不好做适配的,所以就改成了现在的这样。通过这个动画的实现,自己不仅是在自定义view、动画还是一些思考方式上都有所进步,这是挺重要的。项目中还有另一个动画,就下篇再讲吧~
gitee项目地址
https://gitee.com/yoyo666/TopScrollView.git
6. Android中的自定义控件
组合控件:即由原生控件拼装而成,不需要自己实现或者绘制具体的页面内容和效果,常用于标题栏TitlleView
eg:
继承控件的意思就是,我们并不需要自己重头去实现一个控件,只需要去继承一个现有的控件,然后在这个控件上增加一些新的功能,就可以形成一个自定义的控件了。这种自定义控件的特点就是不仅能够按照我们的需求加入相应的功能,还可以保留原生控件的所有功能。
熟悉view的绘制原理
1.measure用来测量View的宽和高。
2.layout用来确定View在父容器中放置的位置。
3.draw用来将view绘制在屏幕上