标签：
/**上面这个计算方式画个图就出来了，假设有n个半圆，那就会有n+1个圆间距，因此控件宽度mWidth = n * 2 * radius + (n-1) * gapSize，由此可以求出半圆的个数，由于边的宽度或高度在这个半径radius和圆间距gapsize下不一定能够完整平分，为了让两边留出的距离相等，我们计算了一个初始偏移值。
* 计算垂直方向需要画圆或三角形的数量和初始偏移量
* @param gapSize 每个圆形或三角形之间的间距
*/
private void calculateVerticalCount(float gapSize){
mVerticalCount = (int) ((mHeight - gapSize) / (2 * mRadius + gapSize));
mVerticalInitSize = (int) ((mHeight - (2 * mRadius * mVerticalCount + (mVerticalCount + 1) * gapSize)) / 2);
}
/**
* 计算水平方向上圆或三角形的数量和初始偏移量
* @param gapSize 每个圆形或三角形之间的间距
*/
private void calculateHorizontalCount(float gapSize) {
mHorizontalCount = (int) ((mWidth - gapSize) / (2 * mRadius + gapSize));
mHorizontalInitSize = (int) ((mWidth - (2 * mRadius * mHorizontalCount + (mHorizontalCount + 1) * gapSize)) / 2);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if(vertical_style == 1){//如果垂直方向是半圆形
drawVerticalCircle(canvas);
}else if(vertical_style == 2){//垂直方向是三角形
drawVerticalTriangle(canvas);
}
if(horizontal_style == 1){//如果水平方向是半圆形
drawHorizontalCircle(canvas);
}else if(horizontal_style == 2){//如果水平方向是三角形
drawHorizontalTriangle(canvas);
}
}
/**
* 在水平方向上绘制三角形
* @param canvas
*/
private void drawHorizontalTriangle(Canvas canvas) {
//先计算出水平方向上的数量
calculateHorizontalCount(0);
Path path = new Path();
float x = 0;
//绘制上面部分
for(int i = 0; i < mHorizontalCount; i++){
path.reset();
x = mHorizontalInitSize + i * 2 * mRadius;
path.moveTo(x, 0);
x += mRadius;
path.lineTo(x, mRadius);
x += mRadius;
path.lineTo(x, 0);
path.close();
canvas.drawPath(path, mPaint);
}
//绘制下面部分
x = 0;
for(int i = 0; i < mHorizontalCount; i++){
path.reset();
x = mHorizontalInitSize + i * 2 * mRadius;
path.moveTo(x, mHeight);
x += mRadius;
path.lineTo(x, mHeight - mRadius);
x += mRadius;
path.lineTo(x, mHeight);
path.close();
canvas.drawPath(path, mPaint);
}
}
/**
* 在水平方向上绘制圆形
* @param canvas
*/
private void drawHorizontalCircle(Canvas canvas) {
//先计算出水平方向上的数量
calculateHorizontalCount(mGapSize);
float x = mHorizontalInitSize + mGapSize + mRadius;
//先绘制上面部分
for(int i = 0; i < mHorizontalCount; i++){
canvas.drawCircle(x, 0, mRadius, mPaint);
x += 2 * mRadius + mGapSize;
}
//再绘制下面部分
x = mHorizontalInitSize + mGapSize + mRadius;
for(int i = 0; i < mHorizontalCount; i++){
canvas.drawCircle(x, mHeight, mRadius, mPaint);
x += 2 * mRadius + mGapSize;
}
}
/**
* 在垂直方向绘制三角形
* @param canvas
*/
private void drawVerticalTriangle(Canvas canvas) {
//计算一下三角形的数量和初始距离
calculateVerticalCount(0);
Path path = new Path();
float y = 0;
//先画左边
for(int i = 0; i < mVerticalCount; i++){
path.reset();
y = mVerticalInitSize + i * 2 * mRadius;
path.moveTo(0, y);
y += mRadius;
path.lineTo(mRadius, y);
y += mRadius;
path.lineTo(0, y);
path.close();
canvas.drawPath(path, mPaint);
}
//再画右边
y = 0;
for(int i = 0; i < mVerticalCount; i++){
path.reset();
y = mVerticalInitSize + i * 2 * mRadius;
path.moveTo(mWidth, y);
y += mRadius;
path.lineTo(mWidth - mRadius, y);
y += mRadius;
path.lineTo(mWidth, y);
path.close();
canvas.drawPath(path, mPaint);
}
}
/**
* 在垂直方向绘制半圆形
* @param canvas
*/
private void drawVerticalCircle(Canvas canvas) {
//计算一下圆形的数量和初始偏移距离
calculateVerticalCount(mGapSize);
//这次使用画弧来绘制出圆形
RectF rectF = new RectF();
//先画左边
for(int i = 0; i < mVerticalCount; i++){
rectF.left = -mRadius;
rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius;
rectF.right = mRadius;
rectF.bottom = rectF.top + 2 * mRadius;
canvas.drawArc(rectF, -90, 180, false, mPaint);
}
//再画右边
for(int i = 0; i < mVerticalCount; i++){
rectF.left = mWidth - mRadius;
rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius;
rectF.right = rectF.left + 2 * mRadius;
rectF.bottom = rectF.top + 2 * mRadius;
canvas.drawArc(rectF, 90, 180, false, mPaint);
}
}
<declare-styleable name="CouponStyle">那在xml布局中就可以自己自由指定了，如下：
<attr name="vertical_style">
<enum name="none" value="0"/>
<enum name="circle" value="1" />
<enum name="triangle" value="2"/>
</attr>
<attr name="horizontal_style">
<enum name="none" value="0"/>
<enum name="circle" value="1" />
<enum name="triangle" value="2"/>
</attr>
</declare-styleable>
<com.scu.lly.couponbgdemo.view.CouponBgView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal"
android:background="#47BDBD"
android:gravity="center_vertical"
coupon:horizontal_style="circle" <!-- 指定水平方向边缘的类型 -->
coupon:vertical_style="triangle">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="30dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="18sp"
android:text="顺旺基优惠券"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FC4A36"
android:layout_marginTop="15dp"
android:textSize="16sp"
android:text="全场五折优惠"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:text="券编号：2016070920160720"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:text="有效期：2016-07-09至2016-07-20"/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:src="@mipmap/iv_coupon"
android:layout_gravity="center"/>
</com.scu.lly.couponbgdemo.view.CouponBgView>
使用起来是不是很简单呢？
在翻看购物类APP时，看到了很多APP在添加购物车时有很多添加动画，那么下一篇就实现一下购物车添加动画玩玩。
标签：
原文地址：http://blog.csdn.net/shakespeare001/article/details/51873783
