android 水波进度条柱状图根据Recyclerview的滑

作者: 南娇 | 来源:发表于2018-09-04 09:39 被阅读115次

android 水波进度条柱状图根据Recyclerview的滑
RecyclerView处理鼠标滑轮滑动事件
RecyclerView 拖拽移动，长按小图标拖拽，侧滑删除
Android侧滑删除库SwipeRecyclerView的封装
Android RecyclerView 进度条
RecyclerView 应该在哪添加事件
android中RecyclerView的Item点击、长按事件
Android中Holder复用问题
Android 可以侧滑的recyclerview
【Android 基础】 RecyclerView

优于别人，并不高贵，真正得高贵是优于过去得自己---海明威

下面是我做的效果

录屏_20180903_180213.gif

图片格式转换的不太好不太清除，大家凑合看吧

用到的知识：
自定义view的相关知识
还是recyclerView的滑动监听

下面是自定义view，注释写的还行我就不解释了

 public class WaterView extends View {

private int mHeight;
private int mWidth;

//柱状图高度
private int mWaterHeight;
//柱状图宽度
private int mWaterWidth;
//水波颜色
private int mWaterColor=Color.RED;
//边框颜色
private int mWaterSideColor=Color.WHITE;
//边框宽度
private int mSideWidth;
//边框画笔
private Paint mSidePaint;
//填充画笔
private Paint mPaint;
//内部矩形画笔
private Paint mNBPaint;
//内部矩形路径
private Path mNBPath;

//百分比画笔
private Paint mTextPaint;


//边框路径
private Path mSidePath;
//填充路径
private Path mPath;

//水波振幅
private int mSwing=0;
//波长
private int mWaveWidth=120;
//波得数量
private int mWaveCount;
//水波偏移距离
private int mMoveX;
//判断动画是否已经开启
private boolean isStart=false;
//水波上升百分比
private float mPersent;

//缓存bigmap
private Bitmap mBitmap;
private Canvas mBitmapCanvas;

//水波滚动动画
private ValueAnimator  animation;










public WaterView(Context context) {
    this(context,null);
}

public WaterView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);
}

public WaterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.WaterView);
    mWaterHeight=array.getDimensionPixelOffset(R.styleable.WaterView_waterHeight,mWaterHeight);
    mWaterWidth=array.getDimensionPixelOffset(R.styleable.WaterView_waterWidth,mWaterWidth);
    mWaterColor=array.getColor(R.styleable.WaterView_waterColor,mWaterColor);
    mWaterSideColor=array.getColor(R.styleable.WaterView_waterSideColor,mWaterSideColor);
    mSideWidth=array.getDimensionPixelOffset(R.styleable.WaterView_waterSideWidth,mSideWidth);
    array.recycle();

    initPaint();

}

//初始化画笔
private void initPaint() {

    mSidePaint=new Paint();
    mSidePaint.setStyle(Paint.Style.STROKE);
    mSidePaint.setColor(mWaterSideColor);
    mSidePaint.setAntiAlias(true);
    mSidePaint.setStrokeWidth(mSideWidth);


    mPaint=new Paint();
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mWaterColor);
    mPaint.setAntiAlias(true);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

    mNBPaint=new Paint();
    mNBPaint.setStyle(Paint.Style.FILL);
    mNBPaint.setColor(Color.BLUE);
    mNBPaint.setAntiAlias(true);

    mTextPaint=new Paint();
    mTextPaint.setColor(Color.BLACK);
    mTextPaint.setAntiAlias(true);
    mTextPaint.setTextSize(20);

    mSidePath=new Path();
    mPath=new Path();
    mNBPath=new Path();
}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mWidth=MeasureSpec.getSize(widthMeasureSpec);
    mHeight=MeasureSpec.getSize(heightMeasureSpec);

    mWaveCount= (int) Math.ceil(mWidth/mWaveWidth);

    mBitmap=Bitmap.createBitmap(mWidth,mHeight,Bitmap.Config.ARGB_8888);
    mBitmapCanvas=new Canvas(mBitmap);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);


    //根据上升得高度设置振幅

    drawRect();

    drawWater(canvas);

    drawSide(canvas);

    drawText();

    canvas.drawBitmap(mBitmap,0,0,null);



}

//画文字
private void drawText() {
    String text=(int)(mPersent*100)+"%";
    int x= (int) (mWidth/2-mTextPaint.measureText(text)/2);
    int y=(mHeight-mWaterHeight)+mWaterHeight/2;

    mBitmapCanvas.drawText(text,x,y,mTextPaint);

}


/**
 * 画水波
 * @param canvas
 */
private void drawWater(Canvas canvas) {
    
    //这里一定要reset不然界面会有重叠
    mPath.reset();
    mPath.moveTo(-mWidth,mHeight);
    mPath.lineTo(-mWidth+mMoveX,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent));
    for(int i=0;i<mWaveCount*2;i++){
        mPath.quadTo(-mWidth+mWaveWidth/4+i*mWaveWidth+mMoveX,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent)+mSwing,-mWidth+mWaveWidth/2+i*mWaveWidth+mMoveX,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent));
        mPath.quadTo(-mWidth+mWaveWidth*3/4+i*mWaveWidth+mMoveX,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent)-mSwing,-mWidth+  mWaveWidth+i*mWaveWidth+mMoveX,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent));
    }
    mPath.lineTo(mWidth,(mHeight-mWaterHeight)+mWaterHeight*(1-mPersent));
    mPath.lineTo(mWidth,mHeight);
    mPath.close();

    mBitmapCanvas.drawPath(mPath,mPaint);
}
/**
 * 画边框
 * @param canvas
 */
