打印這塊有需求，可以聯(lián)系我，我后面再加上，主要是我太懶了,haha
需求并不難，但是實現(xiàn)起來卻相當花時間：（點我白拿）

• 第一點，鋸齒帶陰影

image

• 第二點，票據(jù)的寬度切換

image

• 第三點，兩個布局，都可以滑動，可以動態(tài)同步。

image

image

白拿點我

難點攻克

鋸齒帶陰影

想法：

//使用android 自定義View 繪制陰影的api
paint2.setShadowLayer(effect, offset_x, offset_y, Color.parseColor("#33000000"));
//注意關閉硬件加速
  setLayerType(LAYER_TYPE_SOFTWARE, null);

用一個路徑圈出一個上下帶鋸齒、左右是直線的path,畫筆上設置陰影，并drawPath（）就可以實現(xiàn)鋸齒帶陰影。

實踐：
鋸齒方面有想過用貝賽爾、弦函數(shù)來繪制這些鋸齒，當時覺得這些曲線好像不太圓，最后選擇了圓函數(shù)，通過循環(huán)繪制半圓得到鋸齒：來了圓函數(shù)

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;
/*繪制區(qū)域,不包括鋸齒*/
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;
    //當前函數(shù)段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();
}

布局滑動并可以動態(tài)變化

布局分為展示的滑動區(qū)域 和設置的滑動區(qū)域
區(qū)域分： 頭部、上、中、下、尾部
每部分的數(shù)據(jù)長度不定所以采用recyclerView 公用一個數(shù)據(jù)源來控，每部數(shù)據(jù)改變，對面區(qū)域的同部位的布局刷新。
區(qū)域可滑動，所以每區(qū)域使用區(qū)域ReyclerView嵌套部位Reyclerview封裝度和刷新方面要自由一些。考慮到高效采用局部刷新。
項目： https://github.com/drchengit/docket_setting

結尾

感謝分享： http://www.itdecent.cn/p/87f738905e7f
感謝開源: https://blog.csdn.net/iamdingruihaha/article/details/54772834
項目地址： https://github.com/drchengit/docket_setting

我是drchen，一個溫潤的男子，版權所有，未經允許不得抄襲。