自定义view

通过在自定义的ViewGroup内部使用ViewDragHelper,使得给自定义的ViewGroup在水平方向上并排按序添加多个子View(ViewGroup),可以实现水平左右滚动的效果,类似于ViewPager.官方解释如下(不做翻译,原汁原味的英语更易理解):/** * ViewDragHelper is a utility class for writing custom ViewGroups. It offers a number * of useful operations and state tracking for allowing a user to drag and reposition * views within their parent ViewGroup. */使用ViewDragHelper内部定义了一个静态内部类Callback,我们需要重写Callback.val helper : ViewDragHelper = ViewDragHelper.create(this, object : ViewDragHelper.Callback(){ //根据需要,重写相关的方法.})在你的自定义ViewGroup的onTouchEvent(event)方法内调用ViewDragHelper.processTouchEvent(event). override fun onTouchEvent(event: MotionEvent): Boolean { helper.processTouchEvent(event) return true }在ViewDragHelper.processTouchEvent(event)方法内部调用了Callback的回调方法.这样你只需要重写Callback的回调方法即可.Callback先看一下我们需要用到的Callback的方法.tryCaptureView当前触摸到的是哪个View,我们定义的这个ViewGroup可以添加多个子Viewoverride fun tryCaptureView(capturedView: View, pointerId: Int): Boolean { for (x in 0 until childCount) { val child = getChildAt(x) if (child.visibility == View.GONE) continue if (child == capturedView) return true; } return false }clampViewPositionHorizontal(@NonNull View child, int left, int dx)约束水平方向上左右可滚动的边界位置.对于通过tryCaptureView触摸的任意一个view,需要对它的左右两个方向做边界约束.override fun clampViewPositionHorizontal(child: View, left: Int, dx: Int): Int { for (x in 0 until childCount) { if (getChildAt(x) == child) { //左边界约束,在ScrollerLayout未发生滑动的情况下,当前触摸的子View距离ScrollerLayout的左边界的距离值. var clampLeft = 0 //右边界约束,在ScrollerLayout未发生滑动的情况下,当前触摸的子View距离ScrollerLayout的右边界的距离值. var clampRight = 0 for (y in 0 until x) { clampLeft += getChildAt(y).width } for (y in x + 1 until childCount) { clampRight += getChildAt(y).width } //当前触摸的子View距离ScrollerLayout的左边界不能超过clampLeft的约束值,子View向右滑动的极限 if (left > clampLeft) return clampLeft //当前触摸的子View距离ScrollerLayout的右边界不能超过clampRight的约束值,子View向左滑动的极限 if (left + clampRight < 0) return clampRight } } return left }clampViewPositionVertical(@NonNull View child, int top, int dy)竖直方向上的顶部和底部的边界约束.我们这里不做处理,直接返回0.onViewPositionChanged(@NonNull View changedView, int left, int top, int dx,int dy)当前触摸的view位置发生改变时的回调.需要对每个子view都重新更改其位置.override fun onViewPositionChanged(changedView: View, left: Int, top: Int, dx: Int, dy: Int) { super.onViewPositionChanged(changedView, left, top, dx, dy) for (x in 0 until childCount) { if (getChildAt(x) == changedView) { changedView.layout(left, 0, left + changedView.width, height) //当前触摸的子View左右两边的View的left值,也就是距离ScrollerLayout的左边界的距离. var totalChildWidth: Int = 0 //对于changedView左侧的View,采用由右至左的顺序来改变每个view的位置.方便totalChildWidth做累加操作 for (y in x - 1 downTo 0) { val child = getChildAt(y) totalChildWidth += child.width child.layout(left - totalChildWidth, top, left - (totalChildWidth - child.width), height) } //changedView右侧的第一个View距离ScrollerLayout的左边界的默认距离 totalChildWidth = changedView.width+left //对于changedView右侧的,采用由左至右的顺序来改变每个view的位置. for (y in x + 1 until childCount) { val child = getChildAt(y) child.layout(totalChildWidth, 0, child.width + totalChildWidth, height) totalChildWidth += child.width } break } } }onViewReleased(@NonNull View releasedChild, float xvel, float yvel)松开手指后的回调.releaseChild.getLeft() > 0;向右滚动.需要判断releaseChild滚动的距离有没有超过其前一个View的宽度的一半.releaseChild.getLeft() < 0;向左滚动.需要判断releaseChild滚动的距离有没有超过自身的宽度的一半.int getViewHorizontalDragRange(@NonNull View child);水平滚动的范围.这里等于各个子view宽度之和.int getViewVerticalDragRange(@NonNull View child);竖直方向上不做滚动,直接返回0即可.具体源码看这里ScrollerLayout ...

1.前言前天的浏览 GitHub 时发现一个模仿 Gif 的 Loading 特效的项目，感觉效果很不错，也比较有创意，如下：GitHub 上好几个做这个效果的项目，但是很少有完全实现的，有的还有 Bug，于是花了 2 天实现了一下。效果如下：GitHub 项目在这里 LeavesLoading2. 分析实现要求：叶子随机产生飘动轨迹为正弦函数，并且随机振幅飘动时伴随自旋转，更符合物理规律遇到进度条似乎是融入的风扇可旋转Loading == 100% 时显示一个动画细节风扇和叶子自适应 View 大小叶子在视觉上不能飘出 RountRect 边界3. 核心实现3.1 随机产生叶子本质是事先产生一定数量叶子，这些叶子的漂动时的振幅、相位、旋转方向等等都是随机的，并且飘动是周期性地即叶子飘动到最左边时，又重新回到最右边。Leaf 类： private class Leaf{ float x,y;//坐标 AmplitudeType type;//叶子飘动振幅 int rotateAngle;//旋转角度 RotateDir rotateDir;//旋转方向 long startTime;//起始时间 int n;//初始相位 }Leaf 生成方法： Leaf generateLeaf(){ Leaf leaf = new Leaf(); //随机振幅 int randomType = mRandom.nextInt(3); switch (randomType){ case 0: //小振幅 leaf.type = AmplitudeType.LITTLE; break; case 1: //中等振幅 leaf.type = AmplitudeType.MIDDLE; break; default: //大振幅 leaf.type = AmplitudeType.BIG; break; } //随机旋转方向 int dir = mRandom.nextInt(2); switch (dir){ case 0: //逆时针 leaf.rotateDir = RotateDir.ANTICLOCKWISE; break; default: //顺时针 leaf.rotateDir = RotateDir.CLOCKWISE; break; } //随机起始角度 leaf.rotateAngle = mRandom.nextInt(360); leaf.n = mRandom.nextInt(20); mAddTime += mRandom.nextInt((int)mLeafFloatTime); leaf.startTime = System.currentTimeMillis() + mAddTime; return leaf; }3.2 叶子飘动轨迹为正弦函数确定 Leaf 在某个时刻的坐标 ( x , y )： /** * 获取叶子的（x,y）位置 * @param leaf 叶子 * @param currentTime 当前时间 / private void getLeafLocation(Leaf leaf,long currentTime){ long intervalTime = currentTime - leaf.startTime;//飘动时长 if (intervalTime <= 0){ // 此 Leaf 还没到飘动时间 return; }else if (intervalTime > mLeafFloatTime){ // Leaf 的飘动时间大于指定的飘动时间，即叶子飘动到了最左边，应回到最右边 leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime); } // 计算移动因子 float fraction = (float) intervalTime / mLeafFloatTime; leaf.x = (1-fraction)mProgressLen; leaf.y = getLeafLocationY(leaf); if (leaf.x <= mYellowOvalHeight / 4){ //叶子飘到最左边，有可能会超出 RoundRect 边界，所以提前特殊处理 leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime); leaf.x = mProgressLen; leaf.y = getLeafLocationY(leaf); } }要想让 Leaf 飘动轨迹为正弦函数，关键在于确定 Leaf 的 Y 轴坐标： / * 获取叶子的Y轴坐标 * @param leaf 叶子 * @return 经过计算的叶子Y轴坐标 / private float getLeafLocationY(Leaf leaf){ float w = (float) (Math.PI * 2 / mProgressLen);//角频率 float A;//计算振幅值 switch (leaf.type){ case LITTLE: A = mLeafLen/3; break; case MIDDLE: A = mLeafLen2/3; break; default: A = mLeafLen; break; } // (mHeight-mLeafLen)/2 是为了让 Leaf 的Y轴起始位置居中 return (float) (A * Math.sin(w * leaf.x + leaf.n)+(mHeight-mLeafLen)/2); }3.3 叶子飘动时自旋转这里就涉及到了 Leaf 的绘制，其实 Gif 中的叶子和风扇都可以使用 Canves 直接绘制图案，但是这样就会有两个问题：难画：想要画出满意图形，并且还要旋转、缩放、平移可要下一番功夫。灵活性低：如果想换其他样式又得重新设计绘制过程。因此这里采用 Canves.drawBitmap() 的方式绘制，直接使用已有的图片作为叶子和风扇，同时利用 Canves.drawBitmap() 的一个重载的方法可以很方便的实现旋转、缩放、平移：void drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) ;就是通过这里的 Matrix 矩阵，它内部封装了 postScale()、postTranslate 、postRotate() 等方法，可以帮助我们快速的对 Bitmap 进行旋转、缩放、平移还有其他操作。使用时要记得配合 Canves 的 save() 和 restore() 使用，否则达不到想要的效果。对这方面不熟的朋友可以看看 HenCoder 的自定义 View 教学 1-4 。绘制 Leaf 的方法： private void drawLeaves(Canvas canvas){ long currentTime = System.currentTimeMillis(); for (Leaf leaf : mLeafList) { if (currentTime > leaf.startTime && leaf.startTime != 0){ // 获取 leaf 当前的坐标 getLeafLocation(leaf,currentTime); canvas.save(); Matrix matrix = new Matrix(); // 缩放 自适应 View 的大小 float scaleX = (float) mLeafLen / mLeafBitmapWidth; float scaleY = (float) mLeafLen / mLeafBitmapHeight; matrix.postScale(scaleX,scaleY); // 位移 float transX = leaf.x; float transY = leaf.y; matrix.postTranslate(transX,transY); // 旋转 // 计算旋转因子 float rotateFraction = ((currentTime - leaf.startTime) % mLeafRotateTime) /(float)mLeafRotateTime; float rotate; switch (leaf.rotateDir){ case CLOCKWISE: //顺时针 rotate = rotateFraction * 360 + leaf.rotateAngle; break; default: //逆时针 rotate = -rotateFraction * 360 + leaf.rotateAngle; break; } // 旋转中心选择 Leaf 的中心坐标 matrix.postRotate(rotate,transX + mLeafLen / 2,transY + mLeafLen / 2); canvas.drawBitmap(mLeafBitmap,matrix,mBitmapPaint); canvas.restore(); } }3.4 Loading == 100% 出现动画增加一个判断字段 isLoadingCompleted ，在 onDraw() 中选择对应绘制策略。isLoadingCompleted 在 setProgress() 中根据 progress 设置： /** * 设置进度（自动刷新） * @param progress 0-100 */ public void setProgress(int progress){ if (progress < 0){ mProgress = 0; }else if (progress > 100){ mProgress = 100; }else { mProgress = progress; } if (progress == 100){ isLoadingCompleted = true; }else { isLoadingCompleted = false; } // 255 不透明 mCompletedFanPaint.setAlpha(255); postInvalidate(); }LeavesLoading.onDraw() 部分实现： @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); …… if (isLoadingCompleted){ //绘制加载完成特效 drawCompleted(canvas); }else { //绘制扇叶 drawFan(canvas,mFanLen,mBitmapPaint); } //刷新 postInvalidate(); }drawCompleted() 实现： private void drawCompleted(Canvas canvas) { // 每次绘制风扇透明度递减10 int alpha = mCompletedFanPaint.getAlpha() - 10; if (alpha <= 0){ alpha = 0; } mCompletedFanPaint.setAlpha(alpha); // 文字透明度刚好与风扇相反 mCompletedTextPaint.setAlpha(255-alpha); // 计算透明因子 float fraction = alpha / 255f; // 叶片大小 和 文字大小 也是相反变化的 float fanLen = fraction * mFanLen; float textSize = (1 - fraction) * mCompletedTextSize; mCompletedTextPaint.setTextSize(textSize); //测量文字占用空间 Rect bounds = new Rect(); mCompletedTextPaint.getTextBounds( LOADING_COMPLETED, 0, LOADING_COMPLETED.length(), bounds); // 与 drawLeaf() 相似，不再赘述 drawFan(canvas, (int) fanLen, mCompletedFanPaint); //画文字 canvas.drawText( LOADING_COMPLETED, 0, LOADING_COMPLETED.length(), mFanCx-bounds.width()/2f, mFanCy+bounds.height()/2f, mCompletedTextPaint); }流程：计算风扇和文字透明度 -> 计算风扇和文字大小以及文字占用空间 -> 绘制 ，风扇逐渐变透明和变小，文字逐渐变清晰和变大，注释写得比较清楚就不赘述了。4. 结束文章中如有出现任何错误，欢迎大家到评论区留言指正。如果觉得 LeavesLoading 对您有任何帮助，希望可以在 GitHub 得到您的 Star ！Thanks：GAStudio 的这篇文章提供的核心代码参考 ...