private void drawSide(Canvas canvas) {

    //柱状图距离左边得距离
    int left=(mWidth-mWaterWidth)/2;
    //距离顶部得距离
    int top=mHeight-mWaterHeight;


    mSidePath.moveTo(left,mHeight);
    mSidePath.lineTo(left,top);
    mSidePath.lineTo(left+mWaterWidth,top);
    mSidePath.lineTo(left+mWaterWidth,mHeight);
    mSidePath.close();

    mBitmapCanvas.drawPath(mSidePath,mSidePaint);
}

//画内部矩形
private void drawRect() {
    //柱状图距离左边得距离
    int left=(mWidth-mWaterWidth)/2;
    //距离顶部得距离
    int top=mHeight-mWaterHeight;




    mNBPath.moveTo(left-mSideWidth,mHeight);
    mNBPath.lineTo(left-mSideWidth,top);
    mNBPath.lineTo(left+mWaterWidth+mSideWidth,top);
    mNBPath.lineTo(left+mWaterWidth+mSideWidth,mHeight);
    mNBPath.close();

    mBitmapCanvas.drawPath(mSidePath,mNBPaint);

}


/**
 * 水波平移动画
 */
private void startWaterAnimation() {

    if(!isStart){
        isStart=true;
        animation=ObjectAnimator.ofInt(0,mWidth);
        animation.setDuration(10000);
        animation.setRepeatCount(Animation.INFINITE);
        animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                    mMoveX= (int) animation.getAnimatedValue();
                    postInvalidate();
            }
        });
        animation.start();
    }
}


//设置上升百分比
public void setPersent(float persent){
    this.mPersent=persent;
    if(persent>0){
        mSwing= (int) (20*(1-mPersent));
    }else{
        mSwing=0;
    }

    invalidate();
}

//开始平移动画
public void startMove(){
    startWaterAnimation();
}

}

下面是mainActivity中的方法

 public class MainActivity extends AppCompatActivity {

private WaterView mWaterView;

private RecyclerView mRecyclerview;

private Adapter mAdapter;

private List<String> mDatas;

//第一屏显示的高度
private int mHeight;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWaterView = findViewById(R.id.waterview);
    mRecyclerview=findViewById(R.id.recyclerview);


    mDatas=new ArrayList<>();
    for(int i=0;i<50;i++){
        mDatas.add(i+"text");
    }


    mAdapter=new Adapter(this,mDatas);
    mRecyclerview.setLayoutManager(new LinearLayoutManager(this));
    mRecyclerview.setAdapter(mAdapter);

    mRecyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
       
        mWaterView.setPersent(getY()/getH());
        mWaterView.startMove();

        }
    });



}

//获取当前滚动的距离
public float getY(){
    LinearLayoutManager layoutManager = (LinearLayoutManager) mRecyclerview.getLayoutManager();
    //获取第一个显示的位置
    int position = layoutManager.findFirstVisibleItemPosition();
    //根据位置获取第一个位置的view
    View firstVisiableChildView = layoutManager.findViewByPosition(position);
    //获取第一个view的高度
    int itemHeight = firstVisiableChildView.getHeight();
    return (position) * itemHeight - firstVisiableChildView.getTop();
}


//获取滚动的总距离
public float getH(){
   //mRecyclerview.computeVerticalScrollRange() 这个方法是获取recyclerview的总高度
    //mRecyclerview.computeVerticalScrollExtent();这个方法是获取recyclerview的当前屏幕显示的高度
    return mRecyclerview.computeVerticalScrollRange()-mRecyclerview.computeVerticalScrollExtent();
            }
   }

style中定义的属性

  <declare-styleable name="WaterView">
    <!-- 水柱的高度-->
    <attr name="waterHeight" format="dimension"/>
    <!-- 水柱的宽度-->
    <attr name="waterWidth" format="dimension"/>
    <!-- 水柱的填充颜色-->
    <attr name="waterColor" format="color"/>
    <!-- 水柱的边框颜色-->
    <attr name="waterSideColor" format="color"/>
    <!-- 水柱的边框宽度-->
    <attr name="waterSideWidth" format="dimension"/>

    </declare-styleable>

android 水波进度条柱状图根据Recyclerview的滑
优于别人，并不高贵，真正得高贵是优于过去得自己---海明威下面是我做的效果图片格式转换的不太好不太清除，大家凑...
RecyclerView处理鼠标滑轮滑动事件
项目进行中，遇到了RecyclerView的Item无法根据鼠标滑轮进行滑动问题，对于RecyclerView的滑...
RecyclerView 拖拽移动，长按小图标拖拽，侧滑删除
RecyclerView拖拽移动，长按小图标拖拽，侧滑删除 Github源码 Android RecyclerVi...
Android侧滑删除库SwipeRecyclerView的封装
前言在Android开发过程中，我们偶尔会用到RecyclerView列表的侧滑删除功能。今天基于侧滑删除库Sw...
Android RecyclerView 进度条
1.设置一下属性，进度条在滑动的时候显示。android:orientation="vertical"androi...
RecyclerView 应该在哪添加事件
根据 Android RecyclerView Sample (Kotlin) 结论是应该在 onCreateVi...
android中RecyclerView的Item点击、长按事件
概述本文主要介绍android中RecyclerView的Item点击、长按事件的响应及上滑加载功能封装。之前的...
Android中Holder复用问题
1:android中常见的RecyclerView控件中 position1位置的条目View进度正在更新,但是滑...
Android 可以侧滑的recyclerview
自定义RecyclerView (具体参考的哪篇文章忘了，如有侵权，请留言) Adapter 的ItemView
【Android 基础】 RecyclerView
RecyclerView Google Android 5.0 引入RecyclerView ，android.s...