最近需要实现一个凹凸效果的拟物化优惠券效果,我一看,本来想用.9图片做背景实现的,虽说图片做背景实现省事儿方便,但是能用代码实现最好不过了,最终我还是选择了用代码来实现,于是有了下文。
###1.完整代码 先看完整的代码,后面我们再对代码逐一的解释
public class CouponDisplayView extends RelativeLayout {
private Paint mPaint;
private Paint mPaint2;
// 圆间距
private float gap = 0;
// 半径
private float radius = 20;
// 圆数量
private int circleNum;
private float remain;
private int color;
public CouponDisplayView(Context context) {
super(context);
}
public CouponDisplayView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setDither(true);
mPaint.setColor(color);
mPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (remain == 0) {
remain = (int) (w - gap) % (2 * radius + gap);
}
circleNum = (int) ((w - gap) / (2 * radius + gap));
}
public CouponDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < circleNum; i++) {
float x = gap + radius + remain / 2 + ((gap + radius * 2) * i);
canvas.drawCircle(x, 0, radius, mPaint);
}
mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint2.setDither(true);
mPaint2.setColor(getResources().getColor(R.color.divider_color_car));
mPaint2.setStyle(Paint.Style.FILL);
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.DKGRAY);
Path path = new Path();
path.moveTo(0, getHeight() / 2 + 60);
path.lineTo(getWidth(), getHeight() / 2 + 60);
PathEffect effects = new DashPathEffect(new float[]{15, 15, 15, 15}, 2);
paint.setPathEffect(effects);
canvas.drawPath(path, paint);
canvas.drawCircle(0, getHeight() / 2 + 60, radius, mPaint2);
canvas.drawCircle(getWidth(), getHeight() / 2 + 60, radius, mPaint2);
}
public void setColor(int color) {
this.color = color;
}
}
复制代码
###2.方法解释 1、CouponDisplayView继承自RelativeLayout,通过打印日志测试已知View的执行顺序如下:
CouponDisplayView(context,attrs,defStyleAttr)
CouponDisplayView(context,attrs)
onSizeChanged()
onDraw()
复制代码
onSizeChanged(int w, int h, int oldw, int oldh)
当view的大小发生变化时触发 onDraw(Canvas canvas)
负责将View绘制在屏幕上 public CouponDisplayView(Context context)
Java代码直接new一个CouponDisplayView实例的时候,会调用这个只有一个参数的构造函数 public CouponDisplayView(Context context, AttributeSet attrs)
在默认的XML布局文件中创建的时候调用这个有两个参数的构造函数。AttributeSet类型的参数负责把XML布局文件中所自定义的属性通过AttributeSet带入到View内; public CouponDisplayView(Context context,AttributeSet attrs, int defStyleAttr)
构造函数中第三个参数是默认的Style,这里的默认的Style是指它在当前Application或者Activity所用的Theme中的默认Style,且只有在明确调用的时候才会调用
###3.代码实现思路 从上面的效果图来看,这个自定义View和普通的Linearlayout,RelativeLayout一样,只是上下两边多了类似于半圆锯齿的形状,我们需要在上下两条线上画一个个白色的小圆来实现这种效果。 假如我们上下线的半圆以及半圆与半圆之间的间距是固定的,那么不同尺寸的屏幕肯定会画出不同数量的半圆,那么我们只需要根据控件的宽度来获取能画的半圆数。 我们观察效果图会发现,圆的数量总是圆间距数量-1,
也就是说,假设圆的数量是circleNum,那么圆间距就是circleNum+1,所以我们可以根据这个计算出circleNum: 这里gap就是圆间距,radius是圆半径,w是view的宽
circleNum = (int) ((w-gap)/(2*radius+gap));
复制代码
1 、重写onSizeChanged()方法,根据上面的圆的半径和圆间距来计算需要画的圆数量circleNum
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (remain == 0) {
remain = (int) (w - gap) % (2 * radius + gap);
}
circleNum = (int) ((w - gap) / (2 * radius + gap));
}
复制代码
2.接下来只需要重写onDraw()方法,简单的根据circleNum的数量将一个一个的圆绘制在屏幕上
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < circleNum; i++) {
float x = gap + radius + remain / 2 + ((gap + radius * 2) * i);
canvas.drawCircle(x, 0, radius, mPaint);
}
}
复制代码
3.画中间的黑色虚线
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.DKGRAY);
Path path = new Path();
path.moveTo(0, getHeight() / 2 + 60);
path.lineTo(getWidth(), getHeight() / 2 + 60);
PathEffect effects = new DashPathEffect(new float[]{15, 15, 15, 15}, 2);
paint.setPathEffect(effects);
canvas.drawPath(path, paint);
复制代码
4.画两边居中的半圆
mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint2.setDither(true);
mPaint2.setColor(getResources().getColor(R.color.divider_color_car));
mPaint2.setStyle(Paint.Style.FILL);
canvas.drawCircle(0, getHeight() / 2 + 60, radius, mPaint2);
canvas.drawCircle(getWidth(), getHeight() / 2 + 60, radius, mPaint2);
复制代码
代码分析完毕
###3.设置自定义样式属性
考虑到复用地方不是很多,所以上面的代码没有写自定义样式属性,而是用了
public void setColor(int color) {this.color = color;}
有需要设置自定义属性的我在这里写一下哈,嘻嘻
1、在res/values/ 下建立一个attr.xml , 在里面定义我们的需要用到的属性以及声明相对应属性的取值类型
<?xml version="1.0" encoding="utf-8"?>
<resources>
//半圆颜色
<attr name="radiusColor" format="color" />
<declare-styleable name="CouponDisplayView">
<attr name="radiusColor" />
</declare-styleable>
</resources>
复制代码
上面定义的半圆颜色的属性,format属性的取值类型总共有10种,包括:string
,color
,demension
,integer
,enum
,reference
,float
,boolean
,fraction
,flag
。
2、然后在XML布局中声明我们的自定义View
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<--注意:一定要引入xmlns:custom="http://schemas.android.com/apk/res-auto"
custom名字可以自定义-->
<com.xxx.xxx.CouponDisplayView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FBB039"
android:orientation="horizontal"
android:padding="16dp"
custom:radiusColor="@Color/red">
............
</com.xxx.xxx.CouponDisplayView>
</LinearLayout>
复制代码
3、在View的构造方法中,获得我们的xml布局文件中定义的颜色
public CouponDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Log.d("mDebug", "CouponDisplayView context,attrs,defStyleAttr");
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CouponDisplayView, defStyleAttr, 0);
for (int i = 0; i < a.getIndexCount(); i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CouponDisplayView_radiusColor:
radius = a.getDimensionPixelSize(R.styleable.CouponDisplayView_radiusColor, 10);
break;
}
}
a.recycle();
}
复制代码
OK,设置自定义样式属性到此就写完了。