感谢分享： https://www.jianshu.com/p/87f738905e7f
感谢开源: https://blog.csdn.net/iamdingruihaha/article/details/54772834
项目地址： https://github.com/drchengit/docket_setting
需求
image
写一个可以动态设置展示小票内容的页面。
需求分析（注意只是小票展示和设置，不包括小票的打印）
打印这块有需求，可以联系我，我后面再加上，主要是我太懒了,haha
需求并不难，但是实现起来却相当花时间：（点我白拿）
- 第一点，锯齿带阴影
image
- 第二点，票据的宽度切换
image
- 第三点，两个布局，都可以滑动，可以动态同步。
image
image
难点攻克
锯齿带阴影
想法：
//使用android 自定义View 绘制阴影的api
paint2.setShadowLayer(effect, offset_x, offset_y, Color.parseColor("#33000000"));
//注意关闭硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);
用一个路径圈出一个上下带锯齿、左右是直线的path,画笔上设置阴影，并drawPath（）就可以实现锯齿带阴影。
实践：
锯齿方面有想过用贝赛尔、弦函数来绘制这些锯齿，当时觉得这些曲线好像不太圆，最后选择了圆函数，通过循环绘制半圆得到锯齿：来了圆函数
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import com.teamispower.smelep.myapplication.utils.ArmUtils;
/**
* @author DrChen
* @Date 2019/10/25 0025.
* qq:1414355045
*/
public class StampView extends View {
private Paint paint2;
private Path mPath;
private int effect, offset_x, offset_y;
/*绘制区域,不包括锯齿*/
private RectF rectF;
/*锯齿的半径*/
private float blade_radius;
public StampView(Context context) {
this(context, null);
}
public StampView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}
public StampView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
effect = ArmUtils.dip2px(context, 11);
offset_x = 0;
offset_y = ArmUtils.dip2px(context, 2);
blade_radius = ArmUtils.dip2px(context, 5);
mPath = new Path();
rectF = new RectF();
paint2 = new Paint();
paint2.setAntiAlias(true);
// 设定颜色
paint2.setColor(Color.WHITE);
// 设定阴影(柔边(Effect),Offset X 轴位移,Offset Y 轴位移, 阴影颜色)
paint2.setShadowLayer(effect, offset_x, offset_y, Color.parseColor("#33000000"));
//硬件加速要关，不然没有阴影
setLayerType(LAYER_TYPE_SOFTWARE, null);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
rectF.left = Math.abs(effect - offset_x);
rectF.top = Math.abs(effect - offset_y);
rectF.right = w - Math.abs(offset_x + effect);
rectF.bottom = h - Math.abs(offset_x + effect);
measurePath();
}
/**
* 确定绘制的背景（包括锯齿）path
*/
private void measurePath() {
mPath.reset();
/*top锯齿*/
//真实的背景包括锯齿
final float true_top = rectF.top - blade_radius;
mPath.moveTo(rectF.left, true_top);//起点
float current_x = rectF.left;
//当前函数段x,绘制锯齿只截取一段半圆一直向后绘制
float current_angle = 180;//上面的锯齿半圆是 180到0度往下凹的半圆
//上一个锯齿的x
float last_x = rectF.left;
//他们加起来就是path 的真实路径
while (current_x <= rectF.right) {//绘制到头了
current_x = last_x + blade_radius * (float) Math.cos(Math.toRadians(current_angle)) + blade_radius;
float endY = blade_radius * (float) Math.sin(Math.toRadians(current_angle));
mPath.lineTo(current_x, endY);
current_angle--;
if (current_angle <= 0) {
current_angle = 180;
last_x = current_x;
}
}
final float true_bottom = rectF.bottom + blade_radius;
/*right*/
mPath.lineTo(rectF.right, true_bottom);
/*bottom*/
current_x = rectF.right;
// 只截取一段半圆一直向前绘制
current_angle = 360;//下面的锯齿半圆是 360到180度往上凸的半圆
//上一个锯齿的x
last_x = rectF.right;
// Log.e("angle",current_angle+" :" +current_x);
while (current_x >= rectF.left) {//绘制到头了
current_x = last_x + blade_radius * (float) Math.cos(Math.toRadians(current_angle)) - blade_radius;
float endY = blade_radius * (float) Math.sin(Math.toRadians(current_angle));
mPath.lineTo(current_x, rectF.bottom + endY);
// Log.e("angle",current_angle+" :" +current_x);
current_angle--;
if (current_angle <= 180) {
current_angle = 360;
last_x = current_x;
}
}
/*left*/
mPath.lineTo(rectF.left, true_top);
mPath.close();
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(mPath, paint2);
}
}
宽度切换
直接设置控件宽度并刷。
宽度变化的同时，控件内容的padding 也是一起改变的，滑动控件中内容的布局要采用wight（比重）来布局，这一点需要讲究。
/*切换不同宽度模式*/
public void changeWithMode(boolean isFiveEt){
ViewGroup.LayoutParams params = this.getLayoutParams();
params.width = isFiveEt?ArmUtils.dip2px(this.getContext(),290)+effect*2:ArmUtils.dip2px(this.getContext(),400)+effect*2;
this.setLayoutParams(params);
if(isFiveEt){
setPadding(effect+ArmUtils.dip2px(this.getContext(),16), ArmUtils.dip2px(this.getContext(),23), effect+ArmUtils.dip2px(this.getContext(),16), ArmUtils.dip2px(this.getContext(),32));
}else{
setPadding(effect+ArmUtils.dip2px(this.getContext(),24), ArmUtils.dip2px(this.getContext(),23), effect+ArmUtils.dip2px(this.getContext(),24), ArmUtils.dip2px(this.getContext(),32));
}
invalidate();
}
布局滑动并可以动态变化
布局分为展示的滑动区域 和设置的滑动区域
区域分： 头部、上、中、下、尾部
每部分的数据长度不定所以采用recyclerView 公用一个数据源来控，每部数据改变，对面区域的同部位的布局刷新。
区域可滑动，所以每区域使用区域ReyclerView嵌套部位Reyclerview封装度和刷新方面要自由一些。考虑到高效采用局部刷新。
项目： https://github.com/drchengit/docket_setting
结尾
感谢分享： https://www.jianshu.com/p/87f738905e7f
感谢开源: https://blog.csdn.net/iamdingruihaha/article/details/54772834
项目地址： https://github.com/drchengit/docket_setting
我是drchen，一个温润的男子，版权所有，未经允许不得抄袭。
