可能看到这个标题有点懵逼,本屌的表达能力有限,最近工作比较清闲,朋友公司正在做到这个效果,所以就帮基友写了一个小Demo.

github移步:

https://github.com/itfengan/DynamicRectangleView

朋友公司需要达到的效果

Demo中的效果

使用过程

layout

<com.fengan.dynamicrectangledemo.DynamicRectangleView
android:id="@+id/drv"
android:layout_width="match_parent"
android:layout_height="250dp"
app:fengan_limit_percent="0.2"
app:fengan_percent="0.5"
></com.fengan.dynamicrectangledemo.DynamicRectangleView>

code

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SeekBar seekBar = (SeekBar) findViewById(R.id.sb);
    final DynamicRectangleView dynamicRectangleView = (DynamicRectangleView) findViewById(R.id.drv);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
            dynamicRectangleView.setPercent((float)i/100);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });
    findViewById(R.id.btn_scrollview).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            startActivity(new Intent(MainActivity.this,ScrollViewActivity.class));
        }
    });
}

attrs.xml

(有灵性的哥哥们应该猜得到分别对应的什么意思咯)

<resources>
<declare-styleable name="DynamicRectangleView">
    <attr name="fengan_percent" format="float"/>
    <attr name="fengan_limit_percent" format="float"/>
    <attr name="fengan_start_color" format="color"/>
    <attr name="fengan_end_color" format="color"/>
</declare-styleable>
</resources>

1. fengan_percent:右侧短边占左侧的百分比
2. fengan_limit_percent:当滑动到最小的百分比
3. fengan_start_color:渐变色的初始颜色(ps:朋友公司效果图是渐变色,当然也可以不需要)
4. fengan_end_color:渐变色的终止颜色

DynamicRectangleView.java

package com.fengan.dynamicrectangledemo;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by fengan on 2017/10/11/011.
 */
 public class DynamicRectangleView extends View {
 // Default  values
private final static int DEFAULT_START_COLOR = Color.parseColor("#88D94600");
private final static int DEFAULT_END_COLOR = Color.parseColor("#D94600");
private final static float DEFAULT_PERCENT = (float) 0.5;//右边高度占左边高度的百分比
private final static float DEFAULT_LIMIT_PERCENT = (float) 0.2;//最小高度占左边高度的百分比

private Paint mPaint;
private float OriginalRightHeight;
private float OriginalLeftHeight;
private float currentRightHeight;
private float currentLeftHeight;
private float minHeight;
private float maxHeight;
private int mStartColor;
private int mEndColor;
private float mPercent;
private float mLimitPercent;
private Path mPath;
public DynamicRectangleView(Context context) {
    this(context, null);
}

public DynamicRectangleView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}
public DynamicRectangleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // Retrieve attributes from xml
    final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DynamicRectangleView);
    try {
        mPercent = typedArray.getFloat(R.styleable.DynamicRectangleView_fengan_percent, DEFAULT_PERCENT);
        mLimitPercent = typedArray.getFloat(R.styleable.DynamicRectangleView_fengan_percent, DEFAULT_LIMIT_PERCENT);
        mStartColor = typedArray.getColor(R.styleable.DynamicRectangleView_fengan_start_color, DEFAULT_START_COLOR);
        mEndColor = typedArray.getColor(R.styleable.DynamicRectangleView_fengan_end_color, DEFAULT_END_COLOR);
    } finally {
        typedArray.recycle();
    }
    initView(context);
}

private void initView(Context context) {
    mPaint = new Paint();
    mPath = new Path();
    mPaint.setAntiAlias(true);
//        mPaint.setColor(Color.RED);//纯色
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    OriginalLeftHeight = getMeasuredHeight();
    OriginalRightHeight = getMeasuredHeight()*mPercent;
    minHeight = getMeasuredHeight() *mLimitPercent;
    maxHeight = OriginalRightHeight;
    //设置当前高度
    currentRightHeight = OriginalRightHeight;
    currentLeftHeight = OriginalLeftHeight;
    // LinearGradient 第一个参数第二个参数为 起始位置x,y  三四参数为终点位置x,y。
    // 如果x不变则为y轴渐变， y不变则为x轴渐变
    // 第五个参数为颜色渐变，此处为红色渐变为绿色
    // 第七个参数为渐变次数，可repeat
    Shader mShader = new LinearGradient(0, 0, maxHeight, maxHeight,
            new int[]{mStartColor, mEndColor},
            null, Shader.TileMode.CLAMP);
    // Shader.TileMode三种模式
    // REPEAT:沿着渐变方向循环重复
    // CLAMP:如果在预先定义的范围外画的话，就重复边界的颜色
    // MIRROR:与REPEAT一样都是循环重复，但这个会对称重复
    mPaint.setShader(mShader);// 用Shader中定义定义的颜色来话
}
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPath.reset();
    mPath.moveTo(0, 0);
    mPath.lineTo(getMeasuredWidth(), 0);
    mPath.lineTo(getMeasuredWidth(), currentRightHeight);
    mPath.lineTo(0, currentLeftHeight);
    mPath.close();
    canvas.drawPath(mPath, mPaint);
}

public void setPercent(float percent) {
    Log.e("fengan", "percent=" + percent);
    currentRightHeight = OriginalRightHeight * (1 - percent);
    currentLeftHeight = OriginalLeftHeight * (1 - percent);
    if (currentLeftHeight < minHeight) {
        currentLeftHeight = minHeight;
    }
    if (currentRightHeight < minHeight) {
        currentRightHeight = minHeight;
    }
    postInvalidate();
}
}