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

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

前言

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

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

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