通過自定義View與ViewGroup實現小米商城購物車效果

用到的知識點

自定義View

自定義ViewGroup

貝塞爾曲線

原理

• 通過貝塞爾曲線實現商品拋入購物車的路徑
• 自定義ViewGroup實現添加多個商品進購物車的動畫
• 自定義View繪制心以及購物車圖案

代碼

一.繪制底部背景View

1.通過Path繪制第一部分，繪制心以及文字
通過貝賽爾曲線繪制心形

/*** 繪制喜歡** @param canvas* @param x* @param y*/private void drawLove(Canvas canvas, float x, float y) {canvas.save();canvas.translate(x, y);Path leftPath = new Path();leftPath.moveTo(0, -40);Path rightPath = new Path();rightPath.moveTo(0, -40);leftPath.cubicTo(0, -40, -30, -80, -35, -40);leftPath.cubicTo(-35, -40, -30, -30, 0, 10);rightPath.cubicTo(0, -40, 30, -80, 35, -40);rightPath.cubicTo(35, -40, 30, -30, 0, 10);if (isLove) {mLovePaint.setStyle(Paint.Style.FILL);mLovePaint.setColor(Color.RED);} else {mLovePaint.setStyle(Paint.Style.STROKE);mLovePaint.setColor(Color.BLACK);}mLovePaint.setStrokeWidth(3);canvas.drawPath(leftPath, mLovePaint);canvas.drawPath(rightPath, mLovePaint);canvas.restore();float measureText = mTextPaint.measureText("喜歡", 0, "喜歡".length());canvas.drawText("喜歡", x - measureText / 2, y + 50, mTextPaint);}

2.繪制購物車區域 繪制購物車圖形以及文購物車文字
通過Path的拼接繪制購物車圖形

/*** 繪制購物車** @param canvas* @param x* @param y*/private void drawShoppingCart(Canvas canvas, float x, float y) {canvas.save();canvas.translate(x, y);Path mPath = new Path();mPath.moveTo(-40, -60);mPath.lineTo(-30, -60);mPath.lineTo(-20, 0);mPath.lineTo(20, 0);mPath.lineTo(30, -40);mPath.lineTo(-10, -40);Path mPath2 = new Path();mPath2.moveTo(-10, -25);mPath2.lineTo(10, -25);mShoppingCartPaint.setStyle(Paint.Style.STROKE);mShoppingCartPaint.setStrokeWidth(5);mShoppingCartPaint.setColor(Color.BLACK);canvas.drawPath(mPath, mShoppingCartPaint);canvas.drawPath(mPath2, mShoppingCartPaint);mShoppingCartPaint.setStyle(Paint.Style.FILL);canvas.drawCircle(-15, 10, 5, mShoppingCartPaint);canvas.drawCircle(15, 10, 5, mShoppingCartPaint);mShoppingCartPaint.setColor(Color.RED);canvas.drawCircle(30, -40, 20, mShoppingCartPaint);String strNum = mProductTotal + "";mTextPaint.setTextSize(20);mTextPaint.setColor(Color.WHITE);float strNumLength = mTextPaint.measureText(strNum, 0, strNum.length());Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();canvas.drawText(strNum, 30 - strNumLength / 2, -40 - (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.top, mTextPaint);canvas.restore();String str = "購物車";mTextPaint.setTextSize(30);mTextPaint.setColor(Color.BLACK);float measureText = mTextPaint.measureText(str, 0, str.length());canvas.drawText(str, x - measureText / 2, y + 50, mTextPaint);}

3.繪制加入購物車文字
通過FontMetrics實現文字在矩形中心居中對齊

/*** 繪制加入購物車購物車** @param canvas* @param x* @param y*/private void drawShoppingText(Canvas canvas, float x, float y) {String str = "加入購物車";TextPaint textPaint = new TextPaint();textPaint.setTextSize(50);float measureText = textPaint.measureText(str, 0, str.length());Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();float v = fontMetrics.bottom - fontMetrics.top;canvas.drawText(str, x - measureText / 2, y - v / 2 - fontMetrics.top, textPaint);}

二.繪制動畫View

1.繪制商品圖片在拋物線路徑上，拋物線路徑由貝塞爾曲線組成，通過不斷的改變數值實現商品圖片拋物線移動

/*** 繪制商品圖片在拋物線路徑上* @param canvas*/private void drawProductOnPath(Canvas canvas) {PointF mCurveStart = new PointF();//曲線開始的點PointF mCurveMiddle = new PointF();//曲線中間點PointF mCurveEnd = new PointF();//曲線結束的點mCurveStart.set(measuredWidth * 0.7f, measuredHeight - 85);mCurveMiddle.set(measuredWidth * 0.4f, 0);mCurveEnd.set(measuredWidth * 0.3f, measuredHeight - 85);Path mCurvePath = new Path();//移動曲線mCurvePath.moveTo(mCurveStart.x, mCurveStart.y);mCurvePath.cubicTo(mCurveStart.x, mCurveStart.y, mCurveMiddle.x, mCurveMiddle.y, mCurveEnd.x, mCurveEnd.y);PathMeasure pathMeasure = new PathMeasure();pathMeasure.setPath(mCurvePath, false);float[] pos = new float[2];pathMeasure.getPosTan(pathMeasure.getLength() * percent, pos, null);Matrix matrix = new Matrix();matrix.postTranslate(pos[0] - newBitmap.getWidth() / 2, pos[1] - newBitmap.getHeight() / 2);canvas.drawBitmap(newBitmap, matrix, mBitmapPaint);}

2.ValueAnimator 數值改變的同時從繪View，實現商品圖片的拋入購物車的動畫效果，當View添加的時候start此ValueAnimator

/*** 改變數值實現動畫*/private void initAnimator() {valueAnimator = ValueAnimator.ofInt(ints);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {int animatedValue = (int) animation.getAnimatedValue();percent = animatedValue / 100f;if (percent < 0.8) {int height = (int) (bitmapWidth * (1 - percent));int width = (int) (bitmapHeight * (1 - percent));if (width > 0 && height > 0) {newBitmap = scaleBitmap(bitmap, 1 - percent);}}invalidate();}});valueAnimator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);mBitmapPaint.setAlpha(0);}@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationStart(animation);mBitmapPaint.setAlpha(255);}});valueAnimator.setDuration(500);valueAnimator.setInterpolator(new AccelerateInterpolator());}

自定義ViewGroup實現購物車效果

1.ViewGroup初始化的時候將底部背景View添加進ViewGroup并且Layout的在底部
2.當點擊加入購物車時候，將動畫View添加進此ViewGroup，并且啟動動畫繪制界面實現商品拋進購物車效果。

@Overridepublic void add(int mProductTotal) {if (shoppingCartListener != null) {shoppingCartListener.add(mProductTotal);}ShoppingAnimChildView shoppingAnimView = new ShoppingAnimChildView(getContext());if (mProductBitmap != null) {shoppingAnimView.setProductBitmap(mProductBitmap);}LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);addView(shoppingAnimView, layoutParams);requestLayout();shoppingAnimView.startAnim();}

詳細代碼見Github傳送門
歡迎大家star,fork
有很多不足，望見諒

可以直接下載代碼使用

使用方法如下

使用方法1.布局文件添加以下屬性<com.yhongm.shoppingcart.ShoppingCartViewandroid:id="@+id/vg"android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="300dp" />2.java方法：scvg.setProductBitmap(產品圖片bitmap); 設置產品圖片scvg.setShoppingCartListener(this); 設置點擊監聽

總結

以上是生活随笔為你收集整理的安卓自定义view仿小米商城购物车动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。