三角函数公式: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); }
-