写个小票设置页面

2019-11-07  本文已影响0人  DrChenZeng

感谢分享： 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，一个温润的男子，版权所有，未经允许不得抄袭。

上一篇下一篇

猜你喜欢

热点阅读