自定义View、画波浪线

三角函数公式：y = A sin(ωx + φ) + k

A代表振幅,就是最大值减去最小值的一半.
ω代表(角速度)收缩或伸长,这个只要记住：周期T=2*pi/w就可以了
φ代表在X上的平移,左移为正,右移为负.这个要注意两种不同平移的区别.
K就是（0,0）往Y方向的移动.上正下负.

 

android View/ViewGroup的生命周期 -- 自定义view：https://www.cnblogs.com/ni-qiu/p/4150754.html?tdsourcetag=s_pctim_aiomsg

从构造方法开始，依次执行：

    onAttachToWindow -- onMeasure -- onSizeChanged -- onLayout -- onMeasure -- onLayout -- onDraw -- onDetachedFromWindow.

 

4.1 用三角函数画波浪线

• 效果：

       

   

• 用到的函数公式 y = A * (ωx + φ) + k;

• 用到的类
  •  Canvas，Paint，
  • canvas.setDrawFile(PaintFlagsDrawFilter(FILTER_BITMAP_FLAG、ANTI_ALIAS_FLAG));
• 自定义View代码

  • public MyWaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    
    // 波形浮动的监听
    public interface OnWaveChangeListener {
        void onChanged(float y);
    }
    
    private OnWaveChangeListener listener;
    
    public void setOnWaveChangeListener(OnWaveChangeListener listener) {
        this.listener = listener;
    }
    
    private void init() {
        paint1 = new Paint();
        paint1.setColor(Color.WHITE);
        paint1.setStyle(Paint.Style.FILL);
        paint1.setAntiAlias(true);
        paint1.setStrokeWidth(5);
    
        paint2 = new Paint();
        paint2.setColor(Color.WHITE);
        paint2.setStyle(Paint.Style.FILL);
        paint2.setStrokeWidth(5);
        paint1.setAntiAlias(true);       // 第二条线
        paint2.setAlpha(60);
    
        path1 = new Path();
        path2 = new Path();
    
        // 设置画笔的flag画图过滤器  (过滤图片、反别名)
        drawFilter = new PaintFlagsDrawFilter(0, Paint.FILTER_BITMAP_FLAG
                | Paint.ANTI_ALIAS_FLAG);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    
        canvas.setDrawFilter(drawFilter);
    
        // ω:角速度，收缩或伸长，固定 2 * PI / width;
        double ω = 2 * Math.PI / getMeasuredWidth();
    
        // φ:代表x上的平移,左+右-;
        φ -= 0.1f;
    
        // A:振幅,也就是(最高点 - 最低点) / 2;  这里可以用View的高 / 2
        int A = getMeasuredHeight() / 2;   设置公式里面的三个变量，固定值，记住即可
    
        // 在开始画的时候重置path路径      ，重点！！！必须重置
        path1.reset();
        path2.reset();
    
        // 起始点在左下角，      并且起始地方必须要设置为左下角 left、bottom
        path1.moveTo(getLeft(), getBottom());
        path2.moveTo(getLeft(), getBottom());
    
        // 从最左侧开始, 画到最右侧, 每20px画一条线,
        // 这里注意是 <= getMeasuredWidth(), 改成<=
        for (int x = 0; x <= getMeasuredWidth(); x += 20) {
            // float y = A sin (ωx + φ) + k;
            float y1 = A * (float) Math.sin(ω * x + φ) + A;
            float y2 = -A * (float) Math.sin(ω * x + φ) + A;
    
            if (x > getMeasuredWidth() / 2 - 10 && x < getMeasuredWidth() / 2 + 10) {
                listener.onChanged(y2);      // 设置波动监听
            }
    
            path1.lineTo(x, y1);
            path2.lineTo(x, y2);
        }
    
        // 终止点在右下角，   结束后终点在右下角getWidth、Bottom
        path1.lineTo(getWidth(), getBottom());
        path2.lineTo(getWidth(), getBottom());
    
        canvas.drawPath(path1, paint1);
        canvas.drawPath(path2, paint2);
    
        postInvalidateDelayed(50);    // 延迟50秒重绘View
    
    }

     

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200px"
        android:background="#e14b4b">

        <com.bwie.juan_mao.waveview.view.MyWaveView
            android:id="@+id/mwv"
            android:layout_width="match_parent"
            android:layout_height="40px"
            android:layout_alignParentBottom="true" />

        <ImageView
            android:id="@+id/img_cursor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/ic_launcher" />

    </RelativeLayout>


</LinearLayout>

mwv.setOnWaveChangeListener(new MyWaveView.OnWaveChangeListener() {
    @Override
    public void onChanged(float y) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)
                imgCursor.getLayoutParams();
        params.setMargins(0, 0, 0, (int) y);
        imgCursor.setLayoutParams(params);
    }
});

 

4.2 流式布局的写法

• 继承ViewGroup
• 需要用到的方法measureChildren(0,0)
• 流式布局的代码：

  • public class FlowLayout extends ViewGroup {
        public FlowLayout(Context context) {
            this(context, null);
        }
    
        public FlowLayout(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
            // 测量所有子View的宽高
            measureChildren(0, 0);
    
            // 当前行前面所有的控件总的宽度
            int totalWidth = 0;
            // 当前所有行的高度
            int totalHeight = 0;
    
            for (int j = 0; j < getChildCount(); j++) {
                View view = getChildAt(j);
    
                // 如果当前View还没有换行的时候
                if (totalWidth + view.getMeasuredWidth() >= getMeasuredWidth()) {
                    // 换行
                    // 换行的时候，前面总的宽度变为0，宽度加上一行的宽度
                    totalWidth = 0;    // 如果放下一个View的时候超出了屏幕，则换行，重置总宽高
                    totalHeight += view.getMeasuredHeight();
                }
    
                view.layout(
                        totalWidth,
                        totalHeight,
                        totalWidth + view.getMeasuredWidth(),
                        totalHeight + view.getMeasuredHeight());
                // 结束的时候加一下总width
                totalWidth += view.getMeasuredWidth();
            }
        }
    }

    for (int i = 0; i < 20; i++) {
        TextView txt = new TextView(this);
        txt.setText("第" + i + "条数据");
        txt.setBackgroundResource(R.drawable.bg);
        ViewGroup.MarginLayoutParams params = new ViewGroup.MarginLayoutParams(
               ViewGroup.LayoutParams.WRAP_CONTENT, 
               ViewGroup.LayoutParams.WRAP_CONTENT);
        params.setMargins(20, 20, 20, 20);
        txt.setLayoutParams(params);
        txt.setPadding(10, 10, 10, 10);
        fl.addView(txt);
    }