随滑动改变的动态矩形背景

前言

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

朋友公司需要达到的效果

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

 @Overrideprotected 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();    }}

github移步:
https://github.com/itfengan/DynamicRectangleView